Add support for multiview with WebGPURenderer

[vincentfretin]

You can use the new WebGPURenderer with aframe 1.7.1 with importmap, if you alias three to three.webgpu.js, aframe will use WebGPURenderer instead of WebGLRenderer, see source of the example https://aframe.io/aframe/examples/showcase/webgpu/ and using the latest super-three 0.177.0. But to use multiview with WebGPURenderer you will need a change here https://github.com/aframevr/aframe/blob/9ff61ffaf98c42b255fb17674eddb0d85c3239ba/src/core/scene/a-scene.js#L529-L547 the option is just called multiview and not multiviewStereo in WebGPURenderer it seems https://github.com/mrdoob/three.js/blob/b8f5c787fe6afbcbc442a6990f36a6c42d7405ca/src/renderers/webgpu/WebGPURenderer.js#L40C26-L40C35

Update the example https://aframe.io/aframe/examples/performance/multiview-extension/?multiview=on or duplicate it to test it with the new WebGPURenderer. I was answering this on discord, so I'm creating the issue if anyone want to test it and do the PR.

[mrxz]

We could rename it to multiview in super-three, while keeping the property name multiviewStereo.

[dmarcos]

Yeah. What are the implications of using WebGPURenderer? Is it feature complete? Many components expected to break?

[vincentfretin]

I'm not following the development of WebGPURenderer that closely and I'm not currently using it. I just know that the aframe text component is not working because of the shaders from last time I checked all the aframe examples with WebGPURenderer using npm run start:webgpu in this repo.

[vincentfretin]

A quick test with

--- a/src/core/scene/a-scene.js
+++ b/src/core/scene/a-scene.js
@@ -527,7 +527,8 @@ export class AScene extends AEntity {
       }
 
       if (rendererAttr.multiviewStereo) {
-        rendererConfig.multiviewStereo = rendererAttr.multiviewStereo === 'true';
+        rendererConfig.multiview = rendererAttr.multiviewStereo === 'true';
+        rendererConfig.forceWebGL = true;
       }

npm run dist
npm run start:webgpu

https://192.168.1.15:8080/performance/multiview-extension/?multiview=on (replace by your ip) I got a warning

WARNING in ./src/shaders/msdf.js 47:8-27
export 'UniformsUtils' (imported as 'THREE') was not found in 'three'

because of the fps counter. In VR it renders, but I have no idea if the multiview is working or not, I don't see the fps :D

Separate note, multiview with the old WebGLRenderer does't work anymore, even with the fix in https://github.com/supermedium/three.js/pull/24

[vincentfretin]

With OVR Metrics tool, I get 15fps in VR and issue with black background instead of white so really bad. With the old renderer with multiview we got 60fps. With multiview: false, I have a gl.getContextAttributes is not a function error in XRManager.setSession.

[vincentfretin]

We could rename it to multiview in super-three, while keeping the property name multiviewStereo.

There is another multiview variable that creates a WebGLMultiview instance so we would need to rename that variable to something else glMultiview for example.

[vincentfretin]

https://github.com/supermedium/three.js/pull/25 fixes the multiview for WebGLRenderer on three 177, I got 45fps with multiview on compared to 30fps with multiview off. I also have a black background in VR. I'm not sure what fps we really had in previous aframe master version (I don't know which one worked) and if the background was black or not.

[mrxz]

I think the black background is "correct", as there's no a-sky or background= defined for that scene. I also see 45fps with it enabled compared to 30fps with it off on a Quest 3. One thing to note is that the example places cubes randomly in a cube around the origin, so there can be variances from run to run. Though, the handful of times I did run it seemed mostly consistent with the above observation.