Performance problems when rotating camera
eng1neer opened this issue · 0 comments
eng1neer commented
I stumbled upon a scenario when rendering 1000 planes with react-aframe causes fps drops from 80fps to 15fps on my computer when rotating the camera with the mouse. Moving camera with wasd controls does not cause the performance to drop.
Maybe this is more relevant to aframe-react
, but here is the reproducible code based on aframe-react-boilerplate
:
import 'aframe';
import 'aframe-animation-component';
import 'aframe-particle-system-component';
import 'babel-polyfill';
import {Entity, Scene} from 'aframe-react';
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render () {
const coords = [];
for (let i = 0; i < 1000; i++) {
coords.push({x: Math.random(), y: Math.random(), z: -5 + Math.random()});
}
return (
<Scene stats>
{coords.map((c, i) =>
<Entity key={i} geometry={{primitive: 'plane'}} position={c}/>
)}
</Scene>
);
}
}
ReactDOM.render(<App/>, document.querySelector('#sceneContainer'));
If I wrap an array of planes with Entity component, the problem goes away.