3f:null 40:["$","title",null,{"children":"Aframe performance | Antonin KLOPP-TOSSER | Observable"}] 46:T5c4,chart = { const gradient = DOM.uid(); let chart = d3.create('svg').attr('viewBox', [0, 0, width, height]), xG = chart .append('g') .attr('transform', `translate(0, ${height - margin})`); chart .append("linearGradient") .attr("id", gradient.id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("y1", '100%') .attr("x2", 0) .attr("y2", '40%') .selectAll("stop") .data(d3.ticks(0, 1, 10)) .join("stop") .attr("offset", d => d) .attr("stop-opacity", d => d) .attr("stop-color", color.interpolator()); let path = chart .append('path') .attr('stroke', fill) .style('fill', gradient), yG = chart.append('g'); return Object.assign(chart.node(), { update(data, area, x, xAxis, yAxis, tickInterval, margin) { path = path .datum(data) .attr('transform', 'translate(0)') .attr('d', area(data)); yG.call(yAxis(data)); if (data && data[0]) { if (animation) { path.call(t, g => g.attr( 'transform', `translate(${x(data[0].date - tickInterval) - 2 * margin})` ) ); xG.call(t, xAxis(data)); } else { path.attr( 'transform', `translate(${x(data[0].date - tickInterval) - 2 * margin})` ); xG.call(xAxis(data)); } } return 'Updating the chart...'; } }); }47:T673,component = { if (!registered) { console.log("REGISTER"); aframe.registerComponent('stats-special', { schema: { lastTime: { type: "number", default: Date.now() } }, init: function() { var scene = this.el; let stats = new ThreeStats($("#scenetest")[0].renderer); var aframeStats = new AFrameStats($("#scenetest")[0]); let r = new rStats({ values: { fps: { caption: 'fps', below: 30 } }, groups: [{ caption: 'Framerate', values: ['fps', 'raf'] }], plugins: [stats, aframeStats] }); this.stats = r; this.statsEl = document.querySelector('.rs-base'); }, update: function() { if (!this.stats) { return; } return !this.data ? this.hide() : this.show(); }, remove: function() { this.el.removeEventListener('enter-vr', this.hideBound); this.el.removeEventListener('exit-vr', this.showBound); if (!this.statsEl) { return; } // Scene detached. this.statsEl.parentNode.removeChild(this.statsEl); }, tick: function() { var stats = this.stats; console.log("TICK"); if (!stats) { return; } stats('rAF').tick(); stats('FPS').frame(); stats().update(); if (Date.now() - this.data.lastTime > tickInterval) { mutable statsArr.push({ date: Date.now(), value: stats().perf.fps.value() }); this.data.lastTime = Date.now(); } } }); mutable registered = true; } }48:T12e7,rStats = function(settings) { let _settings = settings || {}; var _perfCounters = {}; function PerfCounter(id, group) { var _id = id, _time, _value = 0, _total = 0, _averageValue = 0, _accumValue = 0, _accumStart = performance.now(), _accumSamples = 0, _dom = document.createElement('div'), _spanId = document.createElement('span'), _spanValue = document.createElement('div'), _spanValueText = document.createTextNode(''), _def = _settings ? _settings.values[_id.toLowerCase()] : null, _started = false; _spanId.className = 'rs-counter-id'; _spanId.textContent = _def && _def.caption ? _def.caption : _id; _spanValue.className = 'rs-counter-value'; _spanValue.appendChild(_spanValueText); _dom.appendChild(_spanId); _dom.appendChild(_spanValue); _time = performance.now(); function _average(v) { if (_def && _def.average) { _accumValue += v; _accumSamples++; var t = performance.now(); if (t - _accumStart >= (_def.avgMs || 1000)) { _averageValue = _accumValue / _accumSamples; _accumValue = 0; _accumStart = t; _accumSamples = 0; } } } function _start() { _time = performance.now(); if (_settings.userTimingAPI) performance.mark(_id + '-start'); _started = true; } function _end() { _value = performance.now() - _time; if (_settings.userTimingAPI) { performance.mark(_id + '-end'); if (_started) { performance.measure(_id, _id + '-start', _id + '-end'); } } _average(_value); } function _tick() { _end(); _start(); } function _frame() { var t = performance.now(); var e = t - _time; _total++; if (e > 1000) { if (_def && _def.interpolate === false) { _value = _total; } else { _value = (_total * 1000) / e; } _total = 0; _time = t; _average(_value); } } function _set(v) { _value = v; _average(_value); } return { set: _set, start: _start, tick: _tick, end: _end, frame: _frame, value: function() { return _value; } }; } function sample() { var _value = 0; function _set(v) { _value = v; } return { set: _set, value: function() { return _value; } }; } function iterateKeys(array, callback) { var keys = Object.keys(array); for (var j = 0, l = keys.length; j < l; j++) { callback(keys[j]); } } function _perf(idArg) { var id = idArg.toLowerCase(); if (id === undefined) id = 'default'; if (_perfCounters[id]) return _perfCounters[id]; var group = null; if (_settings && _settings.groups) { iterateKeys(_settings.groups, function(j) { var g = _settings.groups[parseInt(j, 10)]; if (!group && g.values.indexOf(id.toLowerCase()) !== -1) { group = g; } }); } var p = new PerfCounter(id, group); _perfCounters[id] = p; return p; } function _init() { console.log(_settings.plugins); if (_settings.plugins) { if (!_settings.values) _settings.values = {}; if (!_settings.groups) _settings.groups = []; if (!_settings.fractions) _settings.fractions = []; for (var j = 0; j < _settings.plugins.length; j++) { _settings.plugins[j].attach(_perf); iterateKeys(_settings.plugins[j].values, function(k) { _settings.values[k] = _settings.plugins[j].values[k]; }); _settings.groups = _settings.groups.concat(_settings.plugins[j].groups); _settings.fractions = _settings.fractions.concat( _settings.plugins[j].fractions ); } } else { _settings.plugins = {}; } } function _update() { iterateKeys(_settings.plugins, function(j) { _settings.plugins[j].update(); }); if (_settings && _settings.fractions) { iterateKeys(_settings.fractions, function(j) { var f = _settings.fractions[parseInt(j, 10)]; var v = []; var base = _perfCounters[f.base.toLowerCase()]; if (base) { base = base.value(); iterateKeys(_settings.fractions[j].steps, function(k) { var s = _settings.fractions[j].steps[parseInt(k, 10)].toLowerCase(); var val = _perfCounters[s]; if (val) { v.push(val.value() / base); } }); } }); } } _init(); return function(id) { if (id) return _perf(id); return { update: _update, perf: _perfCounters, settings: settings }; }; }49:[] 44:{"id":"4b7f914c9f914eb4","slug":"aframe-performance","title":"Aframe performance","thumbnail":"97b74b6c9a141766b123aaf23b7b102915ca7a392f9ac9e94ec0cacbe659e30c","access_level":"public","create_time":"$D2020-07-11T16:16:49.428Z","update_time":"$D2020-07-13T10:12:33.866Z","view_time":null,"first_public_time":"$D2020-07-31T10:13:03.252Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"f968ee8357418900","login":"antoninklopp","name":"Antonin KLOPP-TOSSER","avatar_url":"https://avatars-next.observableusercontent.com/3e825b8a770309e2d48cf6715cf0bba18f99e3b8164d2e051723075f3ac89b0c","tier":"starter_2024","bio":"French developer @ Uptale.\nMachine learning, data,VR and 3D rendering. Sometimes front end when it's needed ","following":false},"version":443,"publish_version":443,"role":null,"authored":false,"authors":[{"type":"individual","id":"ce35321e588f38e4","login":"antoninklopp","name":"Antonin KLOPP-TOSSER","avatar_url":"https://avatars-next.observableusercontent.com/3e825b8a770309e2d48cf6715cf0bba18f99e3b8164d2e051723075f3ac89b0c","tier":null,"bio":"French developer @ Uptale.\nMachine learning, data,VR and 3D rendering. Sometimes front end when it's needed ","following":false}],"members":[{"type":"individual","id":"ce35321e588f38e4","login":"antoninklopp","name":"Antonin KLOPP-TOSSER","avatar_url":"https://avatars-next.observableusercontent.com/3e825b8a770309e2d48cf6715cf0bba18f99e3b8164d2e051723075f3ac89b0c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"b8ee74377e0be1f6","slug":"aframe-performance","title":"Aframe performance","owner":{"id":"f968ee8357418900","login":"antoninklopp","name":"Antonin KLOPP-TOSSER"}},"type":"notebook","body":{"titling":"auto","title":"Aframe performance","cells":[{"id":0,"value":"md`# Aframe performance`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`This notebook goal is to create a real time d3 data chart to be able to calculate aframe performances and understand what really slows them down. It aims to be a test for all people willing to run simple VR apps on their computers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`## Current number of FPS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"statsArr[50].value","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"md`## Aframe scene`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"{\n if (!registered) {\n return;\n }\n aframe;\n return html`\n

\n \n \n \n \n \n \n \n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"md`#### Registering a component`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"md`### Data and updates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"mutable statsArr = {\n let currentValue = 0;\n let data = d3.range(n).map((d, i) => {\n let rand = (Math.random() - 0.5) * 0.2;\n currentValue =\n currentValue + rand < 0.2 || currentValue + rand > 0.8\n ? currentValue - rand\n : currentValue + rand;\n\n return {\n date:\n Math.round(Date.now() / tickInterval) * tickInterval -\n (n - d) * tickInterval,\n value: currentValue\n };\n });\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"mutable registered = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"tickInterval = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"refreshData = () => {\n if (mutable statsArr.length > 60) mutable statsArr.splice(0, 1);\n mutable statsArr = mutable statsArr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"{\n while (true) yield Promises.tick(tickInterval, refreshData());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"updateData(statsArr, chart)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"aframe = {\n const aframe = (window.aframe = await require(\"aframe\"));\n await require(\"aframe-environment-component\").catch(() => {});\n return aframe;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"THREE = require(\"three@0.99.0/build/three.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"ThreeStats = {\n aframe;\n return window.threeStats;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"AFrameStats = {\n aframe;\n return window.aframeStats;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$$ = require(\"jquery\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"import {\n animateSelect,\n t,\n area,\n animation,\n color,\n height,\n margin,\n fill,\n x,\n y,\n xAxis,\n yAxis,\n updateData,\n n\n} from \"@antoninklopp/real-time-area-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"