I render an empty scene and get low framerates. rendering a black frame seems to consume more than the rest of my demo


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{
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 );
    this.renderer.render( this.scene, this.camera );
createStats = () => {
    var stats = new Stats();

    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’)

Since I have identified what was consuming most, I would like to know if there is something I can do about it :yum:

Thank you

When I turn antialias to false, I get 16 fps on FF and around 40 on chromium and Brave.

It strikes me that you are describing your development platform for graphics intensive applications without mentioning which GPU (integrated or otherwise) you are using.

That’s a clear indication that your setup is fillrate-limited. It’s not the coordinate setup, transformation, clipping, lighting, texturing and all that, prior to rendering, as there is nothing to render, according to your account. It’s the mere clear screen, that’s breaking your performance already.

I advise against trying to fix that. Rather, spend a little money on a contemporary notebook, maybe even a used one and be done with it.

Thanks for your reply,

Indeed, since a blank screen is a “graphic intensive application” I’d better save for the next fully-fledged Mac Pro :sweat_smile:

Seriously, I know the machine has its limits but I have been comparing apples to apples: why does it take so much to display a blank screen and relatively less to calculate and display a textured ground, 20 or more moving meshes, their shadows, and shaders recalculating some meshes and their shadows? It goes from 13fps to 5.

Plus the differences between the browsers.

I have other windows desktops and laptops with i7s and Nvidia GPUs but since I installed Linux on this machine, I got used to it. And even if you look down on it, it is quite capable :cry:

What’s the FPS like if you try the official examples? I’d have a look at this one. That’ll help confirm that the issue is with your computer and is unrelated to your code or your dev environment.

it displays 7, 8 then 9 fps in turn. With Firefox;

Brave and Chromium display 11,12,13 or 14 fps but it stutters alot. Even with lower fps, firefox feels smoother.

I think I always had to enable gpu acceleration in chrome when starting fresh on a Linux box. My guess is that the stuff you’re seeing is being rendered with software emulation, ie Mesa drivers.

1 Like

I had a look and it is turned on. I turned it off just to see and I get an error WebGL not available.

Maybe, I should follow vielzutun.ch advice and not spend to much time on this, since I have other alternatives but I was curious as to what was happening. For instance, if I set antialias to false, there is a bump in performance to 40 fps in chromium. But what is antialias even doing on an empty frame???

I wanted to check your assumption that maybe the GPU is too slow at filling the screen. So I tried a loop with canvas.fillRect or WebGL’s clear. At first, when I saw 30 fps I fought “ok, subject closed: filling the screen at 60fps is too much for this machine”. Then I wanted to test with chromium, and there I got 60fps no problem :face_with_raised_eyebrow:

30 fps with firefox 60 fps with chromium??? Whether I use fillRect or Clear? How that can be? There is something under the hood in the way browsers handle requestAnimationFrame.

Thanks for your help anyway.

    <canvas id="container"></canvas>
    <div id="text">60 fps</div>
        const canvas = document.querySelector("#container");
        const text= document.querySelector("#text");
        const context = canvas.getContext("webgl");
        //const context = canvas.getContext('2d');
        if (context === null) {
            alert("Unable to initialize WebGL. Your browser or machine may not support it.");
            var timeStamp = Date.now();
            var i=0;
            var average=0;
            var r=0.9;
            (render= () => {
                var time = Date.now()-timeStamp;
                timeStamp = Date.now();
                if(i == 60){
                    average = 0;
                // let red = 255*r;
                // context.fillStyle = `rgba(${red},0,0,1.0)`;
                // context.fillRect(0, 0, canvas.width, canvas.height);
                context.clearColor(r, 0.0, 0.0, 1.0);
                if(r>=1.0) r=0.;

I think Chromium skip frames or whatever. So the fps displayed in chromium don’t relate to the number of frames being actually displayed.

conclusion: firefox fps info is accurate so the machine can’t clear the screen at 60 fps. Solution accepted.

Maybe check whether your OS is not using swap memory since you’re claiming to be runinng that much software on just 8gb of ram. That isnt alot nowadays and chrome/chromium is known for its heavy memory usage.

There is definitely something wrong with your OS in my opinion. Even an old laptop with integrated graphics of nearly 10 years old can fill a blank canvas with 60fps.

Just guessing here, but if it’s not swap, are you runnning your browser in a VM without hardware acceleration?

1 Like

Thank you for your help,

I checked hardware acceleration, it is on. No VM. Indeed, there is no discomfort using this machine that’s why I got used to it. Of course, I can’t expect heavy graphics to run on the machine but threejs examples I tested, ran in an acceptable way.

I have a widget that displays CPU and memory usage. Memory usage is at about 2.5Gb and CPU is at 90% when I run the test. I believe if it was ‘swaps’ it would be temporary drops.

Can you post a screenshot from here?