From 5394f848163e23c9b832cb4baa5a996f572eefdb Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Sun, 2 Jun 2019 13:41:59 -0500 Subject: [PATCH 01/58] make supported devices list more verbose --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 2367a71..1730dce 100644 --- a/README.md +++ b/README.md @@ -43,12 +43,15 @@ Studio uses the [Exokit Engine](https://github.com/exokitxr/exokit), which is wr :eyeglasses: **Exokit Engine currently targets the following platforms**: * OpenVR Desktop VR (Steam compatible) +* HTC Vive +* Valve Index * * Oculus Desktop (Oculus Rift, Oculus Rift S) * Oculus Mobile (Oculus Quest, Oculus Go, GearVR) * Magic Leap * iOS ARKit * * Android ARCore * * Google VR (Daydream / Cardboard / Mirage Solo) * +* Hololens / Hololens 2 * * any XR device, start a [pull request](https://github.com/exokitxr/exokit/compare) to the Exokit Engine with a native binding if it isn't listed here! * \* not supported yet From accabacd3068777dd7fa486b9c4b5ee2c7277def Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Mon, 3 Jun 2019 01:57:36 -0400 Subject: [PATCH 02/58] Update graffiti_ml example --- graffiti_ml.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/graffiti_ml.html b/graffiti_ml.html index f18989e..c59404f 100644 --- a/graffiti_ml.html +++ b/graffiti_ml.html @@ -331,7 +331,7 @@

graffiti_ml

scene.add(controllerMesh); }); - const cubeGeometry = new THREE.BoxBufferGeometry(0.02, 0.02, 0.001); + const cubeGeometry = new THREE.BoxBufferGeometry(0.05, 0.05, 0.05); const hitMeshMaterial = new THREE.MeshPhongMaterial({ color: 0x673ab7, }); From 0f4fe5516c222b45e006ddf834fceeae8b780ea5 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Mon, 3 Jun 2019 16:11:23 -0400 Subject: [PATCH 03/58] Add WebXR sample as a loadable example --- index.html | 5 +++++ ui/src/components/Engine.jsx | 4 ++++ 2 files changed, 9 insertions(+) diff --git a/index.html b/index.html index 9011030..a13187a 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,11 @@ let display, fakeXrDisplay, tabs = [], tabId = 0, xrmp, lastPresseds = [false, false], lastAxes = [[0.5, 0.5], [0.5, 0.5]], lastPadToucheds = [false, false], scrollFactors = [0, 0], scaleFactors = [1, 1], viewport = new THREE.Vector4(), menuOpen = false, orbitControls, transformControls; const links = [ + { + id: 'webXrSample', + name: 'WebXR Sample', + url: 'https://rawcdn.githack.com/exokitxr/webxr-samples/a8e2c94eba0ee5c9215f20d13057b6c25675d9b0/xr-presentation.html', + }, { id: 'kitchenSink', name: 'Kitchen sink', diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 57b3cf1..28bc381 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -284,6 +284,10 @@ class Engine extends React.Component {
+
this.addTemplate('webXrSample')}> + +
WebXR Sample
+
this.addTemplate('kitchenSink')}>
Kitchen sink
From e2ed0082284625b695869a8743141ffbce926ce9 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Sat, 8 Jun 2019 04:40:48 -0400 Subject: [PATCH 04/58] Add exobot.html example --- exobot.html | 149 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 exobot.html diff --git a/exobot.html b/exobot.html new file mode 100644 index 0000000..1930185 --- /dev/null +++ b/exobot.html @@ -0,0 +1,149 @@ + + + + + + + exobot + + + + + +

exobot

+ + + + + From e34437e2c3f410c6412040f69f05aa00bdd6ed32 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Sat, 8 Jun 2019 06:41:47 -0400 Subject: [PATCH 05/58] Default viewport vector to all zeroes --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index a13187a..53998a8 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - - - - \ No newline at end of file From aac3a0222ce3b47b28a07c9d634009561f5755c3 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Sun, 9 Jun 2019 15:40:31 -0400 Subject: [PATCH 10/58] Make engine render background green --- ui/src/css/engine.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/css/engine.css b/ui/src/css/engine.css index 2a065d1..e96efa8 100644 --- a/ui/src/css/engine.css +++ b/ui/src/css/engine.css @@ -202,5 +202,5 @@ } #Engine .engine-render { flex: 1; - background-color: #000; + background-color: #0F0; } From ee5a620aa523c1b115038cd75e0a3b3839d7d19f Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Sun, 9 Jun 2019 16:59:49 -0400 Subject: [PATCH 11/58] Refactor studio compose into shader/greenscreen-based --- index.html | 156 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 150 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 53998a8..ebd6030 100644 --- a/index.html +++ b/index.html @@ -886,6 +886,36 @@ // iframe +const composeVsh = `#version 300 es + in vec2 position; + in vec2 uv; + out vec2 vUv; + void main() { + gl_Position = vec4(position.xy, 0., 1.); + vUv = uv; + } +`; +const composeFsh = `#version 300 es + uniform vec4 viewport; + uniform sampler2D uiTex; + uniform sampler2D viewportTex; + in vec2 vUv; + out vec4 fragColor; + void main() { + vec4 uiSample = texture2D(uiTex, vec2(vUv.x, 1.0-vUv.y)); + if (vUv.x >= viewport.x && vUv.y >= viewport.y && vUv.x < (viewport.x + viewport.z) && vUv.y < (viewport.y + viewport.w)) { + if (uiSample.r == 0.0 && uiSample.g == 1.0 && uiSample.b == 0.0 && uiSample.a == 1.0) { + vec4 viewportSample = texture2D(viewportTex, vUv); + fragColor = viewportSample; + } else { + fragColor = uiSample; + } + } else { + fragColor = uiSample; + } + } +`; + const _pushDomUpdate = () => { if (uiIframe.contentWindow) { browser.requestDomExport(document.body.parentNode) @@ -899,16 +929,111 @@ }; const { canvas: composeCanvas, - ctx: composeContext, + gl: composeContext, iframe: uiIframe, } = (() => { const canvas = document.createElement('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; - const ctx = canvas.getContext('webgl', { + const gl = canvas.getContext('webgl', { desynchronized: true, }); - ctx.readFbo = ctx.createFramebuffer(); + + const vao = gl.createVertexArray(); + gl.bindVertexArray(vao); + + // vertex shader + const composeVertex = gl.createShader(gl.VERTEX_SHADER); + gl.shaderSource(composeVertex, composeVsh); + gl.compileShader(composeVertex); + let success = gl.getShaderParameter(composeVertex, gl.COMPILE_STATUS); + if (!success) { + console.log('compose vertex shader compilation failed:\n' + gl.getShaderInfoLog(composeVertex) + '\n' + gl.getShaderSource(composeVertex).split('\n').map((l, i) => `${i+1}: ${l}`).join('\n')); + // return; + }; + + // fragment shader + const composeFragment = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(composeFragment, composeFsh); + gl.compileShader(composeFragment); + success = gl.getShaderParameter(composeFragment, gl.COMPILE_STATUS); + if (!success) { + const infoLog = gl.getShaderInfoLog(composeFragment); + console.log('compose fragment shader compilation failed:\n' + gl.getShaderInfoLog(composeFragment) + '\n' + gl.getShaderSource(composeFragment).split('\n').map((l, i) => `${i+1}: ${l}`).join('\n')); + // return; + }; + + // shader program + gl.composeProgram = gl.createProgram(); + gl.attachShader(gl.composeProgram, composeVertex); + gl.attachShader(gl.composeProgram, composeFragment); + gl.linkProgram(gl.composeProgram); + success = gl.getProgramParameter(gl.composeProgram, gl.LINK_STATUS); + if (!success) { + const infoLog = gl.getProgramInfoLog(gl.composeProgram); + console.log('compose program linking failed:', infoLog); + // return; + } + + gl.positionLocation = gl.getAttribLocation(gl.composeProgram, "position"); + if (gl.positionLocation == -1) { + console.log('compose program failed to get attrib location for "position"'); + // return; + } + gl.uvLocation = gl.getAttribLocation(gl.composeProgram, "uv"); + if (gl.uvLocation === -1) { + console.log('compose program failed to get attrib location for "uv"'); + // return; + } + gl.viewportLocation = gl.getUniformLocation(gl.composeProgram, "viewport"); + if (gl.viewportLocation === -1) { + console.log('compose program failed to get attrib location for "viewport"'); + // return; + } + gl.uiTexLocation = gl.getUniformLocation(gl.composeProgram, "uiTex"); + if (gl.uiTexLocation === -1) { + console.log('compose program failed to get attrib location for "uiTex"'); + // return; + } + gl.viewportTexLocation = gl.getUniformLocation(gl.composeProgram, "viewportTex"); + if (gl.viewportTexLocation === -1) { + console.log('compose program failed to get attrib location for "viewportTex"'); + // return; + } + + // delete the shaders as they're linked into our program now and no longer necessary + gl.deleteShader(composeVertex); + gl.deleteShader(composeFragment); + + const positionBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); + const positions = Float32Array.from([ + -1.0, 1.0, + 1.0, 1.0, + -1.0, -1.0, + 1.0, -1.0, + ]); + gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); + gl.enableVertexAttribArray(gl.positionLocation); + gl.vertexAttribPointer(gl.positionLocation, 2, gl.FLOAT, false, 0, 0); + + const uvBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer); + const uvs = Float32Array.from([ + 0.0, 1.0, + 1.0, 1.0, + 0.0, 0.0, + 1.0, 0.0, + ]); + gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW); + gl.enableVertexAttribArray(gl.uvLocation); + gl.vertexAttribPointer(gl.uvLocation, 2, gl.FLOAT, false, 0, 0); + + const indexBuffer = gl.createBuffer(); + const indices = Uint16Array.from([0, 2, 1, 2, 3, 1]); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); + document.body.appendChild(canvas); const iframe = document.createElement('iframe'); @@ -1049,7 +1174,7 @@ return { canvas, - ctx, + gl, iframe, }; })(); @@ -3145,7 +3270,26 @@ lastTime = now; } function animateComposeContext(time, frame) { - { + const gl = composeContext; + + gl.bindFramebuffer(gl.FRAMEBUFFER, 0); + + gl.useProgram(gl.composeProgram); + + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, uiIframe.texture); + gl.uniform1i(gl.uiTexLocation, 0); + + gl.activeTexture(gl.TEXTURE1); + gl.bindTexture(gl.TEXTURE_2D, fakeXrDisplay.texture); + gl.uniform1i(gl.viewportTexLocation, 1); + + gl.uniform4f(gl.viewportLocation, viewport.x, viewport.y, viewport.z, viewport.w); + + // gl.viewport(0, 0, composeCanvas.width, composeCanvas.height); + gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); + + /* { composeContext.bindFramebuffer(composeContext.READ_FRAMEBUFFER, composeContext.readFbo); composeContext.framebufferTexture2D(composeContext.READ_FRAMEBUFFER, composeContext.COLOR_ATTACHMENT0, composeContext.TEXTURE_2D, uiIframe.texture, 0); @@ -3176,7 +3320,7 @@ composeContext.COLOR_BUFFER_BIT, composeContext.LINEAR ); - } + } */ } function animate(time, frame) { animateXrScene(time, frame); From c153ca10623675b723a910471333ff8b9466267c Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Sun, 9 Jun 2019 17:21:51 -0400 Subject: [PATCH 12/58] Major greenscreen viewport bugfixing --- index.html | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index ebd6030..b9a1322 100644 --- a/index.html +++ b/index.html @@ -903,9 +903,16 @@ out vec4 fragColor; void main() { vec4 uiSample = texture2D(uiTex, vec2(vUv.x, 1.0-vUv.y)); - if (vUv.x >= viewport.x && vUv.y >= viewport.y && vUv.x < (viewport.x + viewport.z) && vUv.y < (viewport.y + viewport.w)) { + vec4 viewportOffset = vec4(viewport.x, 1.0-viewport.y-viewport.w, viewport.x + viewport.z, 1.0-viewport.y); + if (vUv.x >= viewportOffset.x && vUv.y >= viewportOffset.y && vUv.x < viewportOffset.z && vUv.y < viewportOffset.w) { if (uiSample.r == 0.0 && uiSample.g == 1.0 && uiSample.b == 0.0 && uiSample.a == 1.0) { - vec4 viewportSample = texture2D(viewportTex, vUv); + vec4 viewportSample = texture2D( + viewportTex, + vec2( + (vUv.x - viewportOffset.x) / (viewportOffset.z - viewportOffset.x), + (vUv.y - viewportOffset.y) / (viewportOffset.w - viewportOffset.y) + ) + ); fragColor = viewportSample; } else { fragColor = uiSample; @@ -3286,7 +3293,7 @@ gl.uniform4f(gl.viewportLocation, viewport.x, viewport.y, viewport.z, viewport.w); - // gl.viewport(0, 0, composeCanvas.width, composeCanvas.height); + gl.viewport(0, 0, composeCanvas.width, composeCanvas.height); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); /* { From 82a542787b6a3f4e201cca43c1ab93fbeade870c Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Sun, 9 Jun 2019 17:26:30 -0400 Subject: [PATCH 13/58] Clean up dead code --- index.html | 33 --------------------------------- 1 file changed, 33 deletions(-) diff --git a/index.html b/index.html index b9a1322..1e16946 100644 --- a/index.html +++ b/index.html @@ -3295,39 +3295,6 @@ gl.viewport(0, 0, composeCanvas.width, composeCanvas.height); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); - - /* { - composeContext.bindFramebuffer(composeContext.READ_FRAMEBUFFER, composeContext.readFbo); - composeContext.framebufferTexture2D(composeContext.READ_FRAMEBUFFER, composeContext.COLOR_ATTACHMENT0, composeContext.TEXTURE_2D, uiIframe.texture, 0); - - composeContext.bindFramebuffer(composeContext.DRAW_FRAMEBUFFER, 0); - // glFramebufferTexture2D(GL_DRAW_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, composeContext.worldTex, 0); - - composeContext.blitFramebuffer( - 0, 0, - uiIframe.width, uiIframe.height, - 0, composeCanvas.height, - composeCanvas.width, 0, - composeContext.COLOR_BUFFER_BIT, - composeContext.LINEAR - ); - } - if (!menuOpen) { - composeContext.bindFramebuffer(composeContext.READ_FRAMEBUFFER, composeContext.readFbo); - composeContext.framebufferTexture2D(composeContext.READ_FRAMEBUFFER, composeContext.COLOR_ATTACHMENT0, composeContext.TEXTURE_2D, fakeXrDisplay.texture, 0); - - // composeContext.bindFramebuffer(composeContext.DRAW_FRAMEBUFFER, 0); - // glFramebufferTexture2D(GL_DRAW_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, composeContext.worldTex, 0); - - composeContext.blitFramebuffer( - 0, 0, - fakeXrDisplay.width, fakeXrDisplay.height, - viewport.x*composeCanvas.width, (1-viewport.y-viewport.w)*composeCanvas.height, - (viewport.x+viewport.z)*composeCanvas.width, (1-viewport.y)*composeCanvas.height, - composeContext.COLOR_BUFFER_BIT, - composeContext.LINEAR - ); - } */ } function animate(time, frame) { animateXrScene(time, frame); From d1d2484ce0d326612b5d8ca31d2c396970041ec3 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Sun, 9 Jun 2019 17:45:32 -0400 Subject: [PATCH 14/58] Bugfix settings background color css --- ui/src/css/engine.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/css/engine.css b/ui/src/css/engine.css index e96efa8..7b414a7 100644 --- a/ui/src/css/engine.css +++ b/ui/src/css/engine.css @@ -160,7 +160,7 @@ bottom: 0; left: 0; right: 0; - background-color: rgba(0, 0, 0, 0.5); + /* background-color: rgba(0, 0, 0, 0.5); */ } #Engine .settings > .settings-foreground { position: relative; From 7b2f2a11992f4fa13f098d4316d2bc4bbdb8d629 Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Sun, 9 Jun 2019 18:44:20 -0500 Subject: [PATCH 15/58] remove console resize --- ui/src/components/Engine.jsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 28bc381..99ce990 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -343,15 +343,7 @@ class Engine extends React.Component {
this.onEngineRenderClick()} /> - { - _postViewportMessage(); - }}> - - +
Date: Sun, 9 Jun 2019 18:45:10 -0500 Subject: [PATCH 16/58] set open console % and fixed y scoll and no overflow x --- ui/src/css/console.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ui/src/css/console.css b/ui/src/css/console.css index 1b13cd4..33eb3c5 100644 --- a/ui/src/css/console.css +++ b/ui/src/css/console.css @@ -5,10 +5,11 @@ font-family: monospace; font-size: 11px; white-space: pre-wrap; - overflow-y: auto; + overflow-x: none; + overflow-y: scroll; } .Console.open { - height: 100px; + height: 30%; } .Console .console-output { From fc5faff38419feb7940c80d073a22cbcc3ba6f16 Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Sun, 9 Jun 2019 19:54:35 -0500 Subject: [PATCH 17/58] align console to bottom by default: --- ui/src/css/console.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/src/css/console.css b/ui/src/css/console.css index 33eb3c5..bd049bc 100644 --- a/ui/src/css/console.css +++ b/ui/src/css/console.css @@ -7,6 +7,10 @@ white-space: pre-wrap; overflow-x: none; overflow-y: scroll; + display: flex; + align-items: flex-end; + flex-direction:column; + justify-content:space-between; } .Console.open { height: 30%; From 1b011a761d52325e93dd38a561e02188185a4d44 Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Sun, 9 Jun 2019 20:17:09 -0500 Subject: [PATCH 18/58] add console opening min height and make it fill 100% height --- ui/src/css/console.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/ui/src/css/console.css b/ui/src/css/console.css index bd049bc..ac1a362 100644 --- a/ui/src/css/console.css +++ b/ui/src/css/console.css @@ -1,6 +1,6 @@ .Console { position: relative; - height: 0px; + max-height: 0px; border-top: 2px solid #222; font-family: monospace; font-size: 11px; @@ -13,7 +13,9 @@ justify-content:space-between; } .Console.open { - height: 30%; + height: 100%; + max-height: 100%; + min-height: 150px; } .Console .console-output { From 05a40099f1d9375b44b1d61d88fd37ba6bdca4bd Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Sun, 9 Jun 2019 20:17:31 -0500 Subject: [PATCH 19/58] re-enable resizable console --- ui/src/components/Engine.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 99ce990..08139cb 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -343,7 +343,13 @@ class Engine extends React.Component {
this.onEngineRenderClick()} /> - + { + _postViewportMessage(); + }}> + +
Date: Sun, 9 Jun 2019 20:49:14 -0500 Subject: [PATCH 20/58] update resizable size on console open toggle --- ui/src/components/Engine.jsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 08139cb..7de39e0 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -217,6 +217,11 @@ class Engine extends React.Component { this.setState({ consoleOpen: !this.state.consoleOpen, }); + if(this.state.consoleOpen){ + this.resizable.updateSize({ height: 0, maxHeight: 0 }); + } else { + this.resizable.updateSize({ height: 150, minHeight: 150 }); + } } blur() { @@ -344,6 +349,7 @@ class Engine extends React.Component {
this.onEngineRenderClick()} /> { this.resizable = c; }} minWidth="200px" onResize={(e, direction, ref, d) => { _postViewportMessage(); From 7923601cd539a1754be4c62366f1c3e2039c1fae Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Sun, 9 Jun 2019 22:00:16 -0500 Subject: [PATCH 21/58] set resizable minheight with console toggle --- ui/src/components/Engine.jsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 7de39e0..f0b7303 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -28,6 +28,7 @@ class Engine extends React.Component { urlFocus: false, addTab: 'template', url: 'https://aframe.io/a-painter/', + minHeight: 0, }; } @@ -218,9 +219,15 @@ class Engine extends React.Component { consoleOpen: !this.state.consoleOpen, }); if(this.state.consoleOpen){ - this.resizable.updateSize({ height: 0, maxHeight: 0 }); + this.resizable.updateSize({ height: 0 }); + this.setState({ + minHeight: 0, + }); } else { - this.resizable.updateSize({ height: 150, minHeight: 150 }); + this.resizable.updateSize({ height: 150 }); + this.setState({ + minHeight: 150, + }); } } @@ -351,6 +358,7 @@ class Engine extends React.Component { { this.resizable = c; }} minWidth="200px" + minHeight={this.state.minHeight} onResize={(e, direction, ref, d) => { _postViewportMessage(); }}> From 8f33bc7796a828b4e6275cac1ec732cb59609cbd Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Sun, 9 Jun 2019 22:37:26 -0500 Subject: [PATCH 22/58] set minHeight in render --- ui/src/components/Engine.jsx | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index f0b7303..7a44a08 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -28,7 +28,6 @@ class Engine extends React.Component { urlFocus: false, addTab: 'template', url: 'https://aframe.io/a-painter/', - minHeight: 0, }; } @@ -218,17 +217,6 @@ class Engine extends React.Component { this.setState({ consoleOpen: !this.state.consoleOpen, }); - if(this.state.consoleOpen){ - this.resizable.updateSize({ height: 0 }); - this.setState({ - minHeight: 0, - }); - } else { - this.resizable.updateSize({ height: 150 }); - this.setState({ - minHeight: 150, - }); - } } blur() { @@ -358,7 +346,7 @@ class Engine extends React.Component { { this.resizable = c; }} minWidth="200px" - minHeight={this.state.minHeight} + minHeight={this.state.consoleOpen ? 150 : 0} onResize={(e, direction, ref, d) => { _postViewportMessage(); }}> From 731a76c9ee9cbe00c15ee9a3e52c0460d0e328b0 Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Sun, 9 Jun 2019 22:39:22 -0500 Subject: [PATCH 23/58] remove ref attribute in resizble --- ui/src/components/Engine.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 7a44a08..77c81f9 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -344,7 +344,6 @@ class Engine extends React.Component {
this.onEngineRenderClick()} /> { this.resizable = c; }} minWidth="200px" minHeight={this.state.consoleOpen ? 150 : 0} onResize={(e, direction, ref, d) => { From fa6ca594dfb75ef0b218e2c587de915d71d3020a Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Sun, 9 Jun 2019 22:42:38 -0500 Subject: [PATCH 24/58] remove kitchen sink example from dropdown --- ui/src/components/Engine.jsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 77c81f9..036efb1 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -288,10 +288,6 @@ class Engine extends React.Component {
WebXR Sample
-
this.addTemplate('kitchenSink')}> - -
Kitchen sink
-
this.addTemplate('exobot')}>
Exobot
From 2d1c9cfe4fd3a802475698f3848d2d9ef7ec0ac7 Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Sun, 9 Jun 2019 23:05:34 -0500 Subject: [PATCH 25/58] add absolute position and high z-index for iframe dropdown menu to overlay --- ui/src/css/dom.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui/src/css/dom.css b/ui/src/css/dom.css index 80284cd..36ad987 100644 --- a/ui/src/css/dom.css +++ b/ui/src/css/dom.css @@ -89,6 +89,8 @@ padding-left: 10px; display: table-cell; vertical-align: middle; + position: absolute; + z-index: 1000; } .Dom > .dom-detail > .dom-detail-name { font-family: monospace; From e46f9b19d9323d58964c5d90aafeecfc2beb5f83 Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Sun, 9 Jun 2019 23:46:02 -0500 Subject: [PATCH 26/58] change z-index to 1 --- ui/src/css/dom.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/css/dom.css b/ui/src/css/dom.css index 36ad987..2aff51c 100644 --- a/ui/src/css/dom.css +++ b/ui/src/css/dom.css @@ -90,7 +90,7 @@ display: table-cell; vertical-align: middle; position: absolute; - z-index: 1000; + z-index: 1; } .Dom > .dom-detail > .dom-detail-name { font-family: monospace; From 8be765b5611e79ac98a7fdc0c1cbad97e5ba840b Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Sun, 9 Jun 2019 23:54:43 -0500 Subject: [PATCH 27/58] fix sending mouse movements only when orbit controls present --- index.html | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/index.html b/index.html index 6868ea8..257717d 100644 --- a/index.html +++ b/index.html @@ -1347,10 +1347,7 @@ _removeTransformControls(); } } - - if (!orbitControls) { - uiIframe.sendMouseMove(e.clientX, e.clientY); - } + uiIframe.sendMouseMove(e.clientX, e.clientY); }, mouseup(e) { if (!orbitControls) { From 98ecf61682fdec6459d12c9659cb387755dff73f Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Mon, 10 Jun 2019 15:49:37 -0400 Subject: [PATCH 28/58] Rename Exokit Launcher -> Exokit Studio --- ui/public/index.html | 2 +- ui/public/manifest.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/public/index.html b/ui/public/index.html index cbaaddb..0defbd8 100644 --- a/ui/public/index.html +++ b/ui/public/index.html @@ -12,7 +12,7 @@ - Exokit Launcher + Exokit Studio diff --git a/ui/public/manifest.json b/ui/public/manifest.json index fddfd1d..bc4df82 100644 --- a/ui/public/manifest.json +++ b/ui/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "Exokit Launcher", - "name": "Exokit Launcher", + "short_name": "Exokit Studio", + "name": "Exokit Studio", "icons": [ { "src": "favicon.ico", From 687feea073b8eaf88549ad4ff6119db2cdbb64af Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Mon, 10 Jun 2019 22:42:02 -0400 Subject: [PATCH 29/58] Major externalization of recomposition --- index.html | 644 +++++++++++++++++++---------------------------------- 1 file changed, 226 insertions(+), 418 deletions(-) diff --git a/index.html b/index.html index 1e16946..4bf0cdb 100644 --- a/index.html +++ b/index.html @@ -886,43 +886,6 @@ // iframe -const composeVsh = `#version 300 es - in vec2 position; - in vec2 uv; - out vec2 vUv; - void main() { - gl_Position = vec4(position.xy, 0., 1.); - vUv = uv; - } -`; -const composeFsh = `#version 300 es - uniform vec4 viewport; - uniform sampler2D uiTex; - uniform sampler2D viewportTex; - in vec2 vUv; - out vec4 fragColor; - void main() { - vec4 uiSample = texture2D(uiTex, vec2(vUv.x, 1.0-vUv.y)); - vec4 viewportOffset = vec4(viewport.x, 1.0-viewport.y-viewport.w, viewport.x + viewport.z, 1.0-viewport.y); - if (vUv.x >= viewportOffset.x && vUv.y >= viewportOffset.y && vUv.x < viewportOffset.z && vUv.y < viewportOffset.w) { - if (uiSample.r == 0.0 && uiSample.g == 1.0 && uiSample.b == 0.0 && uiSample.a == 1.0) { - vec4 viewportSample = texture2D( - viewportTex, - vec2( - (vUv.x - viewportOffset.x) / (viewportOffset.z - viewportOffset.x), - (vUv.y - viewportOffset.y) / (viewportOffset.w - viewportOffset.y) - ) - ); - fragColor = viewportSample; - } else { - fragColor = uiSample; - } - } else { - fragColor = uiSample; - } - } -`; - const _pushDomUpdate = () => { if (uiIframe.contentWindow) { browser.requestDomExport(document.body.parentNode) @@ -934,257 +897,151 @@ }); } }; -const { - canvas: composeCanvas, - gl: composeContext, - iframe: uiIframe, -} = (() => { - const canvas = document.createElement('canvas'); - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - const gl = canvas.getContext('webgl', { - desynchronized: true, - }); - - const vao = gl.createVertexArray(); - gl.bindVertexArray(vao); - - // vertex shader - const composeVertex = gl.createShader(gl.VERTEX_SHADER); - gl.shaderSource(composeVertex, composeVsh); - gl.compileShader(composeVertex); - let success = gl.getShaderParameter(composeVertex, gl.COMPILE_STATUS); - if (!success) { - console.log('compose vertex shader compilation failed:\n' + gl.getShaderInfoLog(composeVertex) + '\n' + gl.getShaderSource(composeVertex).split('\n').map((l, i) => `${i+1}: ${l}`).join('\n')); - // return; - }; - - // fragment shader - const composeFragment = gl.createShader(gl.FRAGMENT_SHADER); - gl.shaderSource(composeFragment, composeFsh); - gl.compileShader(composeFragment); - success = gl.getShaderParameter(composeFragment, gl.COMPILE_STATUS); - if (!success) { - const infoLog = gl.getShaderInfoLog(composeFragment); - console.log('compose fragment shader compilation failed:\n' + gl.getShaderInfoLog(composeFragment) + '\n' + gl.getShaderSource(composeFragment).split('\n').map((l, i) => `${i+1}: ${l}`).join('\n')); - // return; - }; - - // shader program - gl.composeProgram = gl.createProgram(); - gl.attachShader(gl.composeProgram, composeVertex); - gl.attachShader(gl.composeProgram, composeFragment); - gl.linkProgram(gl.composeProgram); - success = gl.getProgramParameter(gl.composeProgram, gl.LINK_STATUS); - if (!success) { - const infoLog = gl.getProgramInfoLog(gl.composeProgram); - console.log('compose program linking failed:', infoLog); - // return; - } - - gl.positionLocation = gl.getAttribLocation(gl.composeProgram, "position"); - if (gl.positionLocation == -1) { - console.log('compose program failed to get attrib location for "position"'); - // return; - } - gl.uvLocation = gl.getAttribLocation(gl.composeProgram, "uv"); - if (gl.uvLocation === -1) { - console.log('compose program failed to get attrib location for "uv"'); - // return; - } - gl.viewportLocation = gl.getUniformLocation(gl.composeProgram, "viewport"); - if (gl.viewportLocation === -1) { - console.log('compose program failed to get attrib location for "viewport"'); - // return; - } - gl.uiTexLocation = gl.getUniformLocation(gl.composeProgram, "uiTex"); - if (gl.uiTexLocation === -1) { - console.log('compose program failed to get attrib location for "uiTex"'); - // return; - } - gl.viewportTexLocation = gl.getUniformLocation(gl.composeProgram, "viewportTex"); - if (gl.viewportTexLocation === -1) { - console.log('compose program failed to get attrib location for "viewportTex"'); - // return; - } - - // delete the shaders as they're linked into our program now and no longer necessary - gl.deleteShader(composeVertex); - gl.deleteShader(composeFragment); - - const positionBuffer = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); - const positions = Float32Array.from([ - -1.0, 1.0, - 1.0, 1.0, - -1.0, -1.0, - 1.0, -1.0, - ]); - gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); - gl.enableVertexAttribArray(gl.positionLocation); - gl.vertexAttribPointer(gl.positionLocation, 2, gl.FLOAT, false, 0, 0); - - const uvBuffer = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer); - const uvs = Float32Array.from([ - 0.0, 1.0, - 1.0, 1.0, - 0.0, 0.0, - 1.0, 0.0, - ]); - gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW); - gl.enableVertexAttribArray(gl.uvLocation); - gl.vertexAttribPointer(gl.uvLocation, 2, gl.FLOAT, false, 0, 0); - - const indexBuffer = gl.createBuffer(); - const indices = Uint16Array.from([0, 2, 1, 2, 3, 1]); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); - - document.body.appendChild(canvas); - const iframe = document.createElement('iframe'); - iframe.width = window.innerWidth; - iframe.height = window.innerHeight; - iframe.devicePixelRatio = window.devicePixelRatio; - iframe.d = 2; - iframe.src = 'ui/build/index.html'; - iframe.onload = () => { - iframe.contentWindow.onmessage = m => { - switch (m.data.method) { - case 'viewport': { - viewport.set(m.data.viewport[0], m.data.viewport[1], m.data.viewport[2], m.data.viewport[3]); - break; - } - case 'click': { - const {target} = m.data; - if (target === 'fakeXr') { - renderer.domElement.requestPointerLock(); - _bindEventTarget('xr'); - } else if (target === 'xr') { - console.log('xr click'); - } else if (target === 'transform') { - console.log('transform click'); - } - break; - } - case 'menu': { - menuOpen = m.data.open; - /* if (m.data.open) { - composeScene.remove(composeScreenQuad); // XXX can elide the render entirely - } else { - composeScene.add(composeScreenQuad); - } */ - break; +const uiIframe = document.createElement('iframe'); +uiIframe.width = window.innerWidth; +uiIframe.height = window.innerHeight; +uiIframe.devicePixelRatio = window.devicePixelRatio; +uiIframe.d = 2; +uiIframe.inline = false; +uiIframe.src = 'ui/build/index.html'; +uiIframe.onload = () => { + uiIframe.contentWindow.onmessage = m => { + switch (m.data.method) { + case 'viewport': { + const {viewport} = m.data; + const {devicePixelRatio} = window; + + const sceneCanvas = renderer.domElement; + // sceneCanvas.setPosition(position[0], position[1]); + // sceneCanvas.left = position[0]; + // sceneCanvas.top = position[1]; + // viewport.fromArray(vp); + sceneCanvas.setPosition(viewport[0], viewport[1]); + sceneCanvas.setSize(viewport[2], viewport[3]); + + break; + } + case 'click': { + const {target} = m.data; + if (target === 'fakeXr') { + renderer.domElement.requestPointerLock(); + _bindEventTarget('xr'); + } else if (target === 'xr') { + console.log('xr click'); + } else if (target === 'transform') { + console.log('transform click'); } - case 'open': { - const {url, d} = m.data; - const {position, quaternion, scale} = _getFrontOfCamera(); - _openUrl(url, position, quaternion, scale, d); + break; + } + case 'menu': { + menuOpen = m.data.open; + /* if (m.data.open) { + composeScene.remove(composeScreenQuad); // XXX can elide the render entirely + } else { + composeScene.add(composeScreenQuad); + } */ + break; + } + case 'open': { + const {url, d} = m.data; + const {position, quaternion, scale} = _getFrontOfCamera(); + _openUrl(url, position, quaternion, scale, d); - break; - } - case 'add': { - const {template} = m.data; - const url = links.find(link => link.id === template).url; - const {position, quaternion, scale} = _getFrontOfCamera(); - _openUrl(url, position, quaternion, scale, 3); + break; + } + case 'add': { + const {template} = m.data; + const url = links.find(link => link.id === template).url; + const {position, quaternion, scale} = _getFrontOfCamera(); + _openUrl(url, position, quaternion, scale, 3); - break; - } - case 'eval': { - let err, result; - try { - result = eval(m.data.jsString); - } catch(e) { - err = e; - } - if (!err) { - iframe.contentWindow.postMessage({ - method: 'terminal', - output: browser.inspect(result), - }); - } else { - iframe.contentWindow.postMessage({ - method: 'terminal', - output: err.stack, - }); - } - break; - } - case 'edit': { - browser.applyDomEdit(document.body.parentNode, m.data.keypath, m.data.edit) - .then(() => { - _pushDomUpdate(); - }) - .catch(err => { - console.warn(err.stack); - }); - break; - } - case 'setting': { - const {key, value} = m.data; - window.browser.setSetting(key, value); - break; - } - case 'fakeVrMetrics': { - const {width, height} = m.data; - _endFakeVrDisplay() - .then(() => _startFakeVrDisplay(width, height)) - .catch(err => { - console.warn(err.stack); - }); - break; + break; + } + case 'eval': { + let err, result; + try { + result = eval(m.data.jsString); + } catch(e) { + err = e; } - default: { - console.warn(`got unknown ui iframe message: ${m.data.method}`); - break; + if (!err) { + uiIframe.contentWindow.postMessage({ + method: 'terminal', + output: browser.inspect(result), + }); + } else { + uiIframe.contentWindow.postMessage({ + method: 'terminal', + output: err.stack, + }); } + break; } - /* switch (m.data.action){ - case 'launch': - launch(m.data.flags, m.data.url); - break; - case 'update': - update(); - break; - } */ - }; - - /* iframe.runJs(` - // document.body.style.background = '#000080'; - // console.log('run js log ' + typeof window.postMessage + ' ' + window.postMessage.toString()); + case 'edit': { + browser.applyDomEdit(document.body.parentNode, m.data.keypath, m.data.edit) + .then(() => { + _pushDomUpdate(); + }) + .catch(err => { + console.warn(err.stack); + }); + break; + } + case 'setting': { + const {key, value} = m.data; + window.browser.setSetting(key, value); + break; + } + case 'fakeVrMetrics': { + const {width, height} = m.data; + _endFakeVrDisplay() + .then(() => _startFakeVrDisplay(width, height)) + .catch(err => { + console.warn(err.stack); + }); + break; + } + default: { + console.warn(`got unknown ui iframe message: ${m.data.method}`); + break; + } + } + /* switch (m.data.action){ + case 'launch': + launch(m.data.flags, m.data.url); + break; + case 'update': + update(); + break; + } */ + }; - window.onmessage = m => { - console.log('child got message: ' + JSON.stringify(m.data)); - }; + /* uiIframe.runJs(` + // document.body.style.background = '#000080'; + // console.log('run js log ' + typeof window.postMessage + ' ' + window.postMessage.toString()); - window.postMessage({lol: 'zol'}); - `); */ + window.onmessage = m => { + console.log('child got message: ' + JSON.stringify(m.data)); + }; - _bindEventTarget('ui'); - window.addEventListener('resize', e => { - // renderer.setSize(window.innerWidth, window.innerHeight); + window.postMessage({lol: 'zol'}); + `); */ - composeCanvas.width = window.innerWidth; - composeCanvas.height = window.innerHeight; - uiIframe.width = window.innerWidth; - uiIframe.height = window.innerHeight; - }); + _bindEventTarget('ui'); + window.addEventListener('resize', e => { + // renderer.setSize(window.innerWidth, window.innerHeight); - _pushDomUpdate(); - }; - iframe.onconsole = (message, source, line) => { - console.log(source + ':' + line + ': ' + message); - }; - document.body.appendChild(iframe); + uiIframe.width = window.innerWidth; + uiIframe.height = window.innerHeight; + }); - return { - canvas, - gl, - iframe, - }; -})(); + _pushDomUpdate(); +}; +uiIframe.onconsole = (message, source, line) => { + console.log(source + ':' + line + ': ' + message); +}; +document.body.appendChild(uiIframe); // events @@ -1217,136 +1074,105 @@ }; }; if (target === 'ui') { - _bindEvents({ - mousedown(e) { - if (!orbitControls) { - uiIframe.sendMouseDown(e.clientX, e.clientY, e.button); - } - }, - mousemove(e) { - const _addOrbitControls = () => { - const orbitCamera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); - orbitControls = new THREE.OrbitControls(orbitCamera); - orbitCamera.position.copy(fakeXrDisplay.position); - orbitCamera.quaternion.copy(fakeXrDisplay.quaternion); - scene.add(orbitCamera); - orbitCamera.updateMatrixWorld(); - orbitControls.target.copy(orbitCamera.position).add(new THREE.Vector3(0, 0, -1).applyQuaternion(orbitCamera.quaternion)); - orbitControls.screenSpacePanning = true; - orbitControls.update(); - }; - const _removeOrbitControls = () => { - scene.remove(orbitControls.object); - orbitControls.dispose(); - orbitControls = null; - }; - const _addTransformControls = (camera, iframe) => { - transformControls = new THREE.TransformControls(camera, document.body, viewport); - transformControls.iframe = iframe; - - transformControls.addEventListener('dragging-changed', e => { - orbitControls.enabled = !e.value; - }); - transformControls.addEventListener('change', e => { - iframe.position = mesh.position.toArray(); - iframe.orientation = mesh.quaternion.toArray(); - iframe.scale = mesh.scale.toArray(); - }); + const _addOrbitControls = () => { + const orbitCamera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); + orbitControls = new THREE.OrbitControls(orbitCamera); + orbitCamera.position.copy(fakeXrDisplay.position); + orbitCamera.quaternion.copy(fakeXrDisplay.quaternion); + scene.add(orbitCamera); + orbitCamera.updateMatrixWorld(); + orbitControls.target.copy(orbitCamera.position).add(new THREE.Vector3(0, 0, -1).applyQuaternion(orbitCamera.quaternion)); + orbitControls.screenSpacePanning = true; + orbitControls.update(); + }; + const _removeOrbitControls = () => { + scene.remove(orbitControls.object); + orbitControls.dispose(); + orbitControls = null; + }; + const _addTransformControls = (camera, iframe) => { + transformControls = new THREE.TransformControls(camera, document.body, viewport); + transformControls.iframe = iframe; - const mesh = new THREE.Object3D(); - mesh.position.fromArray(_parseVector(iframe.position)); - mesh.quaternion.fromArray(_parseVector(iframe.orientation)); - mesh.scale.fromArray(_parseVector(iframe.scale)); - scene.add(mesh); - mesh.updateMatrixWorld(); + transformControls.addEventListener('dragging-changed', e => { + orbitControls.enabled = !e.value; + }); + transformControls.addEventListener('change', e => { + iframe.position = mesh.position.toArray(); + iframe.orientation = mesh.quaternion.toArray(); + iframe.scale = mesh.scale.toArray(); + }); - transformControls.attach(mesh); - scene.add(transformControls); - }; - const _removeTransformControls = () => { - scene.remove(transformControls.object); - scene.remove(transformControls); - transformControls.dispose(); - transformControls = null; - }; + const mesh = new THREE.Object3D(); + mesh.position.fromArray(_parseVector(iframe.position)); + mesh.quaternion.fromArray(_parseVector(iframe.orientation)); + mesh.scale.fromArray(_parseVector(iframe.scale)); + scene.add(mesh); + mesh.updateMatrixWorld(); - const x = e.clientX/window.innerWidth; - const y = e.clientY/window.innerHeight; - const minX = viewport.x; - const minY = viewport.y; - const maxX = viewport.x + viewport.z; - const maxY = viewport.y + viewport.w; - const shouldOrbit = x >= minX && x < maxX && y >= minY && y < maxY && !menuOpen; - if (shouldOrbit && !orbitControls) { - _addOrbitControls(); - } else if (!shouldOrbit && orbitControls) { - _removeOrbitControls(); - } + transformControls.attach(mesh); + scene.add(transformControls); + }; + const _removeTransformControls = () => { + scene.remove(transformControls.object); + scene.remove(transformControls); + transformControls.dispose(); + transformControls = null; + }; - if (orbitControls) { - const localCamera = camera; - localCamera.matrixWorldInverse.fromArray(fakeXrDisplay.viewMatrix); - localCamera.matrixWorld.getInverse(localCamera.matrixWorldInverse); - localCamera.projectionMatrix.fromArray(fakeXrDisplay.projectionMatrix); - localCamera.projectionMatrixInverse.getInverse(localCamera.projectionMatrix); - - const rect = document.body.getBoundingClientRect(); - rect.left += viewport.x*rect.width; - rect.top += viewport.y*rect.height; - rect.width *= viewport.z; - rect.height *= viewport.w; - - localCamera.matrixWorld.decompose(localCamera.position, localCamera.quaternion, localCamera.scale); - localRaycaster.setFromCamera( - localVector2D.set( - (((e.clientX - rect.left) / rect.width) % 0.5 * 2) * 2 - 1, - (-(e.clientY - rect.top) / rect.height) * 2 + 1 - ), - localCamera - ); - const line = localLine.set( - localRaycaster.ray.origin, - localVector.copy(localRaycaster.ray.origin) - .add(localVector2.copy(localRaycaster.ray.direction).multiplyScalar(100)) - ); - /* cubeMesh.position.copy(localRaycaster.ray.origin) - .add(localVector2.copy(localRaycaster.ray.direction).multiplyScalar(5)); - cubeMesh.updateMatrixWorld(); */ - const distanceSpecs = layers.map(layer => { - if (layer.tagName === 'IFRAME') { - line.closestPointToPoint(localVector.fromArray(_parseVector(layer.position)), true, localVector2); - const distance = localVector.distanceTo(localVector2); - if (distance < 1) { - return { - iframe: layer, - distance, - }; - } else { - return null; - } + _bindEvents({ + mousedown(e) { + uiIframe.sendMouseDown(e.clientX, e.clientY, e.button); + }, + mousemove(e) { + const localCamera = camera; + localCamera.matrixWorldInverse.fromArray(fakeXrDisplay.viewMatrix); + localCamera.matrixWorld.getInverse(localCamera.matrixWorldInverse); + localCamera.projectionMatrix.fromArray(fakeXrDisplay.projectionMatrix); + localCamera.projectionMatrixInverse.getInverse(localCamera.projectionMatrix); + + localCamera.matrixWorld.decompose(localCamera.position, localCamera.quaternion, localCamera.scale); + localRaycaster.setFromCamera( + localVector2D.set( + ((e.clientX / renderer.domElement.width) % 0.5 * 2) * 2 - 1, + (-e.clientY / renderer.domElement.height) * 2 + 1 + ), + localCamera + ); + const line = localLine.set( + localRaycaster.ray.origin, + localVector.copy(localRaycaster.ray.origin) + .add(localVector2.copy(localRaycaster.ray.direction).multiplyScalar(100)) + ); + /* cubeMesh.position.copy(localRaycaster.ray.origin) + .add(localVector2.copy(localRaycaster.ray.direction).multiplyScalar(5)); + cubeMesh.updateMatrixWorld(); */ + const distanceSpecs = layers.map(layer => { + if (layer.tagName === 'IFRAME') { + line.closestPointToPoint(localVector.fromArray(_parseVector(layer.position)), true, localVector2); + const distance = localVector.distanceTo(localVector2); + if (distance < 1) { + return { + iframe: layer, + distance, + }; } else { return null; } - }).filter(spec => !!spec).sort((a, b) => a.distance - b.distance); - const closestIframe = distanceSpecs.length > 0 ? distanceSpecs[0].iframe : null; - const shouldTransform = (!!transformControls && transformControls.dragging) || !!closestIframe; - if (shouldTransform && (!transformControls || (transformControls.iframe !== closestIframe && !transformControls.dragging))) { - if (transformControls) { - _removeTransformControls(); - } - - _addTransformControls(localCamera, closestIframe); - } else if (!shouldTransform && transformControls) { - _removeTransformControls(); + } else { + return null; } - } else { + }).filter(spec => !!spec).sort((a, b) => a.distance - b.distance); + const closestIframe = distanceSpecs.length > 0 ? distanceSpecs[0].iframe : null; + const shouldTransform = (!!transformControls && transformControls.dragging) || !!closestIframe; + if (shouldTransform && (!transformControls || (transformControls.iframe !== closestIframe && !transformControls.dragging))) { if (transformControls) { _removeTransformControls(); } - } - if (!orbitControls) { - uiIframe.sendMouseMove(e.clientX, e.clientY); + _addTransformControls(localCamera, closestIframe); + } else if (!shouldTransform && transformControls) { + _removeTransformControls(); } }, mouseup(e) { @@ -1379,6 +1205,12 @@ } }, }); + + _addOrbitControls(); + unbindEvents = (unbindEvents => function() { + unbindEvents.apply(this, arguments); + _removeOrbitControls(); + })(); } else if (target === 'xr') { _bindEvents({ /* click(e) { @@ -2453,7 +2285,7 @@ // let renderTarget = null; const startTime = Date.now(); let lastTime = 0; -function animateXrScene(time, frame) { +function animate(time, frame) { /* const gl = renderer.getContext(); gl.clearColor(1, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT|gl.STENCIL_BUFFER_BIT); @@ -3276,30 +3108,6 @@ lastTime = now; } -function animateComposeContext(time, frame) { - const gl = composeContext; - - gl.bindFramebuffer(gl.FRAMEBUFFER, 0); - - gl.useProgram(gl.composeProgram); - - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, uiIframe.texture); - gl.uniform1i(gl.uiTexLocation, 0); - - gl.activeTexture(gl.TEXTURE1); - gl.bindTexture(gl.TEXTURE_2D, fakeXrDisplay.texture); - gl.uniform1i(gl.viewportTexLocation, 1); - - gl.uniform4f(gl.viewportLocation, viewport.x, viewport.y, viewport.z, viewport.w); - - gl.viewport(0, 0, composeCanvas.width, composeCanvas.height); - gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); -} -function animate(time, frame) { - animateXrScene(time, frame); - animateComposeContext(time, frame); -} // bootstrap From 5d0a3d9c2bf0be9b5f3ec4c944dd060e074bb1cb Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Mon, 10 Jun 2019 22:42:37 -0400 Subject: [PATCH 30/58] Refactor viewport emit to be pixel-based --- ui/src/components/Engine.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 28bc381..0306741 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -7,7 +7,9 @@ import '../css/engine.css'; const _postViewportMessage = () => { const engineRender = document.getElementById('engine-render'); const bcr = engineRender.getBoundingClientRect(); - const viewport = [bcr.x/window.innerWidth, bcr.y/window.innerHeight, bcr.width/window.innerWidth, bcr.height/window.innerHeight]; + // const position = [window.screenX + bcr.x, window.screenY + bcr.y]; + // const viewport = [bcr.x/window.innerWidth, bcr.y/window.innerHeight, bcr.width/window.innerWidth, bcr.height/window.innerHeight]; + const viewport = [window.screenX + bcr.x, window.screenY + bcr.y, bcr.width, bcr.height]; window.postMessage({ method: 'viewport', viewport, From 3ae92f86922fad00c16eb8a9dc9868b69fde8db2 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Mon, 10 Jun 2019 22:46:48 -0400 Subject: [PATCH 31/58] Make engine render transparent --- ui/src/css/engine.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/css/engine.css b/ui/src/css/engine.css index 7b414a7..5bf6080 100644 --- a/ui/src/css/engine.css +++ b/ui/src/css/engine.css @@ -202,5 +202,5 @@ } #Engine .engine-render { flex: 1; - background-color: #0F0; + background-color: rgba(0.0, 0.0, 0.0, 0.0); } From 03a0bf8304e1636a8498630fd0160d9998ccabed Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Mon, 10 Jun 2019 23:10:19 -0400 Subject: [PATCH 32/58] Dead code cleanup --- index.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/index.html b/index.html index 4bf0cdb..c2b53e1 100644 --- a/index.html +++ b/index.html @@ -913,10 +913,6 @@ const {devicePixelRatio} = window; const sceneCanvas = renderer.domElement; - // sceneCanvas.setPosition(position[0], position[1]); - // sceneCanvas.left = position[0]; - // sceneCanvas.top = position[1]; - // viewport.fromArray(vp); sceneCanvas.setPosition(viewport[0], viewport[1]); sceneCanvas.setSize(viewport[2], viewport[3]); From 94584dadde218087dd89ce2850c199c46e2f0304 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Mon, 10 Jun 2019 23:10:43 -0400 Subject: [PATCH 33/58] Emit EngineRender mouse events --- index.html | 50 ++++++++++++++++++++++++++++ ui/src/components/Engine.jsx | 63 ++++++++++++++++++++++++++++++++++-- 2 files changed, 111 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index c2b53e1..b9d982d 100644 --- a/index.html +++ b/index.html @@ -918,6 +918,56 @@ break; } + case 'viewportMouseDown': { + const {x, y, button} = m.data; + window.dispatchEvent(new MouseEvent('mousedown', { + clientX: x, + clientY: y, + button, + })); + + break; + } + case 'viewportMouseUp': { + const {x, y, button} = m.data; + window.dispatchEvent(new MouseEvent('mouseup', { + clientX: x, + clientY: y, + button, + })); + + break; + } + case 'viewportClick': { + const {x, y, button} = m.data; + window.dispatchEvent(new MouseEvent('click', { + clientX: x, + clientY: y, + button, + })); + + break; + } + case 'viewportMouseMove': { + const {x, y} = m.data; + window.dispatchEvent(new MouseEvent('mousemove', { + clientX: x, + clientY: y, + })); + + break; + } + case 'viewportMouseWheel': { + const {x, y, deltaX, deltaY} = m.data; + window.dispatchEvent(new MouseEvent('mousewheel', { + clientX: x, + clientY: y, + deltaX, + deltaY, + })); + + break; + } case 'click': { const {target} = m.data; if (target === 'fakeXr') { diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 0306741..ff0b90a 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -139,7 +139,7 @@ class Engine extends React.Component { e.stopPropagation(); } - onEngineRenderClick() { + onEngineRenderFocus() { this.blur(); } @@ -344,7 +344,7 @@ class Engine extends React.Component { this.openSettings(null)}/>
-
this.onEngineRenderClick()} /> + this.onEngineRenderFocus()}/> this.onClick(e)} onMouseDown={e => this.onMouseDown(e)} onMouseUp={e => this.onMouseUp(e)} onMouseMove={e => this.onMouseMove(e)} onMouseWheel={e => this.onMouseWheel(e)} /> + ); + } +} + class Settings extends React.Component { constructor(props) { super(props); From be16d8ad988336a5934b0d79fed7f653ce3c86d2 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Mon, 10 Jun 2019 23:11:07 -0400 Subject: [PATCH 34/58] Make engine render component css non-selectable --- ui/src/css/engine.css | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/src/css/engine.css b/ui/src/css/engine.css index 5bf6080..730aea0 100644 --- a/ui/src/css/engine.css +++ b/ui/src/css/engine.css @@ -203,4 +203,5 @@ #Engine .engine-render { flex: 1; background-color: rgba(0.0, 0.0, 0.0, 0.0); + user-select: none; } From 074d68f87108b3cc7af5247b261105e15e16e9b3 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Mon, 10 Jun 2019 23:27:43 -0400 Subject: [PATCH 35/58] Remove uiFrame send inputs injections --- index.html | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/index.html b/index.html index 0ee9b0a..d941981 100644 --- a/index.html +++ b/index.html @@ -1167,9 +1167,6 @@ }; _bindEvents({ - mousedown(e) { - uiIframe.sendMouseDown(e.clientX, e.clientY, e.button); - }, mousemove(e) { const localCamera = camera; localCamera.matrixWorldInverse.fromArray(fakeXrDisplay.viewMatrix); @@ -1221,33 +1218,16 @@ _removeTransformControls(); } }, - mouseup(e) { - if (!orbitControls) { - uiIframe.sendMouseUp(e.clientX, e.clientY, e.button); - } - }, - wheel(e) { - if (!orbitControls) { - uiIframe.sendMouseWheel(e.clientX, e.clientY, e.deltaX, -e.deltaY); - } - }, keydown(e) { if (e.keyCode === 37 && e.altKey) { // Alt-Left uiIframe.back(); } else if (e.keyCode === 39 && e.altKey) { // Alt-Right uiIframe.forward(); - } else { - uiIframe.sendKeyDown(e.keyCode,{shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,altKey:e.altKey}); } }, - keyup(e) { - uiIframe.sendKeyUp(e.keyCode,{shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,altKey:e.altKey}); - }, keypress(e) { if (e.keyCode === 114 && e.ctrlKey) { // Ctrl-R uiIframe.reload(); - } else { - uiIframe.sendKeyPress(e.keyCode,{shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,altKey:e.altKey}); } }, }); From cfee4bdbfb3a83b4580d5cf21ad7a796f4bbe16f Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Tue, 11 Jun 2019 00:08:53 -0400 Subject: [PATCH 36/58] Add move event listener --- ui/src/components/Engine.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index b228604..17c6f6d 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -36,6 +36,7 @@ class Engine extends React.Component { componentDidMount() { _postViewportMessage(); window.addEventListener('resize', _postViewportMessage); + window.addEventListener('move', _postViewportMessage); /* window.addEventListener('keydown', e => { console.log('iframe keydown ' + e.keyCode); From eeab379b5300db824dd4a174c06c11b007820ec5 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Thu, 13 Jun 2019 18:41:18 -0400 Subject: [PATCH 37/58] Add top level renderer dom element to document body --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index d941981..cf1238f 100644 --- a/index.html +++ b/index.html @@ -874,6 +874,7 @@ antialias: true, }); // renderer.setSize(window.innerWidth, window.innerHeight); +document.body.appendChild(renderer.domElement); const layers = [renderer.domElement]; From 1f99c426833d8aa41f293676de2e85d9849b7637 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Thu, 13 Jun 2019 18:48:01 -0400 Subject: [PATCH 38/58] Do not propagate engine window resize to ui frame resize --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index cf1238f..bcbc42d 100644 --- a/index.html +++ b/index.html @@ -1076,12 +1076,12 @@ `); */ _bindEventTarget('ui'); - window.addEventListener('resize', e => { + /* window.addEventListener('resize', e => { // renderer.setSize(window.innerWidth, window.innerHeight); uiIframe.width = window.innerWidth; uiIframe.height = window.innerHeight; - }); + }); */ _pushDomUpdate(); }; From 3b085b62282ae11e351b344b223f8c9bf474779e Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Thu, 13 Jun 2019 18:48:15 -0400 Subject: [PATCH 39/58] Bugfix getBoundingClientRect typos --- ui/src/components/Engine.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 17c6f6d..7d01824 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -370,7 +370,7 @@ class Engine extends React.Component { class EngineRender extends React.Component { onMouseDown(e) { const engineRender = document.getElementById('engine-render'); - const bcr = engineRender.getBoundingClinetRect(); + const bcr = engineRender.getBoundingClientRect(); window.postMessage({ method: 'viewportMouseDown', x: e.clientX - bcr.x, @@ -380,7 +380,7 @@ class EngineRender extends React.Component { } onMouseUp(e) { const engineRender = document.getElementById('engine-render'); - const bcr = engineRender.getBoundingClinetRect(); + const bcr = engineRender.getBoundingClientRect(); window.postMessage({ method: 'viewportMouseUp', x: e.clientX - bcr.x, @@ -390,7 +390,7 @@ class EngineRender extends React.Component { } onClick(e) { const engineRender = document.getElementById('engine-render'); - const bcr = engineRender.getBoundingClinetRect(); + const bcr = engineRender.getBoundingClientRect(); window.postMessage({ method: 'viewportMouseClick', x: e.clientX - bcr.x, @@ -400,7 +400,7 @@ class EngineRender extends React.Component { } onMouseMove(e) { const engineRender = document.getElementById('engine-render'); - const bcr = engineRender.getBoundingClinetRect(); + const bcr = engineRender.getBoundingClientRect(); window.postMessage({ method: 'viewportMouseMove', x: e.clientX - bcr.x, @@ -409,7 +409,7 @@ class EngineRender extends React.Component { } onMouseWheel(e) { const engineRender = document.getElementById('engine-render'); - const bcr = engineRender.getBoundingClinetRect(); + const bcr = engineRender.getBoundingClientRect(); window.postMessage({ method: 'viewportMouseWheel', x: e.clientX - bcr.x, From fe446af80f16cfdc072a4b2149f0f5c069ae6617 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Thu, 13 Jun 2019 18:50:17 -0400 Subject: [PATCH 40/58] Bugfix unbindEvents function binding --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index bcbc42d..25424a1 100644 --- a/index.html +++ b/index.html @@ -1237,7 +1237,7 @@ unbindEvents = (unbindEvents => function() { unbindEvents.apply(this, arguments); _removeOrbitControls(); - })(); + })(unbindEvents); } else if (target === 'xr') { for (let i = 0; i < 2; i++) { controllerMeshes[i].rayMesh.visible = true; From 8e1d86aee9fce52feff744d4b597004b308a82fe Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Thu, 13 Jun 2019 18:51:49 -0400 Subject: [PATCH 41/58] Bugfix viewportMouseClick -> viewportClick --- ui/src/components/Engine.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 7d01824..4c39be0 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -392,7 +392,7 @@ class EngineRender extends React.Component { const engineRender = document.getElementById('engine-render'); const bcr = engineRender.getBoundingClientRect(); window.postMessage({ - method: 'viewportMouseClick', + method: 'viewportClick', x: e.clientX - bcr.x, y: e.clientY - bcr.y, button: e.button, From 29fcf2f1f1f64a4f4d96c0eb420bdd58fa7f1a5c Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Thu, 13 Jun 2019 19:13:01 -0400 Subject: [PATCH 42/58] Move/resize event debugging --- index.html | 18 +++++++++++++++--- ui/src/components/Engine.jsx | 5 +++-- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 25424a1..fa9ab2f 100644 --- a/index.html +++ b/index.html @@ -911,11 +911,23 @@ switch (m.data.method) { case 'viewport': { const {viewport} = m.data; - const {devicePixelRatio} = window; - const sceneCanvas = renderer.domElement; + // console.log('got viewport', viewport); + + /* const sceneCanvas = renderer.domElement; sceneCanvas.setPosition(viewport[0], viewport[1]); - sceneCanvas.setSize(viewport[2], viewport[3]); + sceneCanvas.setSize(viewport[2], viewport[3]); */ + + break; + } + case 'resize': { + const {x, y, width, height} = m.data; + + // console.log('got resize', {x, y, width, height}); + + const sceneCanvas = renderer.domElement; + sceneCanvas.setPosition(x, y); + sceneCanvas.setSize(width, height); break; } diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 4c39be0..4cb1bcb 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -9,7 +9,8 @@ const _postViewportMessage = () => { const bcr = engineRender.getBoundingClientRect(); // const position = [window.screenX + bcr.x, window.screenY + bcr.y]; // const viewport = [bcr.x/window.innerWidth, bcr.y/window.innerHeight, bcr.width/window.innerWidth, bcr.height/window.innerHeight]; - const viewport = [window.screenX + bcr.x, window.screenY + bcr.y, bcr.width, bcr.height]; + // const viewport = [window.screenX + bcr.x, window.screenY + bcr.y, bcr.width, bcr.height]; + const viewport = [bcr.x, bcr.y, bcr.width, bcr.height]; window.postMessage({ method: 'viewport', viewport, @@ -36,7 +37,7 @@ class Engine extends React.Component { componentDidMount() { _postViewportMessage(); window.addEventListener('resize', _postViewportMessage); - window.addEventListener('move', _postViewportMessage); + // window.addEventListener('move', _postViewportMessage); /* window.addEventListener('keydown', e => { console.log('iframe keydown ' + e.keyCode); From b59257661cdbaf58fdddf638e5f13ba039e27fb9 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Thu, 13 Jun 2019 19:25:09 -0400 Subject: [PATCH 43/58] Use window messages for resize handlikng --- index.html | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index fa9ab2f..6c5e37b 100644 --- a/index.html +++ b/index.html @@ -907,12 +907,21 @@ uiIframe.inline = false; uiIframe.src = 'ui/build/index.html'; uiIframe.onload = () => { + uiIframe.contentWindow.addEventListener('resize', e => { + const {x, y, width, height} = e; + + // console.log('got resize', {x, y, width, height}); + + const sceneCanvas = renderer.domElement; + sceneCanvas.setPosition(x, y); + sceneCanvas.setSize(width, height); + }); uiIframe.contentWindow.onmessage = m => { switch (m.data.method) { case 'viewport': { const {viewport} = m.data; - // console.log('got viewport', viewport); + console.log('got viewport', viewport); /* const sceneCanvas = renderer.domElement; sceneCanvas.setPosition(viewport[0], viewport[1]); @@ -920,17 +929,6 @@ break; } - case 'resize': { - const {x, y, width, height} = m.data; - - // console.log('got resize', {x, y, width, height}); - - const sceneCanvas = renderer.domElement; - sceneCanvas.setPosition(x, y); - sceneCanvas.setSize(width, height); - - break; - } case 'viewportMouseDown': { const {x, y, button} = m.data; window.dispatchEvent(new MouseEvent('mousedown', { From 8e60bd1dc44c774c69a278020e987039eb92b219 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Fri, 14 Jun 2019 20:46:47 -0400 Subject: [PATCH 44/58] Make background transparent --- ui/src/css/App.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/src/css/App.css b/ui/src/css/App.css index b6d5bd9..b85ae26 100644 --- a/ui/src/css/App.css +++ b/ui/src/css/App.css @@ -1,7 +1,8 @@ body { margin: 0; - background: #232526; /* fallback for old browsers */ + /* background: #232526;*/ /* fallback for old browsers */ + background: transparent; } .nav-pills .nav-link.active{ background-color: #B600DB; From dc7aa0a9de47f425c500285a4ddc3c8b1e64be19 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Sat, 15 Jun 2019 02:51:22 -0400 Subject: [PATCH 45/58] Remove dead move event code --- ui/src/components/Engine.jsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 4cb1bcb..2f8e942 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -37,17 +37,6 @@ class Engine extends React.Component { componentDidMount() { _postViewportMessage(); window.addEventListener('resize', _postViewportMessage); - // window.addEventListener('move', _postViewportMessage); - - /* window.addEventListener('keydown', e => { - console.log('iframe keydown ' + e.keyCode); - }); - window.addEventListener('keyup', e => { - console.log('iframe keyup ' + e.keyCode); - }); - window.addEventListener('keypress', e => { - console.log('iframe keypress ' + e.keyCode); - }); */ } postMessage(action){ From 82241c9d5aec45d025faeba49a42546a135315a3 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Sat, 15 Jun 2019 02:51:49 -0400 Subject: [PATCH 46/58] Set renderer dom element focus on fake xr click --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 6c5e37b..73ef93d 100644 --- a/index.html +++ b/index.html @@ -983,6 +983,7 @@ const {target} = m.data; if (target === 'fakeXr') { renderer.domElement.requestPointerLock(); + renderer.domElement.setFocus(); _bindEventTarget('xr'); } else if (target === 'xr') { console.log('xr click'); From da92125fd469bc2645a004c00688a7d7ce368809 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Sat, 15 Jun 2019 02:52:01 -0400 Subject: [PATCH 47/58] Handle move and resize events --- index.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/index.html b/index.html index 73ef93d..f7f4720 100644 --- a/index.html +++ b/index.html @@ -1100,6 +1100,14 @@ console.log(source + ':' + line + ': ' + message); }; document.body.appendChild(uiIframe); +window.addEventListener('move', e => { + const {x, y} = e.detail; + uiIframe.setPosition(x, y); +}); +window.addEventListener('resize', e => { + uiIframe.width = window.innerWidth; + uiIframe.height = window.innerHeight; +}); // events From a638d230652bf537ab3e3bd8bd257cb093d24d27 Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Sat, 15 Jun 2019 02:52:11 -0400 Subject: [PATCH 48/58] Clean up viewport emits --- ui/src/components/Engine.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 2f8e942..8dcce86 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -8,9 +8,9 @@ const _postViewportMessage = () => { const engineRender = document.getElementById('engine-render'); const bcr = engineRender.getBoundingClientRect(); // const position = [window.screenX + bcr.x, window.screenY + bcr.y]; - // const viewport = [bcr.x/window.innerWidth, bcr.y/window.innerHeight, bcr.width/window.innerWidth, bcr.height/window.innerHeight]; + const viewport = [bcr.x/window.innerWidth, bcr.y/window.innerHeight, bcr.width/window.innerWidth, bcr.height/window.innerHeight]; // const viewport = [window.screenX + bcr.x, window.screenY + bcr.y, bcr.width, bcr.height]; - const viewport = [bcr.x, bcr.y, bcr.width, bcr.height]; + // const viewport = [bcr.x, bcr.y, bcr.width, bcr.height]; window.postMessage({ method: 'viewport', viewport, From 1d45135185787dcc5f0ecba1f5142ed07367b0eb Mon Sep 17 00:00:00 2001 From: Avaer Kazmer Date: Sat, 15 Jun 2019 03:31:17 -0400 Subject: [PATCH 49/58] Default to full viewport --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index f7f4720..43e346a 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@