Bad performance with prime-run and electron #27339

Jlucu4ka228 · 2023-12-07T20:30:25Z

Description

Hello. I am making a three.js application inside electron and everything works well, but then, when I tried to launch with with prime-run (use discrete GPU on linux for those who don't know), it started lag a lot, GPU utilization is 0% and there is an error in terminal

[60005:1207/232051.631762:ERROR:gl_utils.cc(402)] [.WebGL-0x1ed0002baa00]GL Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to ReadPixels (this message will no longer repeat)

Linux sweet-arch 6.6.3-arch1-1 #1 SMP PREEMPT_DYNAMIC Wed, 29 Nov 2023 00:37:40 +0000 x86_64 GNU/Linux
electron v25.9.4
threejs r0.158.0
NVIDIA driver version 545.29.06-2
Distro Arch linux

Reproduction steps

Make a basic electron app
Put threejs application inside
prime-run npm start

Code

index.js (threejs logic)

import * as THREE from 'three';

const scene = new THREE.Scene();

var canvas = document.querySelector('#canvas');
const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);

document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry(5, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);

const light = new THREE.PointLight( 0xffffff, 10);
light.position.set( 0, 3, 0 );

scene.add(cube)
scene.add(light);

camera.position.z = 5;

function animate() {
    if (resizeRendererToDisplaySize(renderer)) {
        const canvas = renderer.domElement;
        camera.aspect = canvas.clientWidth / canvas.clientHeight;
        camera.updateProjectionMatrix();
    }

    cube.rotation.z -= 0.01;
    cube.rotation.x -= 0.01;

    renderer.render(scene, camera);

    requestAnimationFrame(animate);
}

function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;

    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) renderer.setSize(width, height, false);

    return needResize;
}

animate();

index.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Test</title>
	<link rel="stylesheet" href="css/index.css">
</head>

<body>
	<canvas id="canvas"></canvas>
	<script type="importmap">
		{
		  "imports": {
			"three": "https://unpkg.com/three@0.158.0/build/three.module.js",
			"three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/"
		  }
		}
	  </script>
	<script src="view/index.js"></script>
</body>

</html>

main.js (electron)

const { app, BrowserWindow } = require('electron');

const createWindow = () => {
    const win = new BrowserWindow({
      width: 800,
      height: 600
    })
  
    win.loadFile('index.html')
};

app.on('ready', () => {
    createWindow()
})

app.on('window-all-closed', () => {
    app.quit()
})

Live example

Any graphics inside electron calls it(even that one from tutorial with green cube), can't make a live example

Screenshots

No response

Version

r0.158.0

Device

Desktop

Browser

Chrome

OS

Linux

The text was updated successfully, but these errors were encountered:

mrdoob · 2023-12-08T03:27:39Z

Please use one of the links below for help / support:

chat
forum

mrdoob closed this as completed Dec 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bad performance with prime-run and electron #27339

Bad performance with prime-run and electron #27339

Jlucu4ka228 commented Dec 7, 2023

mrdoob commented Dec 8, 2023

Bad performance with prime-run and electron #27339

Bad performance with prime-run and electron #27339

Comments

Jlucu4ka228 commented Dec 7, 2023

Description

Reproduction steps

Code

Live example

Screenshots

Version

Device

Browser

OS

mrdoob commented Dec 8, 2023