Hello,
I use a slow machine as my dev. machine. It has an AMD Turion II Neo N40L, 8Gb and an SSD with Linux Mint. I am happy with it as a dev. machine, I have 3 virtual desktops, run many instances of VS Code, launch Firefox with multiple tabs opened. I even installed and played Warcraft 3 with Wine and it was ok.
I am learning and testing Threejs. I don’t expect high frame rates. Still for now I can do what I want, use shaders, … And then test on faster machines (even my phone is faster).
I am working on a demo. I wanted to display the framerate, so I used stats. It said I had something like 5 fps. Ok, fair enough. I wanted to check what was consuming most of the available computing power. I started removing things and checking the difference in fps until I had nothing left to remove except the scene. To my surprise just rendering an empty scene didn’t reach 60 fps, far from it.
With Firefox I have 13 fps, chromium 26 fps, and Brave 28 fps. It seems chromium is fast but if I put all the animations in, chromium still displays high framerates but seems to skip frames, there is a lot of stuttering. Brave has higher frame rates but reacts lately to keypresses (I use the arrow keys to move a small cylinder: chromium and brave display a faster-moving cylinder but with a lot of latency). FF produces the most consistent experience although it displays slow fps.
But for now, I am wondering why the renderer.render consumes that much to render a black frame (the fps are dependent on the renderer size).
I know it is a slow machine but I use it daily, plus on FF with the animations and shaders in, I get 5 fps but it is a drop from 13. I am wondering what is wrong. Why rendering a black frame consumes more than the rest of my demo???
Here is my test:
export default class demo{
constructor(options){
this.stats = this.createStats();
document.body.appendChild( this.stats.domElement );
this.container = options.dom;
this.scene = new THREE.Scene();
this.width = this.container.offsetWidth;
this.height = this.container.offsetHeight;
this.camera = new THREE.PerspectiveCamera( 70,
this.width / this.height, 0.01, 200 );
this.camera.position.z = 8.8;
this.camera.position.y = 0.4;
this.renderer = new THREE.WebGLRenderer( { antialias: true } );
this.renderer.setSize( this.width, this.height );
this.container.appendChild( this.renderer.domElement );
}
render2(){
this.renderer.render( this.scene, this.camera );
window.requestAnimationFrame(this.render2.bind(this))
this.stats.update();
}
createStats = () => {
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0';
stats.domElement.style.top = '0';
return stats;
}
}
let v = new demo({
dom: document.getElementById(‘container’)
});
v.render2();
Since I have identified what was consuming most, I would like to know if there is something I can do about it 
Thank you
