Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bad performance with prime-run and electron #27339

Closed
Jlucu4ka228 opened this issue Dec 7, 2023 · 1 comment
Closed

Bad performance with prime-run and electron #27339

Jlucu4ka228 opened this issue Dec 7, 2023 · 1 comment

Comments

@Jlucu4ka228
Copy link

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

  1. Make a basic electron app
  2. Put threejs application inside
  3. 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/[email protected]/build/three.module.js",
			"three/addons/": "https://unpkg.com/[email protected]/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
@mrdoob
Copy link
Owner

mrdoob commented Dec 8, 2023

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

@mrdoob mrdoob closed this as completed Dec 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mrdoob @Jlucu4ka228