WebGLRenderer.setPixelRatio drawing buffer not reflecting new ratio after first render

Short answer

No explicit state reset is required. In standard Three.js, renderer.setPixelRatio(value) stores the new ratio and resizes the canvas drawing buffer using the renderer's current logical size. The new buffer is used on the next render. renderer.resetGLState() clears cached WebGL state; it does not reallocate the drawing buffer.

Established API behavior

• getPixelRatio() returns the stored value, not proof that the framebuffer changed.
• The canvas width and height attributes control the WebGL drawing buffer. When Three.js updates them, the browser reallocates the buffer.
• Three.js does not expose separate color/depth buffer scaling through setPixelRatio. Render targets and post-processing passes have their own sizing.

Likely explanation if it looks unchanged

The most common cause is not the renderer's canvas buffer; it is an offscreen target that kept the old size. If you use EffectComposer, a WebGLRenderTarget, or a custom framebuffer, resize those after changing the ratio. A CSS rule or external resize handler that later writes canvas.width or canvas.height can also overwrite the renderer's size.

Apply it mid-session

1. Clamp the ratio for the device, for example const next = Math.min(window.devicePixelRatio, 2);
2. Call renderer.setPixelRatio(next);
3. If the logical CSS size changed in the same interaction, call renderer.setSize(width, height, false); or use true if Three.js should update the CSS size too.
4. If post-processing is active, call the composer's own resize method such as composer.setSize(width, height); Some builds also expose composer.setPixelRatio(next);
5. Render once.

Verify the actual buffer

Check the canvas attributes and WebGL drawing buffer, not just getPixelRatio():

const next = Math.min(window.devicePixelRatio, 2);
renderer.setPixelRatio(next);
const size = renderer.getSize(new THREE.Vector2());
console.log(renderer.getPixelRatio(), size.x, size.y, renderer.domElement.width, renderer.domElement.height);
const gl = renderer.getContext();
renderer.render(scene, camera);
console.log(gl.drawingBufferWidth, gl.drawingBufferHeight);

Expected: domElement.width and gl.drawingBufferWidth equal Math.floor(size.x * next); height likewise.

Version note

I am not aware of a documented r152-specific change that requires resetGLState() for setPixelRatio. Treat any r152 or WebGL1-specific claim as unverified until checked against your exact Three.js build and changelog. High ratios can exhaust GPU memory on mobile, but the limit is device-dependent and not a Three.js clamp.

If the canvas attributes match but output is still low-resolution, the one detail that changes the fix is whether you are rendering directly to the canvas or through EffectComposer or custom render targets.