Examples rendering resolution grows when lowering browser zoom below 100%

[davcri]

Description

As the title says.

I'm happy to work on a PR. I would implement resize logic as described in https://threejs.org/manual/#en/responsive in order to have a consistent approach between the manual and examples section:

        function resizeRendererToDisplaySize(renderer) {
          const canvas = renderer.domElement;
          const pixelRatio = window.devicePixelRatio;
          const width  = Math.floor( canvas.clientWidth  * pixelRatio );
          const height = Math.floor( canvas.clientHeight * pixelRatio );
          const needResize = canvas.width !== width || canvas.height !== height;
          if (needResize) {
            renderer.setSize(width, height, false);
          }
          return needResize;
        }

What do you think?

Reproduction steps

1. Open https://threejs.org/examples/?q=car#webgl_materials_car
2. Zoom out the page
3. Observe canvas width and height from the inspector

Code

I guess this is related to window.devicePixelRatio not being used in the resize logic.

function init() {

	const container = document.getElementById( 'container' );

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setAnimationLoop( animate );
	container.appendChild( renderer.domElement );

	window.addEventListener( 'resize', onWindowResize );
                          // ...
                 }


function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}

https://github.com/mrdoob/three.js/blob/r180/examples/webgl_materials_car.html#L187-L194

I picked the car example in this issue, but I think most of the examples are based on the same resize logic.

Live example

https://threejs.org/examples/?q=car#webgl_materials_car

Screenshots

2025-09-25.09-59-35.trimmed.mp4

Version

r180

Device

No response

Browser

No response

OS

No response

[Mugen87]

In order to keep the example code simple, I do not vote to add this code snippet everywhere. But enhancing the manual like done with #31942 is a good idea.

[davcri]

@Mugen87 I'm okay with keeping the examples code simple.

This would be the minimal change to fix the current issue, what do you say?

function init() {

	const container = document.getElementById( 'container' );

	renderer = new THREE.WebGLRenderer( { antialias: true } );
-	renderer.setPixelRatio( window.devicePixelRatio );
-	renderer.setSize( window.innerWidth, window.innerHeight  );
+	renderer.setSize( window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio  );
	renderer.setAnimationLoop( animate );
	container.appendChild( renderer.domElement );

	window.addEventListener( 'resize', onWindowResize );
                          // ...
                 }


function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
-   renderer.setSize( window.innerWidth, window.innerHeight );
+	renderer.setSize( window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio );

}

PS: I think the current zoom issue affects LowDPI monitors as well, unlike the one that I described in #31942

[Mugen87]

TBH, I'm not in favor of giving up the explicit call of setPixelRatio().

[Mugen87]

If the pixel ratio changes, why not setting the new value via setPixelRatio() in the resize event listener?

[vanruesc]

Since the pixel ratio is applied on page load, simply refreshing the page at the desired zoom level would also work.

[davcri]

Since the pixel ratio is applied on page load, simply refreshing the page at the desired zoom level would also work.

Yes that is true, however I would be in favor of keeping it in sync to avoid inconsistent behaviours.

EG: imagine testing an app for mobile/desktop layout and using the browser responsive design mode, selecting devices with various DPRs:

• switching from one device to another is not going to change the DPR value
• enabling responsive design mode after a page load would not guarantee the correct DPR value to be applied

Side note: in a little experiment I did a while ago, I also listened to DPR changes (https://github.com/davcri/example-three-rendering-resolution/blob/main/src/main.ts#L139-L159) to easily check for dpr/resolution issues.

---

If the pixel ratio changes, why not setting the new value via setPixelRatio() in the resize event listener?

Yes, this is also true. I proposed the other approach to be consistent with what the manual recommends, specifically this part. However, I can update the examples using setPixelRatio() if you give me the green light on this.

Regarding the manual: it's a bit strange to see examples that do the opposite of what the manual says. Maybe this part should be updated as well?

We could update it and mention setDrawingBufferSize and getDrawingBufferSize? I'm not familiar with the Renderer API history, maybe these methods were added after the manual was written?

[Mugen87]

Regarding the manual: it's a bit strange to see examples that do the opposite of what the manual says. Maybe this part should be updated as well?

Yes, that is true. The manual was written by a contributor who proposes a different resize logic than we use in the examples. The manual was later merged as a whole into the repository but without updating this aspect. I personally was never in favor of the resizeRendererToDisplaySize() helper. I think what we do in the examples is easier to understand.

[Mugen87]

Closing. Updating the manual via #31942 was a consistent change but in the examples let's keep the status quo. In any event, thanks for working on this issue!