.

Author: Platane

README.md

@@ -42,3 +42,8 @@ yarn dev
 
 - ["Dice"](https://skfb.ly/6RtsC) by tnRaro is licensed under [CC BY 4.0](http://creativecommons.org/licenses/by/4.0/).
 - ["Lebombo"](https://hdrihaven.com/hdri/?c=indoor&h=lebombo) by Greg Zaal is licensed under [CC0](https://creativecommons.org/share-your-work/public-domain/cc0/)
+
+# TODO
+
+- framebuffer swapping seems ok-ish
+- touch detection is broken

src/App/App.tsx

@@ -114,7 +114,12 @@ export const App = ({ onReady, onProgress, webXRSession, started }: Props) => {
         <ErrorBoundary onError={setError}>
           {xr8 && <XR8Controls xr8={xr8} onReady={() => setXr8Ready(true)} />}
 
-          {webXRSession && <WebXRControls webXRSession={webXRSession} />}
+          {webXRSession && (
+            <WebXRControls
+              webXRSession={webXRSession}
+              onPoseFound={() => console.log("pose found")}
+            />
+          )}
 
           <React.Suspense fallback={null}>
             <Environment path={"assets/"} files={"lebombo_1k.hdr"} />

src/App/Boot.tsx

@@ -46,8 +46,8 @@ export const Boot = () => {
           loadingProgress={
             loadingStatus !== "ready" ? loadingStatus.progress : 1
           }
-          onStart={(ar: boolean) => {
-            if (ar) webXR.init();
+          onStart={async (ar: boolean) => {
+            if (ar) await webXR.init();
             setStarted(true);
           }}
         />

src/WebXRCanvas/WebXRControls.tsx

@@ -64,25 +64,70 @@ export const WebXRControls = ({
     events,
   } = useThree();
 
+  const viewRef = React.useRef<XRView>();
+
+  useFrame(() => {
+    const view = viewRef.current;
+
+    if (view) {
+      const glLayer = webXRSession.renderState.baseLayer!;
+
+      const gl = renderer.getContext();
+
+      const viewport = glLayer.getViewport(view)!;
+
+      renderer.setViewport(
+        viewport.x,
+        viewport.y,
+        viewport.width,
+        viewport.height
+      );
+
+      // TODO create this outside the loop
+      const newRenderTarget = new THREE.WebGLRenderTarget(
+        glLayer.framebufferWidth,
+        glLayer.framebufferHeight,
+        {
+          format: THREE.RGBAFormat,
+          type: THREE.UnsignedByteType,
+          colorSpace: renderer.outputColorSpace,
+          stencilBuffer: gl.getContextAttributes()?.stencil,
+        }
+      );
+
+      // console.log("render");
+
+      renderer.setRenderTargetFramebuffer(newRenderTarget, glLayer.framebuffer);
+      renderer.setRenderTarget(newRenderTarget);
+
+      renderer.render(scene, camera);
+    }
+  }, 1);
+
   React.useLayoutEffect(() => {
     const gl = renderer.getContext();
 
-    gl.makeXRCompatible().then(() => {
-      webXRSession.updateRenderState({
-        baseLayer: new XRWebGLLayer(webXRSession, gl),
-      });
-    });
+    gl.makeXRCompatible()
+      .then(() => {
+        webXRSession.updateRenderState({
+          baseLayer: new XRWebGLLayer(webXRSession, gl),
+        });
+      })
+      .catch(setError);
 
     let localReference: XRReferenceSpace;
 
-    webXRSession.requestReferenceSpace("local-floor").then((r) => {
-      localReference = r;
+    webXRSession
+      .requestReferenceSpace("local-floor")
+      .then((r) => {
+        localReference = r;
 
-      localReference.addEventListener("reset", ({ transform }) => {
-        if (transform)
-          localReference = localReference.getOffsetReferenceSpace(transform);
-      });
-    });
+        localReference.addEventListener("reset", ({ transform }) => {
+          if (transform)
+            localReference = localReference.getOffsetReferenceSpace(transform);
+        });
+      })
+      .catch(setError);
 
     let cancel: number;
     let lastTime: number;
@@ -96,11 +141,11 @@ export const WebXRControls = ({
       const dt = t - (lastTime ?? t);
       lastTime = t;
 
-      const glLayer = webXRSession.renderState.baseLayer!;
       const pose = localReference && frame.getViewerPose(localReference);
 
       if (pose) {
         const view = pose.views[0];
+        viewRef.current = view;
 
         const l = 4;
         camera.position.set(
@@ -132,6 +177,7 @@ export const WebXRControls = ({
               .copy(camera.position)
               .addScaledVector(v, t);
 
+            console.log("found");
             onPoseFound?.();
           }
         }
@@ -143,18 +189,9 @@ export const WebXRControls = ({
         // camera.projectionMatrix.copy(projectionMatrix);
         // camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
 
-        const viewport = glLayer.getViewport(view)!;
-        renderer.setViewport(
-          viewport.x,
-          viewport.y,
-          viewport.width,
-          viewport.height
-        );
+        advance(dt);
       }
 
-      gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
-      advance(dt);
-
       cancel = webXRSession.requestAnimationFrame(onXRFrame);
     };