Foundational Code : Virtually Immersed

<!DOCTYPE html>
<html lang="en">
   <head>
       <title>Virtually Immersed</title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
       <style>
           body {
           margin: 0px;
           }

            body {
               background-color: #ffffff;
               color: #0e2836; 
               font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-
           }

            a {
               color: #000000;
           }

            button {
           background-color:transparent;
           border: none;
           color: rgb(250, 244, 244);
           padding: 11px 32px;
           text-align: center;
           text-decoration: none;
           display:transparent;
           font-size: 14px;
           letter-spacing: 2px;
           margin: px 2px;  
           cursor: pointer;
           font: 11px 'Lucida Grande', sans-serif;
           
           }    

            #info {
               position: absolute;
               top: 0px;
               width: 100%;
               padding: 1opx;
               font: 11px 'Lucida Grande', sans-serif;
           }

            button:hover {
           background-color: rgb(0, 0, 0);
           color: rgb(0, 255, 255);
           }

            .buttonsgroup > div {
               display: inline-block;
               *display: inline; /* For IE7 */
               zoom: 1; /* Trigger hasLayout */
               width: 33%;
               text-align: center;
               
           }
           
           #container {

                width: 100%;
               bottom: 0px;
           }

        </style>
   </head>
   <body>

        <div id="info" class="buttonsgroup">
           <div><button id="openFullscreen">Expand</button></div>
           <div>Virtually Immersed</div>
           <div><button id="soundButton">Sound</button></div>
       </div>

        <div id="container"></div>

        <audio loop id="music" preload="auto" style="display: none">
           <source src="sound/RecordingVImPiano.mp3" type="audio/mpeg">
       </audio>

        <video id="video" loop muted crossOrigin="anonymous" playsinline style="display:none">
           <source src="textures/ellamovie5.mp4">
       </video>

        <script id="vs" type="x-shader/x-vertex">

            uniform sampler2D map;

            uniform float width;
           uniform float height;
           uniform float nearClipping, farClipping;

            uniform float pointSize;
           uniform float zOffset;

            varying vec2 vUv;

            const float XtoZ = 1.11146; // tan( 1.0144686 / 2.0 ) * 2.0;
           const float YtoZ = 0.83359; // tan( 0.7898090 / 2.0 ) * 2.0;

            void main() {

                vUv = vec2( position.x / width, position.y / height );

                vec4 color = texture2D( map, vUv );
               float depth = ( color.r + color.g + color.b ) / 3.0;

                // Projection code by @kcmic

                float z = ( 1.0 - depth ) * (farClipping - nearClipping) + nearClipping;

                vec4 pos = vec4(
                   ( position.x / width - 0.5 ) * z * XtoZ,
                   ( position.y / height - 0.5 ) * z * YtoZ,
                   - z + zOffset,
                   1.0);

                gl_PointSize = pointSize;
               gl_Position = projectionMatrix * modelViewMatrix * pos;

            }

        </script>

        <script id="fs" type="x-shader/x-fragment">

            uniform sampler2D map;

            varying vec2 vUv;

            void main() {

                vec4 color = texture2D( map, vUv );
               gl_FragColor = vec4( color.r, color.g, color.b, 0.2 );

            }

        </script>

        <script type="module">

            import * as THREE from './threelib/three.module.js';

            import { GUI } from './threelib/dat.gui.module.js';

            let scene, camera, renderer;
           let geometry, mesh, material;
           let mouse, center;
           let positionalAudio, listener, audioElement;

            init();
           animate();

            function init() {

                const container = document.createElement( 'div' );
               document.body.appendChild( container );

                const info = document.createElement( 'div' );
               info.id = 'info';
               document.body.appendChild( info );

                camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
               camera.position.set( 0, 0, 500 );

                scene = new THREE.Scene();
               center = new THREE.Vector3();
               center.z = - 1000;

                /* Get the documentElement (<html>) to display the page in fullscreen */
               var elem = document.documentElement;

                /* View in fullscreen */
               function openFullscreen() {
                   if (elem.requestFullscreen) {
                       elem.requestFullscreen();
                   } else if (elem.webkitRequestFullscreen) { /* Safari */
                       elem.webkitRequestFullscreen();
                   } else if (elem.msRequestFullscreen) { /* IE11 */
                       elem.msRequestFullscreen();
                   }
               }

                const startButton = document.getElementById( 'openFullscreen' );
               startButton.addEventListener( 'click', openFullscreen );

                const soundButton = document.getElementById( 'soundButton' );
               soundButton.addEventListener( 'click', initSound );

                function initSound() {

                    listener = new THREE.AudioListener();
                   camera.add( listener );

                    audioElement = document.getElementById( 'music' );
                   audioElement.play();
                   

                }

                const video = document.getElementById( 'video' );

                const texture = new THREE.VideoTexture( video );
               texture.minFilter = THREE.NearestFilter;

                const width = 640, height = 480;
               const nearClipping = 850, farClipping = 4000;

 

                geometry = new THREE.BufferGeometry();

                const vertices = new Float32Array( width * height * 3 );

                for ( let i = 0, j = 0, l = vertices.length; i < l; i += 3, j ++ ) {

                    vertices[ i ] = j % width;
                   vertices[ i + 1 ] = Math.floor( j / width );

                }

                geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );

                material = new THREE.ShaderMaterial( {

                    uniforms: {

                        "map": { value: texture },
                       "width": { value: width },
                       "height": { value: height },
                       "nearClipping": { value: nearClipping },
                       "farClipping": { value: farClipping },

                        "pointSize": { value: 2.5 },
                       "zOffset": { value: 1119 }

                    },
                   vertexShader: document.getElementById( 'vs' ).textContent,
                   fragmentShader: document.getElementById( 'fs' ).textContent,
                   blending: THREE.AdditiveBlending,
                   depthTest: false, depthWrite: false,
                   transparent: true

                } );

                mesh = new THREE.Points( geometry, material );
               scene.add( mesh );

                video.play();

                //

                renderer = new THREE.WebGLRenderer();
               renderer.setPixelRatio( window.devicePixelRatio );
               renderer.setSize( window.innerWidth, window.innerHeight );
               container.appendChild( renderer.domElement );

                mouse = new THREE.Vector3( 0, 0, 1 );

                document.addEventListener( 'mousemove', onDocumentMouseMove );

                //

                window.addEventListener( 'resize', onWindowResize );

            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
               camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function onDocumentMouseMove( event ) {

                mouse.x = ( event.clientX - window.innerWidth / 2 ) * 8;
               mouse.y = ( event.clientY - window.innerHeight / 2 ) * 8;

            }

            function animate() {

                requestAnimationFrame( animate );

                render();

            }

            function render() {

                camera.position.x += ( mouse.x - camera.position.x ) * 0.05;
               camera.position.y += ( - mouse.y - camera.position.y ) * 0.05;
               camera.lookAt( center );

                renderer.render( scene, camera );

            }

        </script>
   </body>
</html>