aframe-react-boilerplate icon indicating copy to clipboard operation
aframe-react-boilerplate copied to clipboard

Performance problems when rotating camera

Open eng1neer opened this issue 7 years ago • 0 comments

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.

eng1neer avatar May 25 '17 21:05 eng1neer