`setScissor()` has flipped Y axis in WebGPU

[astralarya]

Description

The setScissor() method (https://threejs.org/docs/?q=sci#Renderer.setScissor) seems to use a flipped Y axis in WebGPU compared to WebGL. This apparently matches the underlying differences in convention between WebGPU and WebGL, but the docs imply that this should not be the case. This issue also likely affects PassNode, which also has a setScissor() function.

Reproduction steps

Create a scissored view with setScissor() using the WebGPU renderer. The position of the scissored view is consistent with a Y axis with zero in the top left of the viewport.

Code

The drei View component calls setScissor() here:
https://github.com/pmndrs/drei/blob/master/src/web/View.tsx#L97

Live example

Minimal repro using @react-three/drei View here: https://github.com/astralarya/react-three-drei-view-webgpu
Run pnpm install and pnpm dev to start.

Screenshots

The render canvas is styled to cover the entire viewport. The view div is outlined in red and is setup to be in the upper left corner of the viewport. Note how the scene is rendering in the bottom left corner.

Commenting out the gl={} prop here switches the app from WebGPU back to WebGL (https://github.com/astralarya/react-three-drei-view-webgpu/blob/main/src/App.tsx#L30)

The scene will then render in the red box as expected (after a hard reload--hot reload is not sufficient)

Version

v0.181.2

Device

No response

Browser

No response

OS

No response

[Mugen87]

Please demonstrate the issue with plain three.js (so without react). Use the following fiddle as a starter template: https://jsfiddle.net/xno7bmw0/

Closing until the issue has been demonstrated.

[astralarya]

@Mugen87, looking at the official Three.js examples, it looks like the WebGPU and WebGL coordinate systems are flipped as well.

WebGL:
https://github.com/mrdoob/three.js/blob/master/examples/webgl_multiple_elements.html#L214-L215

renderer.setViewport( left, bottom, width, height );
renderer.setScissor( left, bottom, width, height );

WebGPU:
https://github.com/mrdoob/three.js/blob/master/examples/webgpu_multiple_elements.html#L221-L222

renderer.setViewport( left, top, width, height );
renderer.setScissor( left, top, width, height );

Is this difference between the APIs intentional? If so, the docs should probably be updated.

[astralarya]

@sunag @Mugen87 @mrdoob, the official Three.js examples above use a flipped Y axis convention for WebGPU. I don't think this is necessarily a bug if the design intent is for the API to follow the flipped WebGPU convention (https://www.w3.org/TR/webgpu/#coordinate-systems). However, the docs currently seem to imply that this is not the case, so there could be some clarity there for the rest of the ecosystem to have a clear direction.

[Mugen87]

It is intended to follow the WebGPU convention. What part of the docs are unclear to you?

[astralarya]

@Mugen87, thanks for the clarification. Currently, the WebGPURenderer's setScissor() and setViewpoint() methods use the inherited base Renderer class docs, which describe the Y coordinate as being in the lower left corner (ie. the WebGL convention), while the WebGPU convention uses the upper left corner.

Probably just need to add specific docs for the new renderer, but the methods in question are documented here:
https://threejs.org/docs/#Renderer.setScissor
https://threejs.org/docs/#Renderer.setViewport