From 5394f848163e23c9b832cb4baa5a996f572eefdb Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Sun, 2 Jun 2019 13:41:59 -0500 Subject: [PATCH 01/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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 abac06d0c6aa8993117af0be3c3cf962ea1cb2df Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Wed, 12 Jun 2019 19:40:05 -0500 Subject: [PATCH 29/35] add dom view toggle button in engine.jsx --- ui/src/components/Engine.jsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 036efb1..04877e3 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -22,6 +22,7 @@ class Engine extends React.Component { this.handleURLChange = this.handleURLChange.bind(this); this.state = { consoleOpen: false, + domView: false, flags: [], item: null, settings: null, @@ -219,6 +220,13 @@ class Engine extends React.Component { }); } + toggleDomView(e) { + this.setState({ + domView: !this.state.domView, + }); + console.log("domview = " + this.state.domView); + } + blur() { this.setState({ item: null, @@ -321,6 +329,10 @@ class Engine extends React.Component {
+
this.toggleDomView(e)}> + +
Dom View
+
this.toggleConsoleOpen(e)}>
Console
@@ -355,7 +367,7 @@ class Engine extends React.Component { _postViewportMessage(); }}>
- +
From 5b6f3cc2b8c70a4c06b29f55b85e6389fd0b9094 Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Wed, 12 Jun 2019 19:41:21 -0500 Subject: [PATCH 30/35] handle dom view toggle in dom.jsx --- ui/src/components/Dom.jsx | 132 +++++++++++++++++++++++++++++--------- 1 file changed, 101 insertions(+), 31 deletions(-) diff --git a/ui/src/components/Dom.jsx b/ui/src/components/Dom.jsx index ad1d815..23febad 100644 --- a/ui/src/components/Dom.jsx +++ b/ui/src/components/Dom.jsx @@ -65,6 +65,7 @@ class Dom extends React.Component { }; _decorateKeypaths(root); this.state = { + domView: this.props.domView, root, selectEl: null, epoch: 0, @@ -97,6 +98,20 @@ class Dom extends React.Component { }); } + componentDidUpdate(prevProps, prevState) { + if (this.state.domView !== prevState.domView) { + this.setState({ + domView: prevState.domView, + }); + } + } + + static getDerivedStateFromProps(nextProps, prevState) { + return { + domView: nextProps.domView, + }; + } + onClick(el) { if (this.state.selectEl !== el) { this.setState({ @@ -114,7 +129,7 @@ class Dom extends React.Component { render() { return (
- this.onClick(el)} /> + this.onClick(el)} /> {/*this.state.selectEl ? : null*/}
); @@ -127,6 +142,7 @@ class DomList extends React.Component { this.state = { hoverEl: null, + domView: this.props.domView, }; } @@ -144,10 +160,24 @@ class DomList extends React.Component { } } + componentDidUpdate(prevProps, prevState) { + if (this.state.domView !== prevState.domView) { + this.setState({ + domView: prevState.domView, + }); + } + } + + static getDerivedStateFromProps(nextProps, prevState) { + return { + domView: nextProps.domView, + }; + } + render() { return (
    - this.props.onClick(el)} onMouseEnter={el => this.onMouseEnter(el)} onMouseLeave={el => this.onMouseLeave(el)}/> + this.props.onClick(el)} onMouseEnter={el => this.onMouseEnter(el)} onMouseLeave={el => this.onMouseLeave(el)}/>
); } @@ -162,13 +192,19 @@ class DomItem extends React.Component { this.state = { open: true, dropdownOpen: false, + domView: this.props.domView, }; } componentDidMount() { this.bindDomEl(); } - componentDidUpdate() { + componentDidUpdate(prevProps, prevState) { + if (this.state.domView !== prevState.domView) { + this.setState({ + domView: prevState.domView, + }); + } this.bindDomEl(); } @@ -192,6 +228,12 @@ class DomItem extends React.Component { return classNames.join(' '); } + static getDerivedStateFromProps(nextProps, prevState) { + return { + domView: nextProps.domView, + }; + } + getStyle() { return { paddingLeft: `${this.props.level * 10}px`, @@ -243,41 +285,69 @@ class DomItem extends React.Component { render() { const {el, level} = this.props; - if (el.nodeType === Node.ELEMENT_NODE && el.tagName === 'IFRAME') { - return ( -
  • -
    this.props.onClick(el)} onMouseEnter={() => this.props.onMouseEnter(el)} onMouseLeave={() => this.props.onMouseLeave(el)} ref={this.domElRef} tabIndex={-1}> -
    this.toggleDropdownOpen(e)}>...
    -
    {_el3Text(el)}
    -
    -
    {this.state.dropdownOpen ? -
    -
    this.cloneTab()}>Clone
    -
    this.deleteTab()}>Delete
    + if (this.state.domView) { + if (el.nodeType === Node.ELEMENT_NODE) { + return ( +
  • +
    this.props.onClick(el)} onMouseEnter={() => this.props.onMouseEnter(el)} onMouseLeave={() => this.props.onMouseLeave(el)} ref={this.domElRef} tabIndex={-1}> +
    this.toggleOpen(e)}>⮞
    +
    {_el2Text(el)}
    +
    +
    + {el.childNodes.map((childNode, i) => this.props.onClick(el)} onMouseEnter={this.props.onMouseEnter} onMouseLeave={this.props.onMouseLeave} key={i}/>)} +
    +
    • + ); + } else if (el.nodeType === Node.TEXT_NODE) { + if (/\S/.test(el.value)) { // has non-whitespace + return ( +
  • this.props.onClick(el)} onMouseEnter={() => this.props.onMouseEnter(el)} onMouseLeave={() => this.props.onMouseLeave(el)} ref={this.domElRef} tabIndex={-1}> +
    "{el.value}"
    +
    • + ); + } else { + return null; + } + } else { + return null; + } + } else if (!this.state.domView) { + if (el.nodeType === Node.ELEMENT_NODE && el.tagName === 'IFRAME') { + return ( +
  • +
    this.props.onClick(el)} onMouseEnter={() => this.props.onMouseEnter(el)} onMouseLeave={() => this.props.onMouseLeave(el)} ref={this.domElRef} tabIndex={-1}> +
    this.toggleDropdownOpen(e)}>...
    +
    {_el3Text(el)}
    - : null}
    • - - ); - } else if (el.nodeType === Node.ELEMENT_NODE) { - return ( -
  • -
    - {el.childNodes.map((childNode, i) => this.props.onClick(el)} onMouseEnter={this.props.onMouseEnter} onMouseLeave={this.props.onMouseLeave} key={i}/>)} -
    -
    • - ); - } else if (el.nodeType === Node.TEXT_NODE) { - if (/\S/.test(el.value)) { // has non-whitespace +
    {this.state.dropdownOpen ? +
    +
    this.cloneTab()}>Clone
    +
    this.deleteTab()}>Delete
    +
    + : null}
    + + ); + } else if (el.nodeType === Node.ELEMENT_NODE) { return ( -
  • this.props.onClick(el)} onMouseEnter={() => this.props.onMouseEnter(el)} onMouseLeave={() => this.props.onMouseLeave(el)} ref={this.domElRef} tabIndex={-1}> -
    +
  • +
    + {el.childNodes.map((childNode, i) => this.props.onClick(el)} onMouseEnter={this.props.onMouseEnter} onMouseLeave={this.props.onMouseLeave} key={i}/>)} +
    • ); + } else if (el.nodeType === Node.TEXT_NODE) { + if (/\S/.test(el.value)) { // has non-whitespace + return ( +
  • this.props.onClick(el)} onMouseEnter={() => this.props.onMouseEnter(el)} onMouseLeave={() => this.props.onMouseLeave(el)} ref={this.domElRef} tabIndex={-1}> +
    +
    • + ); + } else { + return null; + } } else { return null; } - } else { - return null; } } } From 35c93bbae98b786177952246bfc76700a79852fe Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Wed, 12 Jun 2019 19:43:27 -0500 Subject: [PATCH 31/35] remove console.log in engine.jsx --- 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 04877e3..6f8aa76 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -224,7 +224,6 @@ class Engine extends React.Component { this.setState({ domView: !this.state.domView, }); - console.log("domview = " + this.state.domView); } blur() { From 238a8008f02913f388d36ff0b60054bf45d1022f Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Wed, 12 Jun 2019 23:41:10 -0500 Subject: [PATCH 32/35] add timeout and postviewportmessage for dom view toggle --- ui/src/components/Engine.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 6f8aa76..c10f66b 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -224,6 +224,10 @@ class Engine extends React.Component { this.setState({ domView: !this.state.domView, }); + setTimeout( + function() { + _postViewportMessage(); + }, 1); } blur() { From 9bd5da08f6dfffa101a79734818471660d93371c Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Thu, 13 Jun 2019 16:55:48 -0500 Subject: [PATCH 33/35] turn dom name to input type and change dropdown dots name --- ui/src/components/Dom.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/components/Dom.jsx b/ui/src/components/Dom.jsx index 23febad..1c0f0e5 100644 --- a/ui/src/components/Dom.jsx +++ b/ui/src/components/Dom.jsx @@ -291,7 +291,7 @@ class DomItem extends React.Component {
  • this.props.onClick(el)} onMouseEnter={() => this.props.onMouseEnter(el)} onMouseLeave={() => this.props.onMouseLeave(el)} ref={this.domElRef} tabIndex={-1}>
    this.toggleOpen(e)}>⮞
    -
    {_el2Text(el)}
    +
    {el.childNodes.map((childNode, i) => this.props.onClick(el)} onMouseEnter={this.props.onMouseEnter} onMouseLeave={this.props.onMouseLeave} key={i}/>)} @@ -316,7 +316,7 @@ class DomItem extends React.Component { return (
  • this.props.onClick(el)} onMouseEnter={() => this.props.onMouseEnter(el)} onMouseLeave={() => this.props.onMouseLeave(el)} ref={this.domElRef} tabIndex={-1}> -
    this.toggleDropdownOpen(e)}>...
    +
    this.toggleDropdownOpen(e)}>...
    {_el3Text(el)}
    {this.state.dropdownOpen ? From d43ec96637fcccfeb5b2e030781912ddb92f5604 Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Thu, 13 Jun 2019 16:56:36 -0500 Subject: [PATCH 34/35] differentiate dom view arrow and layer view dots and add input focus --- ui/src/css/dom.css | 40 ++++++++++++++++++++++++++++++++++------ 1 file changed, 34 insertions(+), 6 deletions(-) diff --git a/ui/src/css/dom.css b/ui/src/css/dom.css index 2aff51c..ccd37f0 100644 --- a/ui/src/css/dom.css +++ b/ui/src/css/dom.css @@ -22,7 +22,13 @@ cursor: pointer; user-select: none; } -.Dom > .dom-list .dom-item.dropdownOpen > .dom-item-label .dom-item-arrow { +.Dom > .dom-list .dom-item.open > .dom-item-label .dom-item-arrow { + color: #888; + padding-top: 5px; + padding-bottom: 5px; + transform: rotatez(90deg); +} +.Dom > .dom-list .dom-item.dropdownOpen > .dom-item-label .dom-item-dots { color: #888; padding-top: 5px; padding-bottom: 5px; @@ -38,23 +44,36 @@ display: flex; } .Dom > .dom-list .dom-item.hover > .dom-item-label, -.Dom > .dom-list .dom-item.hover > .dom-item-text +.Dom > .dom-list .dom-item.hover > .dom-item-text, +.Dom > .dom-list .dom-item.hover > .dom-item-label .dom-item-name, +.Dom > .dom-list .dom-item.hover > .dom-item-label .dom-item-name:focus { background-color: #333; } .Dom > .dom-list .dom-item.select > .dom-item-label, -.Dom > .dom-list .dom-item.select > .dom-item-text +.Dom > .dom-list .dom-item.select > .dom-item-text, +.Dom > .dom-list .dom-item.select > .dom-item-label .dom-item-name, +.Dom > .dom-list .dom-item.hover > .dom-item-label .dom-item-name:focus { background-color: #333; } -.Dom > .dom-list .dom-item.select > .dom-item-label .dom-item-arrow { +.Dom > .dom-list .dom-item > .dom-item-label .dom-item-arrow { + padding-top: 5px; + padding-bottom: 5px; + color: #888; + transform: none; +} +.Dom > .dom-list .dom-item.select > .dom-item-label .dom-item-dots { color: #888; } .Dom > .dom-list .dom-item.hover > .dom-item-label .dom-item-arrow { color: #888; } -.Dom > .dom-list .dom-item > .dom-item-label .dom-item-arrow { +.Dom > .dom-list .dom-item.hover > .dom-item-label .dom-item-dots { + color: #888; +} +.Dom > .dom-list .dom-item > .dom-item-label .dom-item-dots { color: #444; transform: rotatez(90deg); padding-top: 5px; @@ -65,8 +84,17 @@ padding-top: 5px; padding-left: 3px; white-space: nowrap; + border: none; + padding: 2px; + background-color: #232526; + color: white; +} +.Dom > .dom-list .dom-item > .dom-item-label .dom-item-name:focus { + border: 1px solid black; + -moz-border-radius: 2px; + border-radius: 2px; + background-color: #333; } - .Dom > .dom-list .dom-item > .dom-item-children { display: none; flex-direction: column; From 73cd57d17651c783a2890523397dbaaad1930101 Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Thu, 13 Jun 2019 16:57:05 -0500 Subject: [PATCH 35/35] add more time before calling postViewportMessage --- 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 c10f66b..f96d1d7 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -227,7 +227,7 @@ class Engine extends React.Component { setTimeout( function() { _postViewportMessage(); - }, 1); + }, 100); } blur() {