Skip to content

WebGPURenderer: WebGL backend does not clear viewport correctly. #30450

@xintongxia

Description

@xintongxia

Description

WebGPURenderer setScissor doesn't allow values below zero, code as below will not correctly show the scissor view, attached a jsfiddle link for the complete example code.

error message

Uncaught TypeError: Failed to execute 'setScissorRect' on 'GPURenderPassEncoder': Value is outside the 'unsigned long' value range.
const renderer = new THREE.WebGPURenderer({ antialias: true }); 
await renderer.init();

function render() {
    renderer.clear();

    // Render first view (left half)
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    const halfWidth = width / 2;
    const halfHeight = height / 2;

    renderer.setScissorTest(true);
    
    renderer.setViewport(-halfWidth/2, 0, halfWidth, halfHeight);
    renderer.setScissor(-halfWidth/2, 0, halfWidth, halfHeight);
    renderer.render(scene, camera);
    
    renderer.autoClear = true;
    renderer.setScissorTest(false);
      
    requestAnimationFrame(render);
}

render();

Reproduction steps

  1. https://jsfiddle.net/yLuweo3d/16/
  2. the example doesn't work with WebGPURenderer
  3. but if you use WebGLRenderer, the scissor works as expected
    • uncomment line 1 and line 7
    • comment line 2 and line 9, line 10

Code

const renderer = new THREE.WebGPURenderer({ antialias: true }); 
await renderer.init();

function render() {
    renderer.clear();

    // Render first view (left half)
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    const halfWidth = width / 2;
    const halfHeight = height / 2;

    renderer.setScissorTest(true);
    
    renderer.setViewport(-halfWidth/2, 0, halfWidth, halfHeight);
    renderer.setScissor(-halfWidth/2, 0, halfWidth, halfHeight);
    renderer.render(scene, camera);
    
    renderer.autoClear = true;
    renderer.setScissorTest(false);
      
    requestAnimationFrame(render);
}

render();

Live example

Screenshots

WebGLRenderer
Image

WebGPURenderer
Image

Version

173

Device

Desktop

Browser

Chrome

OS

MacOS

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions