diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..10198a9 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,15 @@ +# http://editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false + +[*.glsl] +indent_size = 4 diff --git a/app.js b/app.js index 0979d97..40be4cf 100644 --- a/app.js +++ b/app.js @@ -1,16 +1,16 @@ -const Express = require('express'); -const Morgan = require('morgan'); +const Express = require("express"); +const Morgan = require("morgan"); const PORT = 8001; const app = Express(); -app.use(Morgan('common')); +app.use(Morgan("common")); app.use(Express.urlencoded({ extended: true })); -app.use('/', Express.static(__dirname + '/htdocs')); -app.use('/src', Express.static(__dirname + '/src')); -app.use('/cesium', Express.static(__dirname + '/node_modules/cesium/Build/CesiumUnminified')); -app.get('/', (req, res) => { res.redirect('index.html'); }); +app.use("/", Express.static(__dirname + "/htdocs")); +app.use("/src", Express.static(__dirname + "/src")); +app.use("/cesium", Express.static(__dirname + "/node_modules/cesium/Build/CesiumUnminified")); +app.get("/", (req, res) => { res.redirect("index.html"); }); app.listen(PORT); diff --git a/htdocs/index.js b/htdocs/index.js index 0ae7a7f..91e9259 100644 --- a/htdocs/index.js +++ b/htdocs/index.js @@ -1,33 +1,33 @@ import {WebXRButton} from "WebXR-Button"; -import VAR from './var.js'; -window.CESIUM_BASE_URL = './lib/cesium/Build/CesiumUnminified'; +import VAR from "./var.js"; +window.CESIUM_BASE_URL = "./lib/cesium/Build/CesiumUnminified"; import * as Cesium from "CesiumJS"; -import CesiumVR from './src/CesiumVR.js' +import CesiumVR from "./src/CesiumVR.js" const LOFI_ENABLED = false; -const IMAGERY_URL = 'lib/cesium/Source/Assets/Textures/'; +const IMAGERY_URL = "lib/cesium/Source/Assets/Textures/"; // If needed, use the polyfill to provide support for mobile devices // and devices which only support WebVR. -import WebXRPolyfill from './lib/webxr-samples/third-party/webxr-polyfill/build/webxr-polyfill.module.js'; +import WebXRPolyfill from "./lib/webxr-samples/third-party/webxr-polyfill/build/webxr-polyfill.module.js"; window.__is_polyfill = false; window.__xr = navigator.xr; if (__xr == undefined) { - console.log('WebXR not detected. Reverting to WebXRPolyfill'); - __is_polyfill = true; - __xr = new WebXRPolyfill(); - if (!__xr) - console.error('WebXRPolyfill failed to initialize'); + console.log("WebXR not detected. Reverting to WebXRPolyfill"); + __is_polyfill = true; + __xr = new WebXRPolyfill(); + if (!__xr) + console.error("WebXRPolyfill failed to initialize"); } else { - if (__xr.constructor.toString().substr(0, 37).indexOf('native') > 0) { - console.log('Native WebXR running'); - } else { - console.log('WebXR Emulator Extension detected'); - __is_polyfill = true; - } + if (__xr.constructor.toString().substr(0, 37).indexOf("native") > 0) { + console.log("Native WebXR running"); + } else { + console.log("WebXR Emulator Extension detected"); + __is_polyfill = true; + } } const XR_IS_POLYFILL = __is_polyfill; delete window.__is_polyfill; const XR = __xr; delete window.__xr; @@ -44,170 +44,170 @@ let cesiumScene = null; let cesiumCamera = null; async function createImageryProvider() { - if (LOFI_ENABLED) { - return await Cesium.TileMapServiceImageryProvider.fromUrl(IMAGERY_URL + 'NaturalEarthII'); - } else { - return await Cesium.BingMapsImageryProvider.fromUrl( - 'https://dev.virtualearth.net', { - key: VAR.bingKey, - mapStyle : Cesium.BingMapsStyle.AERIAL, + if (LOFI_ENABLED) { + return await Cesium.TileMapServiceImageryProvider.fromUrl(IMAGERY_URL + "NaturalEarthII"); + } else { + return await Cesium.BingMapsImageryProvider.fromUrl( + "https://dev.virtualearth.net", { + key: VAR.bingKey, + mapStyle : Cesium.BingMapsStyle.AERIAL, } - ); - } + ); + } } async function createTerrainProvider() { - if (LOFI_ENABLED) { - return new Cesium.EllipsoidTerrainProvider(); - } else { - return await Cesium.createWorldTerrainAsync(); - } + if (LOFI_ENABLED) { + return new Cesium.EllipsoidTerrainProvider(); + } else { + return await Cesium.createWorldTerrainAsync(); + } } async function createScene(canvas) { - Cesium.Ion.defaultAccessToken = VAR.cesiumKey; - var scene = new Cesium.Scene( - { + Cesium.Ion.defaultAccessToken = VAR.cesiumKey; + var scene = new Cesium.Scene( + { canvas: canvas, contextOptions: { - // https://registry.khronos.org/webgl/specs/latest/1.0/index.html#WEBGLCONTEXTATTRIBUTES - webgl: { - alpha: false, // we are not compositing the canvas - stencil: true, // check - depth: true, // check - xrCompatible: true, - antialias: false, // false: perf boost, no resolve/copy step. We need this to bitblit directly into the device FB. need more investigation. - preserveDrawingBuffer: false, // true: buffer copying, and flush (very bad). false: buffer swapping, fast. - powerPreference: 'high-performance', // 'default': browser chooses (lately, goes to low-power), 'low-power', 'high-performance' - //desynchronized: false, // true: introduces artifacts, but lower latency. check - }, - requestWebgl2: true, // Cesium gracefully downgrades to WebGL1 if WebGL2 is not available. - allowTextureFilterAnisotropic: true, // false: performance improvement + // https://registry.khronos.org/webgl/specs/latest/1.0/index.html#WEBGLCONTEXTATTRIBUTES + webgl: { + alpha: false, // we are not compositing the canvas + stencil: true, // check + depth: true, // check + xrCompatible: true, + antialias: false, // false: perf boost, no resolve/copy step. We need this to bitblit directly into the device FB. need more investigation. + preserveDrawingBuffer: false, // true: buffer copying, and flush (very bad). false: buffer swapping, fast. + powerPreference: "high-performance", // "default": browser chooses (lately, goes to low-power), "low-power", "high-performance" + //desynchronized: false, // true: introduces artifacts, but lower latency. check + }, + requestWebgl2: true, // Cesium gracefully downgrades to WebGL1 if WebGL2 is not available. + allowTextureFilterAnisotropic: true, // false: performance improvement }, - creditContainer: document.createElement('div'), // Must set in order to use an off-screen canvas - creditViewport: document.createElement('div'), // Must set in order to use an off-screen canvas + creditContainer: document.createElement("div"), // Must set in order to use an off-screen canvas + creditViewport: document.createElement("div"), // Must set in order to use an off-screen canvas scene3DOnly: true, requestRenderMode: false, //maximumRenderTimeChange: Infinity, // Never render due to a timeout. Useful? //timeChangeEnabled: false, // where did I see this? Maybe docs for a recent version. - } - ); - - scene.useWebVR = true; - scene.webXRContext = {}; - //scene.focalLength = 5.0; - //scene.eyeSeparation = camera.frustum.near * 5.0 / 30.0; - - const fog = new Cesium.Fog(); - fog.density = 0.0003; - scene.fog = fog; - - var ellipsoid = Cesium.Ellipsoid.clone(Cesium.Ellipsoid.WGS84); - var globe = new Cesium.Globe(ellipsoid); - globe.imageryLayers.addImageryProvider(await createImageryProvider()); - globe.terrainProvider = await createTerrainProvider(); - scene.globe = globe; - - scene.skyAtmosphere = new Cesium.SkyAtmosphere(); - - var skyBoxBaseUrl = IMAGERY_URL + 'SkyBox/tycho2t3_80'; - scene.skyBox = new Cesium.SkyBox({ - positiveX: skyBoxBaseUrl + '_px.jpg', - negativeX: skyBoxBaseUrl + '_mx.jpg', - positiveY: skyBoxBaseUrl + '_py.jpg', - negativeY: skyBoxBaseUrl + '_my.jpg', - positiveZ: skyBoxBaseUrl + '_pz.jpg', - negativeZ: skyBoxBaseUrl + '_mz.jpg' - }); - - return scene; + } + ); + + scene.useWebVR = true; + scene.webXRContext = {}; + //scene.focalLength = 5.0; + //scene.eyeSeparation = camera.frustum.near * 5.0 / 30.0; + + const fog = new Cesium.Fog(); + fog.density = 0.0003; + scene.fog = fog; + + var ellipsoid = Cesium.Ellipsoid.clone(Cesium.Ellipsoid.WGS84); + var globe = new Cesium.Globe(ellipsoid); + globe.imageryLayers.addImageryProvider(await createImageryProvider()); + globe.terrainProvider = await createTerrainProvider(); + scene.globe = globe; + + scene.skyAtmosphere = new Cesium.SkyAtmosphere(); + + var skyBoxBaseUrl = IMAGERY_URL + "SkyBox/tycho2t3_80"; + scene.skyBox = new Cesium.SkyBox({ + positiveX: skyBoxBaseUrl + "_px.jpg", + negativeX: skyBoxBaseUrl + "_mx.jpg", + positiveY: skyBoxBaseUrl + "_py.jpg", + negativeY: skyBoxBaseUrl + "_my.jpg", + positiveZ: skyBoxBaseUrl + "_pz.jpg", + negativeZ: skyBoxBaseUrl + "_mz.jpg" + }); + + return scene; } // Checks to see if WebXR is available and, if so, queries a list of // XRDevices that are connected to the system. function initXR() { - // Adds a helper button to the page that indicates if any XRDevices are - // available and let's the user pick between them if there's multiple. - - xrButton = new WebXRButton({ - onRequestSession: onRequestSession, - onEndSession: onEndSession - }); - document.querySelector('#button-container').appendChild(xrButton.domElement); - - // Is WebXR available on this UA? - if (XR) { - // If the device allows creation of exclusive sessions set it as the - // target of the 'Enter XR' button. - XR.isSessionSupported('immersive-vr').then((supported) => { - console.log('immersive-vr supported'); + // Adds a helper button to the page that indicates if any XRDevices are + // available and let's the user pick between them if there's multiple. + + xrButton = new WebXRButton({ + onRequestSession: onRequestSession, + onEndSession: onEndSession + }); + document.querySelector("#button-container").appendChild(xrButton.domElement); + + // Is WebXR available on this UA? + if (XR) { + // If the device allows creation of exclusive sessions set it as the + // target of the "Enter XR" button. + XR.isSessionSupported("immersive-vr").then((supported) => { + console.log("immersive-vr supported"); xrButton.enabled = supported; - }); - } + }); + } } // Called when the user selects a device to present to. In response we // will request an exclusive session from that device. function onRequestSession() { - return XR.requestSession('immersive-vr').then(onSessionStarted); + return XR.requestSession("immersive-vr").then(onSessionStarted); } // Called when we've successfully acquired a XRSession. In response we // will set up the necessary session state and kick off the frame loop. function onSessionStarted(session) { - // This informs the 'Enter XR' button that the session has started and - // that it should display 'Exit XR' instead. - xrButton.setSession(session); - - // Listen for the sessions 'end' event so we can respond if the user - // or UA ends the session for any reason. - session.addEventListener('end', onSessionEnded); - - if (cesiumScene === null) { - let canvas; - if (XR_IS_POLYFILL) - canvas = document.createElement('canvas'); - else + // This informs the "Enter XR" button that the session has started and + // that it should display "Exit XR" instead. + xrButton.setSession(session); + + // Listen for the sessions "end" event so we can respond if the user + // or UA ends the session for any reason. + session.addEventListener("end", onSessionEnded); + + if (cesiumScene === null) { + let canvas; + if (XR_IS_POLYFILL) + canvas = document.createElement("canvas"); + else canvas = new OffscreenCanvas(320, 180); // Arbitrary initial resolution - createScene(canvas).then((scene) => { + createScene(canvas).then((scene) => { cesiumScene = scene; sessionStartedCont(session) - }); - } else - sessionStartedCont(session); + }); + } else + sessionStartedCont(session); } function sessionStartedCont(session) { - cVR = new CesiumVR(100, session); + cVR = new CesiumVR(100, session); - // Create a WebGL context to render with, initialized to be compatible - // with the XRDisplay we're presenting to. - gl = cesiumScene.context._gl; + // Create a WebGL context to render with, initialized to be compatible + // with the XRDisplay we're presenting to. + gl = cesiumScene.context._gl; - // Use the new WebGL context to create a XRWebGLLayer and set it as the - // sessions baseLayer. This allows any content rendered to the layer to - // be displayed on the XRDevice. - session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl)}); + // Use the new WebGL context to create a XRWebGLLayer and set it as the + // sessions baseLayer. This allows any content rendered to the layer to + // be displayed on the XRDevice. + session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl)}); - // Get a frame of reference, which is required for querying poses. In - // this case an 'local' frame of reference means that all poses will - // be relative to the location where the XRDevice was first detected. - session.requestReferenceSpace('local').then((refSpace) => { - xrRefSpace = refSpace; + // Get a frame of reference, which is required for querying poses. In + // this case an "local" frame of reference means that all poses will + // be relative to the location where the XRDevice was first detected. + session.requestReferenceSpace("local").then((refSpace) => { + xrRefSpace = refSpace; - cesiumScene.webXRContext.refSpace = refSpace; + cesiumScene.webXRContext.refSpace = refSpace; - // Inform the session that we're ready to begin drawing. - session.requestAnimationFrame(onXRFrameFirst); - }); + // Inform the session that we're ready to begin drawing. + session.requestAnimationFrame(onXRFrameFirst); + }); } -// Called when the user clicks the 'Exit XR' button. In response we end +// Called when the user clicks the "Exit XR" button. In response we end // the session. function onEndSession(session) { - cesiumScene = null; - session.end(); + cesiumScene = null; + session.end(); } // Called either when the user has explicitly ended the session (like in @@ -215,73 +215,73 @@ function onEndSession(session) { // At this point the session object is no longer usable and should be // discarded. function onSessionEnded(event) { - cesiumScene = null; - xrButton.setSession(null); + cesiumScene = null; + xrButton.setSession(null); } // On the first frame is the first time the geometry of the frame buffer is known. -// We stop here to set that geometry on our off-screen canvas and then tell +// We stop here to set that geometry on our off-screen canvas and then tell // Cesium to process a frame so it resizes accordingly. function onXRFrameFirst(t, frame) { - let session = frame.session; - let glLayer = session.renderState.baseLayer; - - cesiumScene.canvas.width = glLayer.framebufferWidth; - cesiumScene.canvas.height = glLayer.framebufferHeight; - - cesiumCamera = cesiumScene.camera; - cesiumCamera.setView({ - destination: Cesium.Cartesian3.fromDegrees(-111.645898, 40.390810, 3600), // Timp - // destination: Cesium.Cartesian3.fromDegrees(-103.457939, 43.878265, 1650), // Mt Rushmore - // destination: Cesium.Cartesian3.fromDegrees(123.042885, 10.425316, 500), // Mt Rushmore - orientation: { + let session = frame.session; + let glLayer = session.renderState.baseLayer; + + cesiumScene.canvas.width = glLayer.framebufferWidth; + cesiumScene.canvas.height = glLayer.framebufferHeight; + + cesiumCamera = cesiumScene.camera; + cesiumCamera.setView({ + destination: Cesium.Cartesian3.fromDegrees(-111.645898, 40.390810, 3600), // Timp + // destination: Cesium.Cartesian3.fromDegrees(-103.457939, 43.878265, 1650), // Mt Rushmore + // destination: Cesium.Cartesian3.fromDegrees(123.042885, 10.425316, 500), // Mt Rushmore + orientation: { heading: Cesium.Math.toRadians(175.0), pitch: Cesium.Math.toRadians(0.0), roll: 0.0 - } - }); + } + }); - cesiumScene.render(); + cesiumScene.render(); - session.requestAnimationFrame(onXRFrame); + session.requestAnimationFrame(onXRFrame); } // Called every time the XRSession requests that a new frame be drawn. function onXRFrame(t, frame) { - let session = frame.session; + let session = frame.session; - // Per-frame scene setup. Nothing WebXR specific here. - cesiumScene.webXRContext.frame = frame; - cesiumScene.initializeFrame(); + // Per-frame scene setup. Nothing WebXR specific here. + cesiumScene.webXRContext.frame = frame; + cesiumScene.initializeFrame(); - // Inform the session that we're ready for the next frame. - session.requestAnimationFrame(onXRFrame); + // Inform the session that we're ready for the next frame. + session.requestAnimationFrame(onXRFrame); - // Per-frame scene setup. Nothing WebXR specific here. - var new_position = null; - for (let source of session.inputSources) { - if (source.gamepad && source.handedness == 'right') { + // Per-frame scene setup. Nothing WebXR specific here. + var new_position = null; + for (let source of session.inputSources) { + if (source.gamepad && source.handedness == "right") { // let gamepad_pose = frame.getPose(source.gripSpace, xrRefSpace); var axes = source.gamepad.axes; new_position = Cesium.Cartesian3.fromRadians( - cesiumCamera.positionCartographic.longitude + (axes[2] * 0.0001)*-1, - cesiumCamera.positionCartographic.latitude + (axes[3] * 0.0001), - cesiumCamera.positionCartographic.height + cesiumCamera.positionCartographic.longitude + (axes[2] * 0.0001)*-1, + cesiumCamera.positionCartographic.latitude + (axes[3] * 0.0001), + cesiumCamera.positionCartographic.height ); - } - } + } + } - let pose = frame.getViewerPose(xrRefSpace); - if (pose) { - var camView = { orientation: { heading: 0, pitch: 0, roll: 0 } }; - if (new_position) + let pose = frame.getViewerPose(xrRefSpace); + if (pose) { + var camView = { orientation: { heading: 0, pitch: 0, roll: 0 } }; + if (new_position) camView.destination = new_position; - cesiumCamera.setView(camView); - cVR.applyVRRotation(cesiumCamera, pose); - cesiumScene.render(); - } else { - cesiumCamera.position = new_position; - } + cesiumCamera.setView(camView); + cVR.applyVRRotation(cesiumCamera, pose); + cesiumScene.render(); + } else { + cesiumCamera.position = new_position; + } } initXR(); diff --git a/src/CesiumVR.js b/src/CesiumVR.js index 16769a1..9281e03 100644 --- a/src/CesiumVR.js +++ b/src/CesiumVR.js @@ -11,13 +11,13 @@ var CesiumVR = (function() { // Given a hmd device and a eye, returns the aspect ratio for that eye function getAspectRatio(viewport) { // var rect = params.renderRect; - if (typeof viewport === 'undefined') { + if (typeof viewport === "undefined") { // Must be polyfill device. Revert to browser window ratio. viewport = window.screen; } return viewport.width / viewport.height; } - + // Calculates the required scaling and offsetting of a symmetrical fov given an asymmetrical fov. function fovToScaleAndOffset(fov) { var fovPort = { @@ -46,16 +46,16 @@ var CesiumVR = (function() { * * Provide a value to scale the camera distance for the eyes. This * increases/decreases the sense of scale in Cesium. - * + * * Use 1.0 for a realistic sense of scale and larger values (~10.0-100.0) for * a model/diorama feel. - * + * * @param {Number} scale A scalar for the Interpupillary Distance. * @param {Function} callback [description] * @param {[type]} errorHandler [description] */ var CesiumVR = function(scale, session, errorHandler) { - this.errorHandler = typeof errorHandler === 'undefined' ? defaultErrorHandler : errorHandler; + this.errorHandler = typeof errorHandler === "undefined" ? defaultErrorHandler : errorHandler; this.errorMsg = "A VR-enabled browser is required for Virtual Reality Mode. Please visit http://mozvr.com/downloads for more details."; @@ -63,7 +63,7 @@ var CesiumVR = (function() { this.hmdDevice = undefined; this.sensorDevice = undefined; - // Holds the heading offset to be applied to ensure forward is + // Holds the heading offset to be applied to ensure forward is this.headingOffsetMatrix = Cesium.Matrix3.clone(Cesium.Matrix3.IDENTITY, new Cesium.Matrix3()); this.previousDeviceRotation = Cesium.Quaternion.clone(Cesium.Quaternion.IDENTITY, new Cesium.Quaternion()); @@ -112,36 +112,36 @@ var CesiumVR = (function() { // // We now have our devices... let's calculate all the required setup information... // if (that.hmdDevice) { - // Holds information about the x-axis eye separation in the world. - - // var leftParams = that.hmdDevice.getEyeParameters('left'); - // var rightParams = that.hmdDevice.getEyeParameters('right'); - - // that.xEyeTranslation = { - // left : leftParams.eyeTranslation.x, - // right : rightParams.eyeTranslation.x - // }; - - // // Holds information about the recommended FOV for each eye for the detected device. - // that.fovs = { - // left : leftParams.recommendedFieldOfView, - // right : rightParams.recommendedFieldOfView - // }; - - // // Holds the aspect ratio information about each eye - // that.fovAspectRatio = { - // left : getAspectRatio(leftParams), - // right : getAspectRatio(rightParams) - // }; - - // // Holds the fov scaling and offset information for each eye. - // that.fovScaleAndOffset = { - // left : fovToScaleAndOffset(that.fovs.left), - // right : fovToScaleAndOffset(that.fovs.right) - // }; - // } - - // if (typeof callback !== 'undefined') { + // Holds information about the x-axis eye separation in the world. + + // var leftParams = that.hmdDevice.getEyeParameters("left"); + // var rightParams = that.hmdDevice.getEyeParameters("right"); + + // that.xEyeTranslation = { + // left : leftParams.eyeTranslation.x, + // right : rightParams.eyeTranslation.x + // }; + + // // Holds information about the recommended FOV for each eye for the detected device. + // that.fovs = { + // left : leftParams.recommendedFieldOfView, + // right : rightParams.recommendedFieldOfView + // }; + + // // Holds the aspect ratio information about each eye + // that.fovAspectRatio = { + // left : getAspectRatio(leftParams), + // right : getAspectRatio(rightParams) + // }; + + // // Holds the fov scaling and offset information for each eye. + // that.fovScaleAndOffset = { + // left : fovToScaleAndOffset(that.fovs.left), + // right : fovToScaleAndOffset(that.fovs.right) + // }; + // } + + // if (typeof callback !== "undefined") { // callback(); // } // } @@ -175,8 +175,8 @@ var CesiumVR = (function() { }; CesiumVR.prototype.deriveRecommendedParameters = function(pose) { - var leftView = getView(pose, 'left'); - var rightView = getView(pose, 'right'); + var leftView = getView(pose, "left"); + var rightView = getView(pose, "right"); var glView = this.session.renderState.baseLayer; var leftParams = glView.getViewport(leftView); @@ -191,14 +191,14 @@ var CesiumVR = (function() { let upDown = 106; let leftRight = 94; let fov = { - upDegrees: upDown / 2, - downDegrees: upDown / 2, + upDegrees: upDown / 2, + downDegrees: upDown / 2, leftDegrees: leftRight / 2, - rightDegrees: leftRight / 2, - zNear: 0.1, + rightDegrees: leftRight / 2, + zNear: 0.1, zFar: 10000 }; - + this.fovs = { left : fov, right : fov @@ -223,14 +223,19 @@ var CesiumVR = (function() { * @return {Cesium.Quaternion} */ CesiumVR.prototype.getRotation = function(pose) { - return toQuat(getView(pose, 'left').transform.orientation); + // return toQuat(getView(pose, "left").transform.orientation); + return toQuat(pose.transform.orientation); + }; + + CesiumVR.prototype.getRotationInv = function(pose) { + return toQuat(pose.transform.inverse.orientation); }; /** * Returns the position of the HMD as a quaternion. * * NOTE: Currently not used. - * + * * @return {Cesium.Quaternion} */ CesiumVR.prototype.getPosition = function() { @@ -244,9 +249,9 @@ var CesiumVR = (function() { * It will ensure all the appropriate FOV and aspect ratio settings are * applied depending on the current VR equipment discovered. * - * If the eye parameter is not either 'right' or 'left', it will simply clone + * If the eye parameter is not either "right" or "left", it will simply clone * the master camera into the slave camera. - * + * * @param {Cesium.Camera} master The reference camera * @param {Cesium.Camera} slave The camera to be modified * @param {String} eye The eye specifier @@ -267,7 +272,7 @@ var CesiumVR = (function() { slave.frustum.xOffset = 0.0; slave.frustum.yOffset = 0.0; - if (eye === 'right' || eye === 'left') { + if (eye === "right" || eye === "left") { // Get the correct eye translation. translation = this.xEyeTranslation[eye] * this.IPDScale; @@ -293,7 +298,7 @@ var CesiumVR = (function() { /** * Given a rotation matrix and a camera, it sets the cameras rotation to the rotation matrix. - * + * * @param {Cesium.Matrix3} rotation the rotation matrix * @param {Cesium.Camera} camera the camera to be rotated */ @@ -305,7 +310,7 @@ var CesiumVR = (function() { /** * Grab the camera orientation from component vectors into a 3x3 Matrix. - * + * * @param {Cesium.Camera} camera The target camera * @return {Cesium.Matrix3} The rotation matrix of the target camera */ @@ -321,11 +326,11 @@ var CesiumVR = (function() { * Given a camera and a rotation quaternion, apply the rotation to the camera. * * This assumes the incoming camera has no previous VR rotation applied. - * + * * @param {Cesium.Camera} camera The camera to rotate */ CesiumVR.prototype.applyVRRotation = function(camera, pose) { - var vrRotationMatrix = Cesium.Matrix3.fromQuaternion(Cesium.Quaternion.inverse(this.getRotation(pose), new Cesium.Quaternion())); + var vrRotationMatrix = Cesium.Matrix3.fromQuaternion(this.getRotationInv(pose)); // Translate camera back to origin var pos = camera.position; @@ -335,7 +340,7 @@ var CesiumVR = (function() { var cameraRotationMatrix = CesiumVR.getCameraRotationMatrix(camera); // Apply the heading offset to camera -// Cesium.Matrix3.multiply(this.headingOffsetMatrix, cameraRotationMatrix, cameraRotationMatrix); + // Cesium.Matrix3.multiply(this.headingOffsetMatrix, cameraRotationMatrix, cameraRotationMatrix); // Apply VR rotation to offset camera rotation matrix var newRotation = Cesium.Matrix3.multiply(vrRotationMatrix, cameraRotationMatrix, new Cesium.Matrix3()); @@ -350,7 +355,7 @@ var CesiumVR = (function() { /** * Orient the camera with the up vector away from the center of the globe, * i.e. set the up vector to the same direction as the position vector. - * + * * @param {Cesium.Camera} camera The camera to normalise. */ CesiumVR.prototype.levelCamera = function(camera) { @@ -383,7 +388,7 @@ var CesiumVR = (function() { /** * Given a container HTML element (e.g. div or canvas), this will go * fullscreen into VR mode. - * + * * @param {HTML element} container */ CesiumVR.prototype.goFullscreenVR = function(container) {