.

src/ActionsHandler.js

@@ -29,7 +29,7 @@ export default class ActionsHandler {
 
     async sendData(e) {
 
-        //console.log('发送数据：'+JSON.stringify(e))
+        console.log('发送数据：'+JSON.stringify(e))
 
         await this.beforeSend(e);
         const t = util.uuid();

src/XMaterialComponent.js

@@ -1,10 +1,12 @@
 import XVideoRawYUV from "./XVideoRawYUV"
 import Logger from "./Logger.js"
 
+const planeWidth  = 1728
+const planeHeight = 1080
 
 window.generateRandomArray = ()=>{
     var rnd=[];
-    for(let i=0;i< 1728*720;i++)
+    for(let i=0;i< planeWidth*planeHeight;i++)
     {
         rnd[i] = Math.floor(Math.random()*255);
     }
@@ -13,7 +15,7 @@ window.generateRandomArray = ()=>{
 
 window.updateTexture = (yuv)=>
 {
-    let Y = yuv.subarray(0, 1728*720);
+    let Y = yuv.subarray(0, planeWidth*planeHeight);
     window._videoRawYTexture.update(Y)
     window._videoRawYTexture.updateSamplingMode(BABYLON.Texture.BILINEAR_SAMPLINGMODE)
     Y = undefined;
@@ -66,7 +68,6 @@ export default class XMaterialComponent {
             // resolve(!0)
         }));
 
-        /*
         E(this, "_initPureVideoContent", focal_width_height=>{
             if(this._inputYUV420){
                 if(this._videoRawYUVTexArray.getVideoYUVTex(0) != null){
@@ -77,21 +78,20 @@ export default class XMaterialComponent {
                     })
                 }
             }
-            else{
-                this._videoElement = e.videoElement;
-                this._videoTexture || (this._videoTexture = new VideoTexture("InterVideoTexture",this._videoElement,this.scene,!0,!1));
-                BABYLON.Texture.WhenAllReady([this._videoTexture], ()=>{
-                    this._changePureVideoLowModelShaderCanvasSize({
-                        width: this._videoElement.height,
-                        height: this._videoElement.width,
-                        fov: e.fov
-                    })
-                });
-                this._lowModelShader.setTexture("texture_video", this._videoTexture);
-                this._lowModelShader.setFloat("isYUV", 0);
-            }
+            // else{
+            //     this._videoElement = e.videoElement;
+            //     this._videoTexture || (this._videoTexture = new VideoTexture("InterVideoTexture",this._videoElement,this.scene,!0,!1));
+            //     BABYLON.Texture.WhenAllReady([this._videoTexture], ()=>{
+            //         this._changePureVideoLowModelShaderCanvasSize({
+            //             width: this._videoElement.height,
+            //             height: this._videoElement.width,
+            //             fov: e.fov
+            //         })
+            //     });
+            //     this._lowModelShader.setTexture("texture_video", this._videoTexture);
+            //     this._lowModelShader.setFloat("isYUV", 0);
+            // }
         });
-        */
 
         E(this, "_changePureVideoLowModelShaderCanvasSize", e=>{
             var lowModelShader;
@@ -137,37 +137,56 @@ export default class XMaterialComponent {
                 //(a = this._videoRawYUVTexArray.getVideoYUVTex(videosResOriArrayIndex)) == null || a.updateSamplingMode(BABYLON.Texture.BILINEAR_SAMPLINGMODE)
 
                 if(window.testPlane != null){
-                    if(window.testPlane.material == null){
+                    // if(window.testPlane.material == null){
                         
-                        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); 
-                            }
-                        `;
+                        BABYLON.Effect.ShadersStore['customVertexShader'] = houseShader.vertex
+                        // `
+                        //     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"]= houseShader.fragment
+                        // `
+                        //     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;   
+
+                        //         // const mat4 YUV2RGB = mat4
+                        //         // (
+                        //         //     1.1643828125,   0,                1.59602734375,  -.87078515625,
+                        //         //     1.1643828125,   -.39176171875,    -.81296875,     .52959375,
+                        //         //     1.1643828125,   2.017234375,      0,              -1.081390625,
+                        //         //     0,              0,                0,              1
+                        //         // );
+                                
+                        //         // vec4 result = vec4( 
+                        //         //     texture2D( chrominanceYTexture, vec2( uv.x,   uv.y * 0.666666 + 0.333333 ) ).x,
+                        //         //     texture2D( chrominanceYTexture, vec2( uv.x * 0.5,        uv.y * 0.333333 ) ).x, 
+                        //         //     texture2D( chrominanceYTexture, vec2( 0.5 + uv.x * 0.5,  uv.y * 0.333333 ) ).x,
+                        //         //     1
+                        //         // ) * YUV2RGB;
+
+                        //         // color = clamp(result.rgb, 0.0, 1.0); 
+
+                        //         gl_FragColor = vec4( color, 1.0); 
+                        //     }
+                        // `;
                             
-                        
                         window.testPlane.material = new BABYLON.ShaderMaterial(
                             'customShader',
                             this.scene,
@@ -177,34 +196,40 @@ export default class XMaterialComponent {
                             },
                             {
                               attributes: ['uv', 'position'],
-                              uniforms: ['view', 'projection', 'worldViewProjection', 'world'],
+                              uniforms: houseShader.uniforms //['view', 'projection', 'worldViewProjection', 'world'],
                             },
                         )
                         
                         window._videoRawYTexture = BABYLON.RawTexture.CreateLuminanceTexture(
                             null,
-                            1728,
-                            720,
+                            planeWidth,
+                            planeHeight,
                             this.scene,
+                            false,
                             true,
-                            true,
-                          )
+                        )
 
-                        window.testPlane.material.setTexture('chrominanceYTexture', window._videoRawYTexture)
+                        // window.testPlane.material.setTexture('chrominanceYTexture', window._videoRawYTexture)
                         
-                       
+                        window.testPlane.material.setTexture('texture_video', window._videoRawYTexture)
+                        window.testPlane.material.setFloat('isYUV', 1)
+                        window.testPlane.material.setVector3('focal_width_height', new BABYLON.Vector3(772.022491, planeWidth, planeHeight / 1.5))
+
                         
                         // window.testPlane.material = new BABYLON.StandardMaterial("xsttest",this.scene);
                         // window.testPlane.material.diffuseTexture = window._videoRawYTexture
-                        
+
                         window.testPlane.material.backFaceCulling = false;//Allways show the front and the back of an element
-                        window.setInterval( ()=>{
-                            //window.updateTexture( new Uint8Array(window.generateRandomArray()) );
-                            window._videoRawYTexture.update(stream)
-                            window._videoRawYTexture.updateSamplingMode(BABYLON.Texture.BILINEAR_SAMPLINGMODE)
-                        }, 60);
+
+                        // window.updateTexture( new Uint8Array(window.generateRandomArray()) );
+                        window._videoRawYTexture.update(stream)
+                        window._videoRawYTexture.updateSamplingMode(BABYLON.Texture.BILINEAR_SAMPLINGMODE)
+
+                        // this.scene.meshes.forEach(mesh => {
+                        //     mesh.material != window.testPlane.material && (mesh.material = window.testPlane.material)
+                        // })
                     }
-                }
+                // }
             }
         }
         );
@@ -341,7 +366,7 @@ export default class XMaterialComponent {
     }
     _prepareRender(focal_width_height) {
         if(focal_width_height){
-            //this._initPureVideoContent(focal_width_height)
+            this._initPureVideoContent(focal_width_height)
             this._updatePureVideoShaderInput()
         }
     }
@@ -534,4 +559,92 @@ export default class XMaterialComponent {
                 f.intensity = 0
             }
     }
+}
+
+
+var houseShader = {
+    
+    attributes: ['uv', 'position'],
+
+    uniforms: ['view', 'projection', 'world', 
+        'isYUV', 'focal_width_height', 'texture_video'],
+
+    defines: ["#define SHADOWFULLFLOAT", "#define NUM_BONE_INFLUENCERS 0", "#define NUM_MORPH_INFLUENCERS 0"],
+
+    samplers: ['shadowSampler', 'texture_video'],
+
+    vertex: 
+    `
+
+        precision highp float;
+
+        varying vec3 ModelPos;
+        
+        attribute vec2 uv;
+        attribute vec3 position;
+        
+        uniform mat4 view;
+        uniform mat4 projection;
+        
+        uniform mat4 world;
+
+        void main()
+        {
+            ModelPos = vec3( view * world * vec4(position , 1.0));
+            gl_Position = projection * view * world * vec4(position , 1.0); 
+        }
+
+    `,
+
+    fragment: `
+
+        precision highp  float;
+
+        varying vec3 ModelPos;
+        
+        uniform float isYUV;  // false: 0, true: 1.0
+        uniform sampler2D texture_video;
+        
+        uniform vec3 focal_width_height;
+        
+        vec2 SampleTex(vec3 pt3d)
+        {
+            return focal_width_height.x / focal_width_height.yz * pt3d.xy / pt3d.z + 0.5;
+        }
+        
+        void main()
+        {
+            vec3 color = vec3(0,0,0);
+            float shadow = 1.0;
+            
+            vec2 uv =  SampleTex( normalize(ModelPos) );
+
+            if( isYUV < 0.5 )
+            {
+                color = texture2D(texture_video, uv).rgb;
+            }else{
+                const mat4 YUV2RGB = mat4
+                (
+                    1.1643828125, 0, 1.59602734375, -.87078515625,
+                    1.1643828125, -.39176171875, -.81296875, .52959375,
+                    1.1643828125, 2.017234375, 0, -1.081390625,
+                    0, 0, 0, 1
+                );    
+                
+                vec4 result = vec4( 
+                    texture2D( texture_video, vec2( uv.x,   uv.y * 0.666666 + 0.333333 ) ).x,
+                    texture2D( texture_video, vec2( uv.x * 0.5,        uv.y * 0.333333 ) ).x, 
+                    texture2D( texture_video, vec2( 0.5 + uv.x * 0.5,  uv.y * 0.333333 ) ).x,
+                    1
+                ) * YUV2RGB;  
+
+                color = clamp(result.rgb, 0.0, 1.0); 
+            }
+            if( uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0 )
+            {
+                color = vec3(0,0,0);
+            }
+            gl_FragColor = vec4(shadow * color * 1.0, 1.0); 
+        }
+    `
 }