From 64144280d57d4555211186dce69d083102d519c2 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Sat, 10 Nov 2018 00:36:23 +0000
Subject: [PATCH] Camera mirroring working, need to add UI
---
src/assets/stylesheets/hub.scss | 8 +++++
src/components/camera-tool.js | 52 ++++++++++++++++++++++++++++++++-
src/components/in-world-hud.js | 2 +-
src/hub.html | 2 +-
4 files changed, 61 insertions(+), 3 deletions(-)
diff --git a/src/assets/stylesheets/hub.scss b/src/assets/stylesheets/hub.scss
index a562a8013..7595e4764 100644
--- a/src/assets/stylesheets/hub.scss
+++ b/src/assets/stylesheets/hub.scss
@@ -16,6 +16,14 @@ body.vr-mode {
}
}
+body.mirrored-camera {
+ a-scene {
+ .a-canvas {
+ width: 100% !important;
+ }
+ }
+}
+
.a-enter-vr, .a-orientation-modal {
display: none;
}
diff --git a/src/components/camera-tool.js b/src/components/camera-tool.js
index 9882eb88f..1849b3ab6 100644
--- a/src/components/camera-tool.js
+++ b/src/components/camera-tool.js
@@ -100,12 +100,55 @@ AFRAME.registerComponent("camera-tool", {
this.el.removeEventListener("stateadded", this.stateAdded);
},
+ remove() {
+ if (this.mirrorCamera) {
+ document.body.classList.remove("mirrored-camera");
+ }
+
+ this.el.sceneEl.renderer.render = this.directRenderFunc;
+ },
+
stateAdded(evt) {
if (evt.detail === "activated") {
this.takeSnapshotNextTick = true;
}
},
+ enableCameraMirror() {
+ if (this.mirrorCamera) return;
+ if (!this.el.sceneEl.renderer.vr.enabled) return;
+
+ this.mirrorCamera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 30000);
+ this.el.setObject3D("mirror-camera", this.mirrorCamera);
+ this.mirrorCamera.rotation.set(0, Math.PI, 0);
+
+ this.renderer = this.el.sceneEl.renderer;
+
+ // This overrides the render routine to use the mirrored camera
+ this.directRenderFunc = this.el.sceneEl.renderer.render;
+ const tempScale = new THREE.Vector3();
+ document.body.classList.add("mirrored-camera");
+
+ this.el.sceneEl.renderer.render = (scene, camera, renderTarget) => {
+ const sceneEl = this.el.sceneEl;
+
+ this.directRenderFunc.call(sceneEl.renderer, scene, camera, renderTarget);
+ if (this.playerHead) {
+ tempScale.copy(this.playerHead.scale);
+ this.playerHead.scale.set(1, 1, 1);
+ }
+ sceneEl.renderer.vr.enabled = false;
+ const tmpOnAfterRender = sceneEl.object3D.onAfterRender;
+ delete sceneEl.object3D.onAfterRender;
+ this.directRenderFunc.call(sceneEl.renderer, scene, this.mirrorCamera);
+ sceneEl.object3D.onAfterRender = tmpOnAfterRender;
+ sceneEl.renderer.vr.enabled = true;
+ if (this.playerHead) {
+ this.playerHead.scale.copy(tempScale);
+ }
+ };
+ },
+
tick() {
const grabber = this.el.components.grabbable.grabbers[0];
if (grabber && !!pathsMap[grabber.id]) {
@@ -137,7 +180,14 @@ AFRAME.registerComponent("camera-tool", {
const tmpOnAfterRender = sceneEl.object3D.onAfterRender;
delete sceneEl.object3D.onAfterRender;
renderer.vr.enabled = false;
- renderer.render(sceneEl.object3D, this.camera, this.renderTarget, true);
+
+ // Use the direct, non mirrored render function if available
+ if (this.directRenderFunc) {
+ this.directRenderFunc.call(renderer, sceneEl.object3D, this.camera, this.renderTarget, true);
+ } else {
+ renderer.render(sceneEl.object3D, this.camera, this.renderTarget, true);
+ }
+
renderer.vr.enabled = tmpVRFlag;
sceneEl.object3D.onAfterRender = tmpOnAfterRender;
if (this.playerHead) {
diff --git a/src/components/in-world-hud.js b/src/components/in-world-hud.js
index 293344113..955e8f47e 100644
--- a/src/components/in-world-hud.js
+++ b/src/components/in-world-hud.js
@@ -12,7 +12,7 @@ AFRAME.registerComponent("in-world-hud", {
this.mic = this.el.querySelector(".mic");
this.freeze = this.el.querySelector(".freeze");
this.pen = this.el.querySelector(".penhud");
- this.cameraBtn = this.el.querySelector(".cameraBtn");
+ this.cameraBtn = this.el.querySelector(".camera-btn");
this.background = this.el.querySelector(".bg");
const renderOrder = window.APP.RENDER_ORDER;
this.mic.object3DMap.mesh.renderOrder = renderOrder.HUD_ICONS;
diff --git a/src/hub.html b/src/hub.html
index 9344cbe2c..47dc4f31e 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -353,7 +353,7 @@
<a-image icon-button="tooltip: #hud-tooltip; tooltipText: Mute Mic; activeTooltipText: Unmute Mic; image: #mute-off; hoverImage: #mute-off-hover; activeImage: #mute-on; activeHoverImage: #mute-on-hover" scale="0.1 0.1 0.1" position="-0.17 0 0.001" class="ui hud mic" material="alphaTest:0.1;" hoverable></a-image>
<a-image icon-button="tooltip: #hud-tooltip; tooltipText: Pause; activeTooltipText: Resume; image: #freeze-off; hoverImage: #freeze-off-hover; activeImage: #freeze-on; activeHoverImage: #freeze-on-hover" scale="0.2 0.2 0.2" position="0 0 0.005" class="ui hud freeze" hoverable></a-image>
<a-image icon-button="tooltip: #hud-tooltip; tooltipText: Pen; activeTooltipText: Pen; image: #spawn-pen; hoverImage: #spawn-pen-hover; activeImage: #spawn-pen; activeHoverImage: #spawn-pen-hover" scale="0.1 0.1 0.1" position="0.17 0 0.001" class="ui hud penhud" material="alphaTest:0.1;" hoverable></a-image>
- <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Camera; activeTooltipText: Camera; image: #spawn-camera; hoverImage: #spawn-camera-hover; activeImage: #spawn-camera; activeHoverImage: #spawn-camera-hover" scale="0.1 0.1 0.1" position="0.28 0 0.001" class="ui hud cameraBtn" material="alphaTest:0.1;" hoverable></a-image>
+ <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Camera; activeTooltipText: Camera; image: #spawn-camera; hoverImage: #spawn-camera-hover; activeImage: #spawn-camera; activeHoverImage: #spawn-camera-hover" scale="0.1 0.1 0.1" position="0.28 0 0.001" class="ui hud camera-btn" material="alphaTest:0.1;" hoverable></a-image>
<a-rounded visible="false" id="hud-tooltip" height="0.08" width="0.3" color="#000000" position="-0.15 -0.2 0" rotation="-20 0 0" radius="0.025" opacity="0.35" class="hud bg">
<a-entity text="value: Mute Mic; align:center;" position="0.15 0.04 0.001" ></a-entity>
</a-rounded>
--
GitLab