DRTVWR-534: Batch of modifications to 360 capture project after moving from internal repo to public one.

author: Callum Prentice <callum@lindenlab.com> 2021-08-20 08:28:48 -0700
committer: Callum Prentice <callum@lindenlab.com> 2021-08-20 08:28:48 -0700
commit: 0c89e67eb5bf2d82596d0c697831787cbbdf1e7f (patch)
tree: 070cc3da58f67f9935f66dbadae3c283af0ac401 /indra/newview/skins/default/html
parent: c40b8310b00f1d620a2f5a94f2514c8bf3531373 (diff)
2 files changed, 171 insertions, 0 deletions
diff --git a/indra/newview/skins/default/html/common/equirectangular/default.html b/indra/newview/skins/default/html/common/equirectangular/default.html
new file mode 100644
index 0000000000..227b306590
--- /dev/null
+++ b/indra/newview/skins/default/html/common/equirectangular/default.html
@@ -0,0 +1,22 @@
+<html>
+<head>
+<style>
+body {
+  background-color:#000;
+  background-image: linear-gradient(white 2px, transparent 2px),
+  linear-gradient(90deg, white 2px, transparent 2px),
+  linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
+  linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
+  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
+  background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
+}
+</style>
+</head>
+<body>
+<script>
+function start() {
+}
+document.addEventListener('DOMContentLoaded', start);
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/indra/newview/skins/default/html/common/equirectangular/eqr_gen.html b/indra/newview/skins/default/html/common/equirectangular/eqr_gen.html
new file mode 100644
index 0000000000..855c26c651
--- /dev/null
+++ b/indra/newview/skins/default/html/common/equirectangular/eqr_gen.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <style>
+        body {
+            background: #333;
+            padding: 0;
+            margin: 0;
+            overflow: hidden;
+        }
+        #error_message {
+            z-index: 2;
+            background-color: #aa3333;
+            overflow: hidden;
+            display:  none;
+            pointer-events:none;
+            font-family: monospace;
+            font-size: 3em;
+            color: white;
+            border-radius: 1em;
+            padding: 1em;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin-right: -50%;
+            transform: translate(-50%, -50%)
+        }
+        #quality_window {
+            z-index: 100;
+            position:  absolute;
+            left: 8px;
+            top: 8px;
+            width: auto;
+            border-radius: 16px;
+            height: auto;
+            font-size: 1.5em;
+            text-align: center;
+            font-family: monospace;
+            background-color: rgba(200,200,200,0.35);
+            color: #000;
+            padding-left: 16px;
+            padding-right: 16px;
+            padding-top: 8px;
+            padding-bottom: 8px;
+        }
+    </style>
+</head>
+<body>
+    <script src="js/three.min.js"></script>
+    <script src="js/OrbitControls.js"></script>
+    <script src="js/jpeg_encoder_basic.js" type="text/javascript"></script>
+    <script src="js/CubemapToEquirectangular.js"></script>
+    <script>
+        var controls, camera, scene, renderer, equiManaged;
+
+        function init(eqr_width, eqr_height, img_path, camera_fov, initial_heading, overlay_label) {
+
+            camera = new THREE.PerspectiveCamera(camera_fov, window.innerWidth / window.innerHeight, 0.1, 100);
+            camera.position.x = 0.01;
+
+            scene = new THREE.Scene();
+
+            renderer = new THREE.WebGLRenderer();
+            renderer.autoClear = false;
+            renderer.setPixelRatio(window.devicePixelRatio);
+            renderer.setSize(window.innerWidth, window.innerHeight);
+
+            var cubemap_img_js_url = img_path + '/cubemap_img.js';
+            var cubemap_image_js = document.createElement('script');
+            cubemap_image_js.setAttribute('type', 'text/javascript');
+            cubemap_image_js.setAttribute('src', cubemap_img_js_url);
+            document.getElementsByTagName('head')[0].appendChild(cubemap_image_js);
+            cubemap_image_js.onload = function () {
+                document.getElementById("error_message").style.display = 'none' 
+                scene.background = new THREE.CubeTextureLoader().load(cubemap_img_js);
+                equiManaged = new CubemapToEquirectangular(renderer, true, eqr_width, eqr_height);
+            };
+            cubemap_image_js.onerror = function () {
+                document.getElementById("error_message").style.display = 'inline-block' 
+            };
+
+            document.body.appendChild(renderer.domElement);
+            window.addEventListener('resize', onWindowResize, false);
+
+            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls.autoRotate = true;
+            controls.autoRotateSpeed = 0.2;
+            controls.enableZoom = false;
+            controls.enablePan = false;
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.15;
+            controls.rotateSpeed = -0.5;
+
+            // initial direction the camera faces
+            // We cannot edit camera rotation directly as the OrbitControls will
+            // immediately reset it so we need some math to tell the controls
+            // there to look at initially. Note there is also an offset of π/2 since
+            // the Viewer and three.js have slightly different coordinate systems 
+            var spherical_target = new THREE.Spherical(1, Math.PI / 2, initial_heading + Math.PI / 2)
+            var target = new THREE.Vector3().setFromSpherical(spherical_target) 
+            camera.position.set(target.x, target.y, target.z);
+            controls.update();
+            controls.saveState();
+
+            // update the text that gets passed in from the C++ app for
+            // the translucent overlay label that tells us what we are seeing
+            document.getElementById('quality_window').innerHTML = overlay_label;
+
+            animate();
+        }
+
+        window.addEventListener(
+            'mousedown',
+            function (event) {
+                controls.autoRotate = false;
+            },
+            false
+        );
+
+        window.addEventListener(
+            'dblclick',
+            function (event) {
+                controls.autoRotate = true;
+            },
+            false
+        );
+
+        function saveAsEqrImage(filename, xmp_details) {
+            equiManaged.update(camera, scene, filename, xmp_details);
+        }
+
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+
+        function animate() {
+            requestAnimationFrame(animate);
+            controls.update();
+            renderer.render(scene, camera);
+        }
+    </script>
+    <div id="error_message">UNABLE TO LOAD EQR IMAGE</div>
+    <div id="quality_window">Preview Quality</div>
+</body>
+</html>
+\ No newline at end of file
author	Callum Prentice <callum@lindenlab.com>	2021-08-20 08:28:48 -0700
committer	Callum Prentice <callum@lindenlab.com>	2021-08-20 08:28:48 -0700
commit	0c89e67eb5bf2d82596d0c697831787cbbdf1e7f (patch)
tree	070cc3da58f67f9935f66dbadae3c283af0ac401 /indra/newview/skins/default/html
parent	c40b8310b00f1d620a2f5a94f2514c8bf3531373 (diff)