Three.JS caused navigation speed problems in Chrome and Firefox on Linux

Questions
1

at NicerApp WebOS Unified Interface, i have navigation speed problems with ThreeJS.
sources are at NicerApp-WebOS-v6.y.z/NicerAppWebOS/logic.vividUserInterface/v6.y.z/3D/na3D.js at d5da8b04a9d4cbf38dc60e8b4a236053427d37ca · NicerEnterprises/NicerApp-WebOS-v6.y.z · GitHub

any clues as to the cause of this?

2

define navigaton speed problem ?
Three uses GPU to render webgl, and render updates uses processor.
More complex scenes need better hardware.

4

at 50 meshes, CPU usage is 600% (with or without video rendering via canvas to serve as background to the website’s “taskbar”)…

at 1000 meshes, CPU usage is at 800% and video rendering of the canvas shows significant hickups.

this is without any animations done to the scene, which does only mouse and cursor navigation.

5

try change

    animate(t, p) {
        setTimeout(function() {
            requestAnimationFrame( function(p) { t.animate (t,p) });
        }, 1000); // 1000 = 100% CPU usage, 10 = 850% CPU usage!

        //if (t.mouse.x!==0 || t.mouse.y!==0) {

            for (var i=0; i<t.s2.length; i++) {
                var it = t.s2[i];
                it.updateMatrixWorld();
            };
            t.raycaster.setFromCamera (t.mouse, t.camera);

            t.scene.matrixWorldAutoUpdate = true;;
            t.camera.matrixWorldAutoUpdate = true;

            //t.flyControls.enabled = false;

            const delta = t.clock.getDelta();

to this

window.totaldelta=0;
animate(t, p) {
    requestAnimationFrame( function(p) { t.animate (t,p) });
    const delta = t.clock.getDelta();
    totaldelta+=delta;
    if(totaldelta<10)return; //change 10 to other values to speedup
    totaldelta=0;

    //if (t.mouse.x!==0 || t.mouse.y!==0) {

        for (var i=0; i<t.s2.length; i++) {
            var it = t.s2[i];
            it.updateMatrixWorld();
        };
        t.raycaster.setFromCamera (t.mouse, t.camera);

        t.scene.matrixWorldAutoUpdate = true;;
        t.camera.matrixWorldAutoUpdate = true;

        //t.flyControls.enabled = false;
6

yeah, eh, oops, that was an experiment (already changed to the code that you just suggested) to see if the canvas video.play() content was painted onto the canvas of the website’s “taskbar” in realtime, with CPU usage below 100%.

and even if i turn off the taskbar video anims completely, CPU usage is stuck at 800% for a 1000 mesh display, even with the totaldelta delay set to 1/10… :frowning:

7

well, i don’t know how, but this issue has been ‘magically fixed’ now :slight_smile:
i simply upgraded my Linux, which upgraded Chrome as well as it’s own firmware,
and CPU usage has dropped to 25%! :slight_smile: