xushiting
/
Metaverse


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
							<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>

        <!-- Babylon.js -->
    <!-- Babylon.js -->
    <script src="./libs/jquery-1.10.2.min.js"></script>
    <script src="./libs/dat.gui.min.js"></script>
    <script src="./libs/ammo.js"></script>
    <script src="./libs/cannon.js"></script>
    <script src="./libs/Oimo.js"></script>
    <script src="./libs/earcut.min.js"></script>
    <script src="./libs/recast.js"></script>

    <script src="./libs/babylon.js"></script>
    <script src="./libs/babylonjs.materials.min.js"></script>
    <script src="./libs/babylonjs.proceduralTextures.min.js"></script>
    <script src="./libs/babylonjs.postProcess.min.js"></script>
    <script src="./libs/babylonjs.loaders.js"></script>
    <script src="./libs/babylonjs.serializers.min.js"></script>
    <script src="./libs/babylon.gui.min.js"></script>
    <script src="./libs/babylon.inspector.bundle.js"></script>
    <script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>
        <script src="js/video.js"></script>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");

        var startRenderLoop = function (engine, canvas) {
            engine.runRenderLoop(function () {
                if (sceneToRender && sceneToRender.activeCamera) {
                    sceneToRender.render();
                }
            });
        }

        var engine = null;
        var scene = null;
        var sceneToRender = null;
        var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };
        var createScene = function () {
    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

    scene.debugLayer.show({embedMode: true})

    // This creates and positions a free camera (non-mesh)
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.7;

    // Our built-in 'ground' shape.
    var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);


BABYLON.Effect.ShadersStore['customVertexShader'] = `
precision highp float; 
attribute vec2 uv;
attribute vec3 position;

varying vec2 vUV;
 
uniform mat4 view;
uniform mat4 projection; 
uniform mat4 world;
uniform mat4 worldViewProjection;
void main()
{ 
    vUV = uv;
    gl_Position = projection * view * world * vec4(position , 1.0); 
}
`;


BABYLON.Effect.ShadersStore["customFragmentShader"]=`
    precision highp float;
 
varying vec2 vUV;
uniform sampler2D chrominanceYTexture;

void main()
{    
    vec2 uv = vUV;
    vec3 color = vec3(0,0,0);

    color = texture2D(chrominanceYTexture, uv).rgb;     

    gl_FragColor = vec4( color, 1.0); 
}


`;


    var width=512;
    var height=1024;
    window._videoRawYTexture = BABYLON.RawTexture.CreateLuminanceTexture(
          null,
          width,
          height,
          scene,
          true,
          true,
        )

    /*
    var selfShader = new BABYLON.ShaderMaterial(
      'customShader',
      scene,
      { 
        vertex: "custom",
        fragment: "custom",
      },
      {
        attributes: ['uv', 'position'],
        uniforms: ['view', 'projection', 'worldViewProjection', 'world'],
      },
    )
    
    selfShader.setTexture('chrominanceYTexture', _videoRawYTexture)
*/

    var selfShader = new BABYLON.StandardMaterial("xsttest",this.scene);
    selfShader.diffuseTexture = window._videoRawYTexture
    ground.material = selfShader
    return scene;
};


window.generateRandomArray = ()=>{
      var rnd=[];
        for(let i=0;i< 512*1024;i++)
        {
            rnd[i] = Math.floor(Math.random()*255);
        }
        return rnd;
}

window.updateTexture = (yuv)=>
{
        let Y = yuv.subarray(0, 512*1024);
        window._videoRawYTexture.update(Y)
        window._videoRawYTexture.updateSamplingMode(BABYLON.Texture.BILINEAR_SAMPLINGMODE)
        Y = undefined;
}

window.changeTexture = (data)=>{ 
        for(let i=0;i< 512*1024;i++)
        {
            data[i] = Math.floor(Math.random()*255);
        }
        return data;
}

window.data = new Uint8Array(window.generateRandomArray());
// start 
// window.setInterval( ()=>{ 
//     data = window.changeTexture(data);
//     window.updateTexture( data );
// }, 60);
                window.initFunction = async function() {
                    
                    
                    var asyncEngineCreation = async function() {
                        try {
                        return createDefaultEngine();
                        } catch(e) {
                        console.log("the available createEngine function failed. Creating the default engine instead");
                        return createDefaultEngine();
                        }
                    }

                    window.engine = await asyncEngineCreation();
        if (!engine) throw 'engine should not be null.';
        startRenderLoop(engine, canvas);
        window.scene = createScene();};
        initFunction().then(() => {sceneToRender = scene                    
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>