diff options
Diffstat (limited to 'indra/newview/skins/default/html/common/equirectangular/eqr_gen.html')
| -rw-r--r-- | indra/newview/skins/default/html/common/equirectangular/eqr_gen.html | 150 |
1 files changed, 150 insertions, 0 deletions
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..2675d37727 --- /dev/null +++ b/indra/newview/skins/default/html/common/equirectangular/eqr_gen.html @@ -0,0 +1,150 @@ +<!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 { + user-select: none; + 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 |