| <!doctype html> |
| <!-- |
| Copyright 2018 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'> |
| |
| <!-- Origin Trial Token, feature = WebXR Device API, origin = https://immersive-web.github.io, expires = 2018-08-28 --> |
| <meta http-equiv="origin-trial" data-feature="WebXR Device API" data-expires="2018-08-28" content="AnNpu7ceXvLew05ccD8Zr1OZsdZiB2hLQKK82kTTMDwF7oRKtP3QEJ4RzkeHrmB8Sq0vSV6ZNmszpBCZ0I8p9gAAAABceyJvcmlnaW4iOiJodHRwczovL2ltbWVyc2l2ZS13ZWIuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZSIsImV4cGlyeSI6MTUzNTQxNDQwMH0="> |
| |
| <title>Input Selection</title> |
| |
| <link href='css/common.css' rel='stylesheet'></link> |
| |
| |
| <!--The polyfill is not needed for browser that have native API support, |
| but is linked by these samples for wider compatibility.--> |
| <!--script src='https://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxr-polyfill.js'></script--> |
| <script src='js/xrray-polyfill.js' type='module'></script> |
| <script src='js/webxr-polyfill.js'></script> |
| |
| <script src='js/webxr-button.js'></script> |
| </head> |
| <body> |
| <header> |
| <details open> |
| <summary>Input Selection</summary> |
| <p> |
| This sample demonstrates handling 'select' events generated by |
| XRInputSources to create clickable objects in the scene. |
| <a class="back" href="./">Back</a> |
| </p> |
| </details> |
| </header> |
| <script type="module"> |
| import {Scene} from './js/cottontail/src/scenes/scene.js'; |
| import {Renderer, createWebGLContext} from './js/cottontail/src/core/renderer.js'; |
| import {Gltf2Node} from './js/cottontail/src/nodes/gltf2.js'; |
| import {QueryArgs} from './js/cottontail/src/util/query-args.js'; |
| import {FallbackHelper} from './js/cottontail/src/util/fallback-helper.js'; |
| import {Node} from './js/cottontail/src/core/node.js'; |
| import {PbrMaterial} from './js/cottontail/src/materials/pbr.js'; |
| import {BoxBuilder} from './js/cottontail/src/geometry/box-builder.js'; |
| import {mat4, vec3, quat} from './js/cottontail/src/math/gl-matrix.js'; |
| import {BoundsRenderer} from './js/cottontail/src/nodes/bounds-renderer.js'; |
| |
| // If requested, initialize the WebXR polyfill |
| if (QueryArgs.getBool('allowPolyfill', false)) { |
| var polyfill = new WebXRPolyfill(); |
| } |
| |
| // Temporary |
| let hideStats = QueryArgs.getBool('hideStats', false); |
| |
| // XR globals. |
| let xrButton = null; |
| let xrImmersiveRefSpace = null; |
| let xrNonImmersiveRefSpace = null; |
| |
| // WebGL scene globals. |
| let gl = null; |
| let renderer = null; |
| let scene = new Scene(); |
| let boundsRenderer = null; |
| if (hideStats) { |
| scene.enableStats(false); |
| } |
| scene.addNode(new Gltf2Node({url: '../media/gltf/cube-room/cube-room.gltf'})); |
| scene.standingStats(true); |
| |
| let boxes = []; |
| |
| let trackingSpaceOriginInWorldSpace = vec3.create(); |
| let trackingSpaceHeadingDegrees = 0; // around +Y axis, positive angles rotate left |
| let floorSize = 10; |
| let floorPosition = [0, -floorSize / 2 + 0.01, 0]; |
| let floorNode = null; |
| |
| let controllerTable = {}; |
| let boxTable = {}; |
| let movableBoxes = {}; |
| let loggedGamepadInfo = {}; |
| |
| class XRControllerState { |
| constructor(button_count) { |
| this.buttons = []; |
| for (let i = 0; i < button_count; ++i) { |
| this.buttons.push(false); |
| } |
| } |
| |
| // returns array of buttons to fire events for |
| update(gamepad) { |
| let result = []; |
| for (let i = 0; i < this.buttons.length; ++i) { |
| let old_state = this.buttons[i]; |
| let new_state = gamepad.buttons[i].pressed; |
| if (old_state && !new_state) { |
| // Button which was previously pressed is not pressed anymore. |
| result.push(i); |
| } |
| this.buttons[i] = new_state; |
| } |
| return result; |
| } |
| } |
| |
| class GamepadBoxSet { |
| constructor(button_count, x, z) { |
| this.box_list = []; |
| this.box_state = []; |
| for (let y = 1; y <= button_count; ++y) { |
| addBox(x, y, z, 1, 0, 0, this.box_list); |
| this.box_state.push(true); |
| } |
| } |
| |
| toggle(box_index) { |
| let box = this.box_list[box_index]; |
| let uniforms = box.renderPrimitive.uniforms; |
| if (this.box_state[box_index]) { |
| uniforms.baseColorFactor.value = [0, 1, 0, 1]; |
| } else { |
| uniforms.baseColorFactor.value = [1, 0, 0, 1]; |
| } |
| this.box_state[box_index] = !this.box_state[box_index]; |
| } |
| } |
| |
| class MovableBox { |
| constructor(x, y, z, inv_speed) { |
| this.box_list = []; |
| addBox(x, y, z, 0, 0, 1, this.box_list); |
| this.inv_speed = inv_speed; |
| } |
| |
| update(dx, dz) { |
| vec3.add(this.box_list[0].position, this.box_list[0].position, [dx / this.inv_speed, 0, dz / this.inv_speed]); |
| } |
| } |
| |
| function ProcessGamepad(gamepad, input_source) { |
| let hand = input_source.handedness; |
| if (!(hand in loggedGamepadInfo)) { |
| loggedGamepadInfo[hand] = true; |
| console.log(gamepad); |
| } |
| if (!(hand in movableBoxes)) { |
| let x = 2; |
| let z = 2; |
| if (hand == "right") { |
| x = -2; |
| z = -2; |
| } |
| movableBoxes[hand] = new MovableBox(x, 2, z, 100); |
| } |
| if (!(hand in boxTable)) { |
| let x = 1; |
| let z = 1; |
| if (hand == "right") { |
| x = -1; |
| z = -1; |
| } |
| boxTable[hand] = new GamepadBoxSet(gamepad.buttons.length, x, z); |
| } |
| if (!(hand in controllerTable)) { |
| controllerTable[hand] = new XRControllerState(gamepad.buttons.length); |
| } |
| let buttons_fired = controllerTable[hand].update(gamepad); |
| for (let button_index of buttons_fired) { |
| console.log("controller for " + hand + " hand fired button " + button_index.toString()); |
| boxTable[hand].toggle(button_index); |
| } |
| for (let i = 0; i < gamepad.axes.length; i += 2) { |
| let dx = gamepad.axes[i]; |
| let dy = gamepad.axes[i + 1]; |
| if (dx != 0 || dy != 0) { |
| movableBoxes[hand].update(dx, -dy); |
| } |
| } |
| } |
| |
| function initXR() { |
| xrButton = new XRDeviceButton({ |
| onRequestSession: onRequestSession, |
| onEndSession: onEndSession, |
| supportedSessionTypes: ['immersive-vr'] |
| }); |
| document.querySelector('header').appendChild(xrButton.domElement); |
| |
| if (navigator.xr) { |
| const mode = 'inline'; |
| navigator.xr.requestSession(mode).then((session) => { |
| session.mode = mode; |
| onSessionStarted(session); |
| }); |
| } else { |
| initFallback(); |
| } |
| } |
| |
| function initFallback() { |
| initGL(); |
| document.body.appendChild(gl.canvas); |
| let fallbackHelper = new FallbackHelper(scene, gl); |
| fallbackHelper.emulateStage = true; |
| } |
| |
| function addBox(x, y, z, r, g, b, box_list) { |
| let boxBuilder = new BoxBuilder(); |
| boxBuilder.pushCube([0, 0, 0], 0.4); |
| let boxPrimitive = boxBuilder.finishPrimitive(renderer); |
| let boxMaterial = new PbrMaterial(); |
| boxMaterial.baseColorFactor.value = [r, g, b, 1.0]; |
| let boxRenderPrimitive = renderer.createRenderPrimitive(boxPrimitive, boxMaterial); |
| let boxNode = new Node(); |
| boxNode.addRenderPrimitive(boxRenderPrimitive); |
| // Marks the node as one that needs to be checked when hit testing. |
| boxNode.selectable = true; |
| box_list.push({ |
| node: boxNode, |
| renderPrimitive: boxRenderPrimitive, |
| position: [x, y, z] |
| }); |
| scene.addNode(boxNode); |
| } |
| |
| function initGL() { |
| if (gl) |
| return; |
| |
| gl = createWebGLContext({ |
| xrCompatible: true |
| }); |
| |
| renderer = new Renderer(gl); |
| |
| scene.setRenderer(renderer); |
| scene.inputRenderer.setControllerMesh(new Gltf2Node({url: '../media/gltf/controller/controller.gltf'})); |
| |
| // Create several boxes to use for hit testing. |
| addBox(-1.0, 1.6, -1.3, 1.0, 0.0, 0.0, boxes); |
| addBox(0.0, 1.7, -1.5, 0.0, 1.0, 0.0, boxes); |
| addBox(1.0, 1.6, -1.3, 0.0, 0.0, 1.0, boxes); |
| |
| addFloorBox(); |
| } |
| |
| function addFloorBox() { |
| let boxBuilder = new BoxBuilder(); |
| boxBuilder.pushCube([0, 0, 0], floorSize); |
| let boxPrimitive = boxBuilder.finishPrimitive(renderer); |
| |
| let boxMaterial = new PbrMaterial(); |
| boxMaterial.baseColorFactor.value = [0.3, 0.3, 0.3, 1.0]; |
| let boxRenderPrimitive = renderer.createRenderPrimitive(boxPrimitive, boxMaterial); |
| |
| floorNode = new Node(); |
| floorNode.addRenderPrimitive(boxRenderPrimitive); |
| floorNode.selectable = true; |
| scene.addNode(floorNode); |
| mat4.identity(floorNode.matrix); |
| mat4.translate(floorNode.matrix, floorNode.matrix, floorPosition); |
| } |
| |
| function onRequestSession() { |
| const mode = 'immersive-vr'; |
| navigator.xr.requestSession(mode).then((session) => { |
| session.mode = mode; |
| xrButton.setSession(session); |
| onSessionStarted(session); |
| }); |
| } |
| |
| function onSessionStarted(session) { |
| if (!session.mode) { |
| session.mode = 'inline'; |
| } |
| |
| session.addEventListener('end', onSessionEnded); |
| |
| // By listening for the 'select' event we can find out when the user has |
| // performed some sort of primary input action and respond to it. |
| session.addEventListener('select', onSelect); |
| |
| initGL(); |
| |
| let outputCanvas = document.createElement('canvas'); |
| document.body.appendChild(outputCanvas); |
| |
| session.updateRenderState({ |
| baseLayer: new XRWebGLLayer(session, gl), |
| outputContext: outputCanvas.getContext('xrpresent') |
| }); |
| |
| // Same logic for establishing a reference space as in room-scale.html |
| session.requestReferenceSpace({ type: 'stationary', subtype: 'floor-level' }).then((refSpace) => { |
| return refSpace; |
| }, (e) => { |
| if (!session.mode.startsWith('immersive')) { |
| // If we're in inline mode, our underlying platform may not support |
| // the stationary reference space, but an identity space is guaranteed. |
| console.log("falling back to identity reference space"); |
| return session.requestReferenceSpace({ type: 'identity' }); |
| } else { |
| throw e; |
| } |
| }).then((refSpace) => { |
| if (session.mode.startsWith('immersive')) { |
| xrImmersiveRefSpace = refSpace; |
| } else { |
| xrNonImmersiveRefSpace = refSpace; |
| } |
| |
| session.requestAnimationFrame(onXRFrame); |
| }); |
| } |
| |
| let playerInWorldSpaceOld = vec3.create(); |
| let playerInWorldSpaceNew = vec3.create(); |
| let playerOffsetInWorldSpaceOld = vec3.create(); |
| let playerOffsetInWorldSpaceNew = vec3.create(); |
| let rotationDeltaQuat = quat.create(); |
| |
| function onSelect(ev) { |
| let session = ev.frame.session; |
| let refSpace = getRefSpace(session); |
| |
| let headPose = ev.frame.getPose(session.viewerSpace, refSpace); |
| if (!headPose) return; |
| |
| // Get the position offset in world space from the tracking space origin |
| // to the player's feet. The headPose position is the head position in world space. |
| // Subtract the tracking space origin position in world space to get a relative world space vector. |
| vec3.set(playerInWorldSpaceOld, headPose.transform.position.x, 0, headPose.transform.position.z); |
| vec3.sub(playerOffsetInWorldSpaceOld, playerInWorldSpaceOld, trackingSpaceOriginInWorldSpace); |
| |
| // based on https://github.com/immersive-web/webxr/blob/master/input-explainer.md#targeting-ray-pose |
| let inputSourcePose = ev.frame.getPose(ev.inputSource.targetRaySpace, refSpace); |
| if (!inputSourcePose) { |
| return; |
| } |
| |
| vec3.copy(playerInWorldSpaceNew, playerInWorldSpaceOld); |
| let rotationDelta = 0; |
| |
| // Hit test results can change teleport position and orientation. |
| let targetRay = new XRRay(inputSourcePose.transform); |
| let hitResult = scene.hitTest(targetRay) |
| if (hitResult) { |
| // Check to see if the hit result was one of our boxes. |
| for (let i = 0; i < boxes.length; ++i) { |
| let box = boxes[i]; |
| if (hitResult.node == box.node) { |
| // Change the box color to something random. |
| let uniforms = box.renderPrimitive.uniforms; |
| uniforms.baseColorFactor.value = [Math.random(), Math.random(), Math.random(), 1.0]; |
| if (i == 0) { |
| // turn left |
| rotationDelta = 30; |
| } else if (i == 1) { |
| // reset heading by undoing the current rotation |
| rotationDelta = -trackingSpaceHeadingDegrees; |
| } else if (i == 2) { |
| // turn right |
| rotationDelta = -30; |
| } |
| console.log('rotate by', rotationDelta); |
| } |
| if (hitResult.node == floorNode) { |
| // New position uses x/z values of the hit test result, keeping y at 0 (floor level) |
| playerInWorldSpaceNew[0] = hitResult.intersection[0]; |
| playerInWorldSpaceNew[1] = 0; |
| playerInWorldSpaceNew[2] = hitResult.intersection[2]; |
| console.log('teleport to', playerInWorldSpaceNew); |
| } |
| } |
| } |
| |
| // Get the new world space offset vector from tracking space origin |
| // to the player's feet, for the updated tracking space rotation. |
| // Formally, this is the old world-space player offset transformed |
| // into tracking space using the old originOffset's rotation component, |
| // then transformed back into world space using the inverse of the |
| // new originOffset. This simplifies to a rotation of the old player |
| // offset by (new angle - old angle): |
| // worldOffsetNew = inv(rot_of(originoffsetNew)) * rot_of(originoffsetOld) * worldOffsetOld |
| // = inv(rotY(-angleNew)) * rotY(-angleOld) * worldOffsetOld |
| // = rotY(angleNew) * rotY(-angleOld) * worldOffsetOld |
| // = rotY(angleNew - angleOld) * worldOffsetOld |
| quat.identity(rotationDeltaQuat); |
| quat.rotateY(rotationDeltaQuat, rotationDeltaQuat, rotationDelta * Math.PI / 180); |
| vec3.transformQuat(playerOffsetInWorldSpaceNew, playerOffsetInWorldSpaceOld, rotationDeltaQuat); |
| trackingSpaceHeadingDegrees += rotationDelta; |
| |
| // Update tracking space origin so that origin + playerOffset == player location in world space |
| vec3.sub(trackingSpaceOriginInWorldSpace, playerInWorldSpaceNew, playerOffsetInWorldSpaceNew); |
| |
| // Compute the origin offset |
| quat.identity(invOrientation); |
| quat.rotateY(invOrientation, invOrientation, -trackingSpaceHeadingDegrees * Math.PI / 180); |
| vec3.negate(invPosition, trackingSpaceOriginInWorldSpace); |
| vec3.transformQuat(invPosition, invPosition, invOrientation); |
| let xform = new XRRigidTransform( |
| {x: invPosition[0], y: invPosition[1], z: invPosition[2]}, |
| {x: invOrientation[0], y: invOrientation[1], z: invOrientation[2], w: invOrientation[3]}); |
| |
| // Update refSpace to use a new originOffset with the teleported player position and orientation |
| refSpace = refSpace.getOffsetReferenceSpace(xform); |
| |
| console.log('teleport to', trackingSpaceOriginInWorldSpace); |
| } |
| |
| function onEndSession(session) { |
| session.end(); |
| } |
| |
| function onSessionEnded(event) { |
| if (event.session.mode.startsWith('immersive')) { |
| xrButton.setSession(null); |
| } |
| |
| if (event.session.renderState.outputContext) { |
| document.body.removeChild(event.session.renderState.outputContext.canvas); |
| } |
| } |
| |
| let invPosition = vec3.create(); |
| let invOrientation = quat.create(); |
| |
| function getRefSpace(session) { |
| return session.mode.startsWith('immersive') ? |
| xrImmersiveRefSpace : |
| xrNonImmersiveRefSpace; |
| } |
| |
| function onXRFrame(time, frame) { |
| let session = frame.session; |
| let refSpace = getRefSpace(session); |
| |
| let pose = frame.getViewerPose(refSpace); |
| scene.startFrame(); |
| session.requestAnimationFrame(onXRFrame); |
| |
| function updateBoxes(box_list, rotate) { |
| // Update the matrix for each box |
| for (let box of box_list) { |
| let node = box.node; |
| mat4.identity(node.matrix); |
| mat4.translate(node.matrix, node.matrix, box.position); |
| if (rotate) { |
| mat4.rotateX(node.matrix, node.matrix, time/1000); |
| mat4.rotateY(node.matrix, node.matrix, time/1500); |
| } |
| } |
| } |
| |
| for (let source of session.inputSources) { |
| let gamepad = source.gamepad; |
| if (gamepad) { |
| ProcessGamepad(gamepad, source); |
| } |
| } |
| |
| updateBoxes(boxes, true); |
| for (let hand in boxTable) { |
| updateBoxes(boxTable[hand].box_list, false); |
| } |
| for (let hand in movableBoxes) { |
| updateBoxes(movableBoxes[hand].box_list, false); |
| } |
| |
| // In this sample and most samples after it we'll use a helper function |
| // to automatically add the right meshes for the session's input sources |
| // each frame. This also does simple hit detection to position the |
| // cursors correctly on the surface of selectable nodes. |
| scene.updateInputSources(frame, refSpace); |
| scene.drawXRFrame(frame, pose); |
| scene.endFrame(); |
| } |
| |
| // Start the XR application. |
| initXR(); |
| </script> |
| </body> |
| </html> |