| <!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>Scene tester</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/webxr-polyfill.js'></script> |
| |
| <style> |
| #scene-select { |
| position: absolute; |
| z-index: 2; |
| } |
| </style> |
| </head> |
| <body> |
| <header> |
| <details open> |
| <summary>Module Tester</summary> |
| <p> |
| Just a simple test page to allow developers to test sample scenes |
| without a headset.<br/> |
| WASD + Mouse Click/Drag to move. |
| </p> |
| <select id='scene-select'> |
| <option value='void' selected>Void</option> |
| <option value='cube-sea'>Cube Sea</option> |
| <option value='space'>Space (glTF)</option> |
| <option value='camp'>Camp (glTF)</option> |
| <option value='cave'>Cave (glTF)</option> |
| <option value='garage'>Garage (glTF)</option> |
| <option value='cube-room'>Cube Room (glTF)</option> |
| <option value='home-theater'>Home Theater (glTF)</option> |
| </select> |
| </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 {UrlTexture} from './js/cottontail/src/core/texture.js'; |
| |
| import {BoxBuilder} from './js/cottontail/src/geometry/box-builder.js'; |
| import {PbrMaterial} from './js/cottontail/src/materials/pbr.js'; |
| |
| import {ButtonNode} from './js/cottontail/src/nodes/button.js'; |
| import {CubeSeaNode} from './js/cottontail/src/nodes/cube-sea.js'; |
| import {Gltf2Node} from './js/cottontail/src/nodes/gltf2.js'; |
| |
| import {mat4, vec3} from './js/cottontail/src/math/gl-matrix.js'; |
| |
| const IDENTITY_MATRIX = new Float32Array([1, 0, 0, 0, |
| 0, 1, 0, 0, |
| 0, 0, 1, 0, |
| 0, 1.6, 0, 1]); |
| |
| let projectionMat = mat4.create(); |
| let viewMat = mat4.create(); |
| |
| let scene = null; |
| let gl = createWebGLContext({antialias: false}); |
| document.body.appendChild(gl.canvas); |
| |
| let renderer = new Renderer(gl); |
| |
| let boxNodes = []; |
| |
| function setScene(newScene) { |
| scene = newScene; |
| scene.standingStats(true); |
| scene.addNode(new SkyboxNode({url: '../media/textures/milky-way-4k.png'})); |
| |
| let stereo = new Gltf2Node({url: '../media/gltf/stereo/stereo.gltf'}); |
| stereo.selectable = true; |
| boxNodes.push(stereo); |
| scene.addNode(stereo); |
| |
| scene.setRenderer(renderer); |
| |
| let boxBuilder = new BoxBuilder(); |
| |
| function addBox(x, y, z) { |
| boxBuilder.pushCube([x, y, z], 0.3); |
| let boxPrimitve = boxBuilder.primitiveStream.finishPrimitive(renderer); |
| |
| let boxMaterial = new PbrMaterial(); |
| boxMaterial.baseColorFactor.value = [0.0, 0.3, 1.0, 1.0]; |
| |
| let node = renderer.createMesh(boxPrimitve, boxMaterial); |
| node.selectable = true; |
| scene.addNode(node); |
| boxNodes.push(node); |
| boxBuilder.clear(); |
| } |
| |
| /*addBox(0, 0, -1.0); |
| addBox(-0.7, 0, -1.0); |
| addBox(0.7, 0, -1.0); |
| addBox(0, -0.7, -1.0); |
| addBox(0, 0.7, -1.0); |
| addBox(-0.7, -0.7, -1.0); |
| addBox(0.7, -0.7, -1.0); |
| addBox(-0.7, 0.7, -1.0); |
| addBox(0.7, 0.7, -1.0);*/ |
| |
| let button = new ButtonNode(new UrlTexture('../media/textures/play-button.png'), () => { |
| // Do something? |
| button.iconTexture = new UrlTexture('../media/textures/pause-button.png'); |
| console.log("Button clicked"); |
| }); |
| scene.addNode(button); |
| } |
| |
| function onResize () { |
| gl.canvas.width = gl.canvas.offsetWidth * window.devicePixelRatio; |
| gl.canvas.height = gl.canvas.offsetHeight * window.devicePixelRatio; |
| |
| gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); |
| mat4.perspective(projectionMat, Math.PI*0.4, |
| gl.canvas.width/gl.canvas.height, |
| 0.1, 1000.0); |
| } |
| window.addEventListener('resize', onResize); |
| onResize(); |
| |
| // Simple flight controls |
| let pressedKeys = new Array(256); |
| let selectStarted = false; |
| let selectPending = false; |
| let lookYaw = 0; |
| let lookPitch = 0; |
| let lookPos = [0, 0, 0]; |
| const lookSpeed = 0.0025; |
| const moveSpeed = 0.0025; |
| window.addEventListener('keydown', (ev) => pressedKeys[ev.keyCode] = true); |
| window.addEventListener('keyup', (ev) => pressedKeys[ev.keyCode] = false); |
| window.addEventListener('mousemove', (ev) => { |
| // Only rotate when the left button is pressed |
| if (ev.buttons && 1) { |
| lookYaw += ev.movementX * lookSpeed; |
| |
| lookPitch += ev.movementY * lookSpeed; |
| if (lookPitch < -Math.PI*0.5) |
| lookPitch = -Math.PI*0.5; |
| if (lookPitch > Math.PI*0.5) |
| lookPitch = Math.PI*0.5; |
| } |
| }); |
| |
| function updateView(delta) { |
| if (pressedKeys[' '.charCodeAt(0)]) { |
| selectStarted = true; |
| } else if (selectStarted) { |
| selectStarted = false; |
| selectPending = true; |
| } |
| |
| let moveDir = [0, 0, 0]; |
| |
| if(pressedKeys['W'.charCodeAt(0)]) { |
| moveDir[2] += 1; |
| } |
| if(pressedKeys['S'.charCodeAt(0)]) { |
| moveDir[2] -= 1; |
| } |
| if(pressedKeys['A'.charCodeAt(0)]) { |
| moveDir[0] += 1; |
| } |
| if(pressedKeys['D'.charCodeAt(0)]) { |
| moveDir[0] -= 1; |
| } |
| |
| vec3.normalize(moveDir, moveDir); |
| vec3.scale(moveDir, moveDir, delta * moveSpeed); |
| |
| mat4.identity(viewMat); |
| mat4.rotateY(viewMat, viewMat, -lookYaw); |
| mat4.rotateX(viewMat, viewMat, -lookPitch); |
| |
| vec3.transformMat4(moveDir, moveDir, viewMat); |
| vec3.add(lookPos, lookPos, moveDir); |
| |
| mat4.identity(viewMat); |
| mat4.rotateX(viewMat, viewMat, lookPitch); |
| mat4.rotateY(viewMat, viewMat, lookYaw); |
| mat4.translate(viewMat, viewMat, lookPos); |
| }; |
| |
| let selectedNode = null; |
| |
| function checkRay(targetRay) { |
| if (selectedNode) { |
| //selectedNode.visible = true; |
| } |
| let hitResult = scene.hitTest(targetRay); |
| if (hitResult) { |
| selectedNode = hitResult.node; |
| //selectedNode.visible = false; |
| scene.inputRenderer.addCursor(hitResult.intersection); |
| } else { |
| selectedNode = null; |
| } |
| } |
| |
| let targetRayMatrix = mat4.create(); |
| function onGLFrame(t) { |
| window.requestAnimationFrame(onGLFrame); |
| |
| if (!scene) |
| return; |
| |
| let frameDelta = scene.startFrame(); |
| updateView(frameDelta); |
| |
| let cursorPos = vec3.fromValues(0, 0, -2.0); |
| mat4.invert(targetRayMatrix, viewMat); |
| vec3.transformMat4(cursorPos, cursorPos, targetRayMatrix); |
| |
| scene.inputRenderer.addCursor(cursorPos); |
| |
| let mat = mat4.create(); |
| mat4.identity(mat); |
| mat4.translate(mat, mat, [Math.sin(t / 1000), 0, Math.cos(t / 1000)]); |
| mat4.rotateY(mat, mat, t / 1000); |
| |
| for (let boxNode of boxNodes) { |
| boxNode.matrix = mat; |
| } |
| |
| checkRay(targetRayMatrix); |
| |
| if (selectPending) { |
| selectPending = false; |
| scene.handleSelectPointer(targetRayMatrix); |
| } |
| |
| gl.clear(gl.DEPTH_BUFFER_BIT); |
| |
| scene.draw(projectionMat, viewMat); |
| |
| scene.endFrame(); |
| } |
| window.requestAnimationFrame(onGLFrame); |
| |
| let sceneSelect = document.getElementById('scene-select'); |
| function onSceneSelected() { |
| let scene = new Scene(); |
| switch(sceneSelect.value) { |
| case 'void': |
| break; |
| case 'cube-sea': |
| scene.addNode(new CubeSeaNode()); |
| break; |
| default: |
| scene.addNode(new Gltf2Node({url: `../media/gltf/${sceneSelect.value}/${sceneSelect.value}.gltf`})); |
| break; |
| } |
| setScene(scene); |
| } |
| sceneSelect.addEventListener('change', onSceneSelected); |
| onSceneSelected(); |
| </script> |
| </body> |
| </html> |