From 4ff94eb3e27f98e79dcfafcfcebec50ec8101edd Mon Sep 17 00:00:00 2001
From: Rik Cabanier <cabanier@gmail.com>
Date: Fri, 11 Nov 2022 13:11:09 -0800
Subject: [PATCH] Create system-keyboard.html

---
 system-keyboard.html | 242 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 242 insertions(+)
 create mode 100644 system-keyboard.html
diff --git a/system-keyboard.html b/system-keyboard.html
new file mode 100644
index 0000000..40786e1
--- /dev/null
+++ b/system-keyboard.html
@@ -0,0 +1,242 @@
+<!doctype html>
+<!--
+Copyright 2022 The Immersive Web Community Group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+<html>
+
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
+  <meta name='mobile-web-app-capable' content='yes'>
+  <meta name='apple-mobile-web-app-capable' content='yes'>
+  <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+  <link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>
+  <link rel='stylesheet' href='css/common.css'>
+
+  <title>System Keyboard</title>
+</head>
+
+<body>
+  <header>
+    <details open>
+      <summary>System Keyboard</summary>
+      <p>
+        This sample demonstrates how to use the device's system keyboard to receive text input.
+        <a class="back" href="./index.html">Back</a>
+      </p>
+    </details>
+  </header>
+  <script type="module">
+    import { WebXRButton } from './js/util/webxr-button.js';
+    import { Scene, WebXRView } from './js/render/scenes/scene.js';
+    import { Renderer, createWebGLContext } from './js/render/core/renderer.js';
+    import { QueryArgs } from './js/util/query-args.js';
+
+    // If requested, use the polyfill to provide support for mobile devices
+    // and devices which only support WebVR.
+    import WebXRPolyfill from './js/third-party/webxr-polyfill/build/webxr-polyfill.module.js';
+    if (QueryArgs.getBool('usePolyfill', true)) {
+      let polyfill = new WebXRPolyfill();
+    }
+
+    // XR globals.
+    let xrButton = null;
+    let xrSession = null;
+    let xrRefSpace = null;
+    let xrGLFactory = null;
+    let xrFramebuffer = null;
+
+    // WebGL scene globals.
+    let gl = null;
+    let renderer = null;
+    let scene = new Scene();
+    scene.enableStats(false);
+
+    // Layer globals
+    let projLayer = null;
+    let cyldLayer = null;
+    let cyldTextureWidth = 0;
+    let cyldTextureHeight = 0;
+
+    // Text globals
+    let textField = null;
+    let canvas = null;
+    let renderingContext = null;
+    let fillStyles = ["silver", "gray", "white", "maroon", "red", "purple", "fuchsia", "green", "lime", "olive", "yellow", "navy", "blue", "teal", "aqua"];
+    let currentFillStyle = "white";
+
+    function initXR() {
+      xrButton = new WebXRButton({
+        onRequestSession: onRequestSession,
+        onEndSession: onEndSession
+      });
+      document.querySelector('header').appendChild(xrButton.domElement);
+
+      if (navigator.xr) {
+        navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
+          xrButton.enabled = supported;
+        });
+      }
+    }
+
+    function onRequestSession() {
+      if (!xrSession) {
+        navigator.xr.requestSession('immersive-vr', {
+          requiredFeatures: ['layers'],
+        }).then(onSessionStarted);
+      } else {
+        onEndSession();
+      }
+    }
+
+    function initGL() {
+      if (gl) { return; }
+      gl = createWebGLContext({ xrCompatible: true, webgl2: true, });
+      document.body.appendChild(gl.canvas);
+      gl.clearColor(0.0, 0, 0, 0.0);
+
+      function onResize() {
+        gl.canvas.width = gl.canvas.clientWidth * window.devicePixelRatio;
+        gl.canvas.height = gl.canvas.clientHeight * window.devicePixelRatio;
+      }
+      window.addEventListener('resize', onResize);
+      onResize();
+
+      renderer = new Renderer(gl);
+      scene.setRenderer(renderer);
+    }
+
+    function onSessionStarted(session) {
+      xrSession = session;
+      scene.inputRenderer.useProfileControllerMeshes(session);
+      session.addEventListener('end', onSessionEnded);
+
+      initGL();
+
+      xrFramebuffer = gl.createFramebuffer();
+      xrGLFactory = new XRWebGLBinding(session, gl);
+
+      session.requestReferenceSpace('local').then((refSpace) => {
+        xrRefSpace = refSpace;
+        projLayer = xrGLFactory.createProjectionLayer({ space: refSpace, stencil: false });
+        session.updateRenderState({ layers: [projLayer] });
+
+        // Loading texture is async, create layer and update render state when done
+        cyldTextureWidth = 1500;
+        cyldTextureHeight = 750;
+        let viewPixelWidth = cyldTextureWidth;
+        let viewPixelHeight = cyldTextureHeight;
+        cyldLayer = xrGLFactory.createCylinderLayer({
+          space: refSpace,
+          viewPixelWidth: viewPixelWidth,
+          viewPixelHeight: viewPixelHeight,
+          layout: "mono",
+        });
+        cyldLayer.centralAngle = 60 * Math.PI / 180;
+        cyldLayer.aspectRatio = viewPixelWidth / viewPixelHeight;
+        cyldLayer.radius = 2;
+
+        session.updateRenderState({ layers: [cyldLayer, projLayer] });
+
+        textField = document.createElement("input");
+        textField.type = "text";
+        textField.value = "Click anywhere to show the system keyboard"
+        textField.oninput = function() {
+          currentFillStyle = fillStyles[Math.floor(Math.random() * fillStyles.length)];
+        };
+        document.body.appendChild(textField);
+        
+        canvas = document.createElement('canvas');
+        canvas.width = cyldTextureWidth;
+        canvas.height = cyldTextureHeight;
+
+        session.requestAnimationFrame(onXRFrame);
+      });
+
+      session.addEventListener('selectstart', onSelectStart);
+    }
+
+    function onSelectStart(ev) {
+      if (document.activeElement === textField) {
+        textField.blur();
+      }
+      textField.focus();
+    }
+
+    function onEndSession() {
+      xrSession.end();
+    }
+
+    function onSessionEnded(event) {
+      if (event.session.isImmersive) {
+        xrButton.setSession(null);
+      }
+      xrSession = null;
+      gl = null;
+
+      textField.remove();
+    }
+
+    function onXRFrame(time, frame) {
+      let pose = frame.getViewerPose(xrRefSpace);
+      xrSession.requestAnimationFrame(onXRFrame);
+
+      renderingContext = canvas.getContext('2d');
+      renderingContext.font = '48px serif';
+      renderingContext.fillStyle = currentFillStyle;
+      renderingContext.clearRect(0, 0, canvas.width, canvas.height);
+      renderingContext.fillText(textField.value, 10, 50);
+
+      let glayer = xrGLFactory.getSubImage(cyldLayer, frame);
+
+      // TEXTURE_CUBE_MAP expects the Y to be flipped for the faces and it already
+      // is flipped in our texture image.
+      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+      gl.bindTexture(gl.TEXTURE_2D, glayer.colorTexture);
+      gl.texSubImage2D(gl.TEXTURE_2D, 0,
+        0, 0,
+        gl.RGBA, gl.UNSIGNED_BYTE, canvas);
+      gl.bindTexture(gl.TEXTURE_2D, null);
+
+      if (pose) {
+        gl.bindFramebuffer(gl.FRAMEBUFFER, xrFramebuffer);
+        scene.updateInputSources(frame, xrRefSpace);
+
+        let views = [];
+        for (let view of pose.views) {
+          let viewport = null;
+          let glLayer = xrGLFactory.getViewSubImage(projLayer, view);
+          glLayer.framebuffer = xrFramebuffer;
+          viewport = glLayer.viewport;
+          gl.bindFramebuffer(gl.FRAMEBUFFER, xrFramebuffer);
+          gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, glLayer.colorTexture, 0);
+          gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, glLayer.depthStencilTexture, 0);
+          views.push(new WebXRView(view, glLayer, viewport));
+        }
+        scene.drawViewArray(views);
+      }
+      scene.endFrame();
+    }
+
+    initXR();
+  </script>
+</body>
+
+</html>
