ezuikit-js 7.6.5 → 7.6.7

package/demos/base-demo/ezuikit_static/v65/v1/js/playctrl/SuperRender_10.js

@@ -1,396 +1,486 @@
-"use strict";
- //顶点着色器
-//attribute修饰符用于声明由浏览器（javascript）传输给顶点着色器的变量值；
-// vertexPos即我们定义的顶点坐标；
-// gl_Position是一个内建的传出变量。
-var vertexYUVShader = [
-    'attribute vec4 vertexPos;',
-    'attribute vec2 texturePos;',
-    'varying vec2 textureCoord;',
-
-    'void main()',
-    '{',
-        'gl_Position = vertexPos;',
-        'textureCoord = texturePos;',
-    '}'
-    ].join('\n');
-    //像素着色器(yuv->rgb)
-var fragmentYUVShader = [
-    'precision highp float;',
-    'varying highp vec2 textureCoord;',
-    'uniform sampler2D ySampler;',
-    'uniform sampler2D uSampler;',
-    'uniform sampler2D vSampler;',
-    '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',
-    ');',
-  
-    'void main(void) {',
-        'highp float y = texture2D(ySampler,  textureCoord).r;',
-        'highp float u = texture2D(uSampler,  textureCoord).r;',
-        'highp float v = texture2D(vSampler,  textureCoord).r;',
-        'gl_FragColor = vec4(y, u, v, 1) * YUV2RGB;',
-    '}'
-    ].join('\n');
-
-(function (root, factory) {
-    root.SuperRender = factory();
-}(this, function () {
-    
-    function RenderManager(canvas) {
-
-        this.canvasElement = document.getElementById(canvas);
-
-        this.initContextGL();
-
-        if(this.contextGL) {
-            this.YUVProgram = this.initProgram(vertexYUVShader, fragmentYUVShader);
-            this.initBuffers();
-            this.initTextures();
-        }
-    };
-
-    /**
-     * 初始化WebGL上下文
-     */
-    RenderManager.prototype.initContextGL = function() {
-        
-        var canvas = this.canvasElement;
-
-        var gl = null;
-
-        try {
-            gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
-        } catch (e) {
-            gl = null;
-        }
-
-        if(!gl || typeof gl.getParameter !== "function") {
-            gl = null;
-        }
-
-        this.contextGL = gl;
-
-        console.log("WebGL1.0");
-    };
-
-    /**
-     * 初始化着色器程序
-     * @param vertexShaderScript    顶点着色器脚本
-     * @param fragmentShaderScript  片段着色器脚本
-     */
-    RenderManager.prototype.initProgram = function(vertexShaderScript, fragmentShaderScript) {
-        
-        var gl = this.contextGL;
-        
-        var vertexShader = gl.createShader(gl.VERTEX_SHADER); //创建定点着色器
-        gl.shaderSource(vertexShader, vertexShaderScript);
-        gl.compileShader(vertexShader);
-        if(!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
-            console.log('Vertex shader failed to compile: ' + gl.getShaderInfoLog(vertexShader));
-        }
-
-        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-        gl.shaderSource(fragmentShader, fragmentShaderScript);
-        gl.compileShader(fragmentShader);
-        if(!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
-            console.log('Fragment shader failed to compile: ' + gl.getShaderInfoLog(fragmentShader));
-        }
-
-        var program = gl.createProgram();
-        gl.attachShader(program, vertexShader);
-        gl.attachShader(program, fragmentShader);
-        gl.linkProgram(program);
-        if(!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-            console.log('Program failed to compile: ' + gl.getProgramInfoLog(program));
-        }
-        
-        gl.deleteShader(vertexShader);
-        gl.deleteShader(fragmentShader);
-
-        return program;
-    };
-
-    /**
-     * 初始化数据缓存
-     */
-    RenderManager.prototype.initBuffers = function() {
-        
-        var gl = this.contextGL;
-    
-        var vertexPosBuffer = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]), gl.STATIC_DRAW);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-
-        var texturePosBuffer = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 0, 0, 0, 1, 1, 0, 1]), gl.DYNAMIC_DRAW);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-
-        this.vertexPosBuffer  = vertexPosBuffer;
-        this.texturePosBuffer = texturePosBuffer;
-    };
-
-    /**
-     * 创建纹理
-     */
-    RenderManager.prototype.initTexture = function() {
-
-        var gl = this.contextGL;
-
-        var textureRef = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, textureRef);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-
-        return textureRef;
-    };
-
-    /**
-     * 初始化YUV纹理
-     */
-    RenderManager.prototype.initTextures = function() {
-        
-        var gl = this.contextGL;
-        
-        var program = this.YUVProgram;
-        gl.useProgram(program);
-        
-        var yTextureRef = this.initTexture();
-        var ySamplerRef = gl.getUniformLocation(program, 'ySampler');
-        gl.uniform1i(ySamplerRef, 0);
-        this.yTextureRef = yTextureRef;
-
-        var uTextureRef = this.initTexture();
-        var uSamplerRef = gl.getUniformLocation(program, 'uSampler');
-        gl.uniform1i(uSamplerRef, 1);
-        this.uTextureRef = uTextureRef;
-
-        var vTextureRef = this.initTexture();
-        var vSamplerRef = gl.getUniformLocation(program, 'vSampler');
-        gl.uniform1i(vSamplerRef, 2);
-        this.vTextureRef = vTextureRef;
-        
-        gl.useProgram(null);
-    };
-
-    /**
-     * 显示帧数据
-     * @param nWidth    宽度
-     * @param nHeight   高度
-     * @param nHeight   帧数据
-     */
-    RenderManager.prototype.SR_DisplayFrameData = function(nWidth, nHeight, pData,dWidth,dHeight) {
-
-        if(nWidth <= 0 || nHeight <= 0)
-        {
-            return;
-        }
-
-        var gl = this.contextGL;
-
-        if(null == pData)
-        {
-            gl.clearColor(0.0, 0.0, 0.0, 0.0);
-            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-            return;
-        }
-
-        var canvas = this.canvasElement;
-
-        this.nWindowWidth = canvas.width;
-        this.nWindowHeight = canvas.height;
-        
-        var nWindowWidth = this.nWindowWidth;
-        var nWindowHeight = this.nWindowHeight;
-
-        gl.clearColor(0.8, 0.8, 1.0, 1.0);
-        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-        gl.viewport(0, 0, nWindowWidth, nWindowHeight);
-
-        this.updateFrameData(nWidth, nHeight, pData,dWidth,dHeight);
-
-        var program = this.YUVProgram;
-        gl.useProgram(program);
-
-        var vertexPosBuffer = this.vertexPosBuffer;
-        gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
-        var vertexPosRef = gl.getAttribLocation(program, 'vertexPos');
-        gl.enableVertexAttribArray(vertexPosRef);
-        gl.vertexAttribPointer(vertexPosRef, 2, gl.FLOAT, false, 0, 0);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-
-        var texturePosBuffer = this.texturePosBuffer;
-        gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
-        var texturePosRef = gl.getAttribLocation(program, 'texturePos');
-        gl.enableVertexAttribArray(texturePosRef);
-        gl.vertexAttribPointer(texturePosRef, 2, gl.FLOAT, false, 0, 0);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-
-        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 
-
-        gl.disableVertexAttribArray(vertexPosRef);
-        gl.disableVertexAttribArray(texturePosRef);
-
-        gl.useProgram(null);
-    };
-
-    /**
-     * 上传YUV数据到纹理
-     * @param nWidth    宽度
-     * @param nHeight   高度
-     * @param nHeight   帧数据
-     */
-    RenderManager.prototype.updateFrameData = function(width, height, data,dWidth,dHeight) {
-
-        var gl = this.contextGL;
-
-        var yTextureRef = this.yTextureRef;
-        var uTextureRef = this.uTextureRef;
-        var vTextureRef = this.vTextureRef;
-
-        var i420Data = data;
-        // debugger;
-		if(width == dWidth && height == dHeight)
-		{
-			var yDataLength = width * height;
-			var yData = i420Data.subarray(0, yDataLength);
-			gl.activeTexture(gl.TEXTURE0);
-			gl.bindTexture(gl.TEXTURE_2D, yTextureRef);
-			gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width, height, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, yData);
-			
-			var cbDataLength = width/2 * height/2;
-			var cbData = i420Data.subarray(width*height, width*height + cbDataLength);
-			gl.activeTexture(gl.TEXTURE2);
-			gl.bindTexture(gl.TEXTURE_2D, vTextureRef);
-			gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width/2, height/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, cbData);
-			
-			var crDataLength = cbDataLength;
-			var crData = i420Data.subarray(width*height + width*height/4, width*height + width*height/4 + crDataLength);
-			gl.activeTexture(gl.TEXTURE1);
-			gl.bindTexture(gl.TEXTURE_2D, uTextureRef);
-			gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width/2, height/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, crData);
-			
-		}
-        else
-		{
-			 // //裁剪宽
-			var yDataLength = dWidth * dHeight;
-			var yData=new Uint8Array(yDataLength) ;
-			for(var i=0;i<dHeight;i++)
-			{
-				//var ySonData=new Uint8Array(dWidth) ;
-				var ySonData = i420Data.subarray(i*width, i*width+dWidth);
-				for (var j = 0; j < dWidth; j++) {
-					yData[i*dWidth + j] = ySonData[j];
-				}
-			}
-			gl.activeTexture(gl.TEXTURE0);
-			gl.bindTexture(gl.TEXTURE_2D, yTextureRef);
-			gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, dWidth, dHeight, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, yData);
-			yData=null;
-			ySonData=null;
-
-			var cbDataLength = dWidth/2 * dHeight/2;
-			var cbData =new Uint8Array(cbDataLength);
-			//var cbSonData=new Uint8Array(dWidth/2) ;
-			for(var i=0;i<dHeight/2;i++)
-			{
-				 var cbSonData = i420Data.subarray(width*height+i*width/2, width*height+i*width/2+dWidth/2);
-				for (var j = 0; j < dWidth/2; j++) {
-					cbData[i*dWidth/2 + j] = cbSonData[j];
-				}
-			}
-			gl.activeTexture(gl.TEXTURE2);
-			gl.bindTexture(gl.TEXTURE_2D, vTextureRef);
-			gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, dWidth/2, dHeight/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, cbData);
-			cbData=null;
-			cbSonData=null;
-
-			var crDataLength = cbDataLength;
-			var crData = new Uint8Array(crDataLength);
-			for(var i=0;i<dHeight/2;i++)
-			{
-				var crSonData = i420Data.subarray(width*height*5/4+i*width/2, width*height*5/4+i*width/2+dWidth/2);
-				for (var j = 0; j < dWidth/2; j++) {
-					crData[i*dWidth/2 + j] = crSonData[j];
-				}
-			}
-			gl.activeTexture(gl.TEXTURE1);
-			gl.bindTexture(gl.TEXTURE_2D, uTextureRef);
-			gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, dWidth/2, dHeight/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, crData);
-			crData=null;
-			crSonData=null;
-		}
-       
-    };
-
-    /**
-     * 设置显示区域
-     * @param stDisplayRect    显示区域
-     */
-    RenderManager.prototype.SR_SetDisplayRect = function(stDisplayRect) {
-
-        var gl = this.contextGL;
-
-        var nWindowWidth = this.nWindowWidth;
-        var nWindowHeight = this.nWindowHeight;
-        
-        var texturePosValues = null;
-        
-        if(stDisplayRect && nWindowWidth > 0 && nWindowHeight > 0) {
-            var fLeft = stDisplayRect.left / nWindowWidth;
-            var fTop = stDisplayRect.top / nWindowHeight;
-            var fRight = stDisplayRect.right / nWindowWidth;
-            var fBottom = stDisplayRect.bottom / nWindowHeight;
-
-            texturePosValues = new Float32Array([fRight, fTop, fLeft, fTop, fRight, fBottom, fLeft, fBottom]);
-        }
-        else {
-            texturePosValues = new Float32Array([1, 0, 0, 0, 1, 1, 0, 1]);
-        }
-
-        var texturePosBuffer = this.texturePosBuffer;
-
-        gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
-        gl.bufferSubData(gl.ARRAY_BUFFER, 0, texturePosValues);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-    };
-
-    /**
-     * 释放显示资源
-     */
-    RenderManager.prototype.SR_Destroy = function() {
-
-        var gl = this.contextGL;
-        
-        var YUVProgram = this.YUVProgram;
-        gl.deleteProgram(YUVProgram);
-
-        var vertexPosBuffer = this.vertexPosBuffer;
-        var texturePosBuffer = this.texturePosBuffer;
-        
-        gl.deleteBuffer(vertexPosBuffer);
-        gl.deleteBuffer(texturePosBuffer);
-
-        var yTextureRef = this.yTextureRef;
-        var uTextureRef = this.uTextureRef;
-        var vTextureRef = this.vTextureRef;
-        gl.deleteTexture(yTextureRef);
-        gl.deleteTexture(uTextureRef);
-        gl.deleteTexture(vTextureRef);
-		//gl.getExtension('WEBGL_lose_context').loseContext();
-    };
-
-    return RenderManager;
-
-}));
+"use strict";
+//顶点着色器
+//attribute修饰符用于声明由浏览器（javascript）传输给顶点着色器的变量值；
+// vertexPos即我们定义的顶点坐标；
+// gl_Position是一个内建的传出变量。
+var vertexYUVShader = [
+  "attribute vec4 vertexPos;",
+  "attribute vec2 texturePos;",
+  "varying vec2 textureCoord;",
+
+  "void main()",
+  "{",
+  "gl_Position = vertexPos;",
+  "textureCoord = texturePos;",
+  "}",
+].join("\n");
+//像素着色器(yuv->rgb)
+var fragmentYUVShader = [
+  "precision highp float;",
+  "varying highp vec2 textureCoord;",
+  "uniform sampler2D ySampler;",
+  "uniform sampler2D uSampler;",
+  "uniform sampler2D vSampler;",
+  "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",
+  ");",
+
+  "void main(void) {",
+  "highp float y = texture2D(ySampler,  textureCoord).r;",
+  "highp float u = texture2D(uSampler,  textureCoord).r;",
+  "highp float v = texture2D(vSampler,  textureCoord).r;",
+  "gl_FragColor = vec4(y, u, v, 1) * YUV2RGB;",
+  "}",
+].join("\n");
+
+(function (root, factory) {
+  // root.SuperRender = factory();
+  window.SuperRender = factory();
+})(this, function () {
+  function RenderManager(canvas) {
+    this.canvasElement = document.getElementById(canvas);
+
+    this.initContextGL();
+
+    if (this.contextGL) {
+      this.YUVProgram = this.initProgram(vertexYUVShader, fragmentYUVShader);
+      this.initBuffers();
+      this.initTextures();
+    }
+  }
+
+  /**
+   * 初始化WebGL上下文
+   */
+  RenderManager.prototype.initContextGL = function () {
+    var canvas = this.canvasElement;
+
+    var gl = null;
+
+    try {
+      gl =
+        canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+    } catch (e) {
+      gl = null;
+    }
+
+    if (!gl || typeof gl.getParameter !== "function") {
+      gl = null;
+    }
+
+    this.contextGL = gl;
+
+    console.log("WebGL1.0");
+  };
+
+  /**
+   * 初始化着色器程序
+   * @param vertexShaderScript    顶点着色器脚本
+   * @param fragmentShaderScript  片段着色器脚本
+   */
+  RenderManager.prototype.initProgram = function (
+    vertexShaderScript,
+    fragmentShaderScript
+  ) {
+    var gl = this.contextGL;
+
+    var vertexShader = gl.createShader(gl.VERTEX_SHADER); //创建定点着色器
+    gl.shaderSource(vertexShader, vertexShaderScript);
+    gl.compileShader(vertexShader);
+    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+      console.log(
+        "Vertex shader failed to compile: " + gl.getShaderInfoLog(vertexShader)
+      );
+    }
+
+    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+    gl.shaderSource(fragmentShader, fragmentShaderScript);
+    gl.compileShader(fragmentShader);
+    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+      console.log(
+        "Fragment shader failed to compile: " +
+          gl.getShaderInfoLog(fragmentShader)
+      );
+    }
+
+    var program = gl.createProgram();
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      console.log(
+        "Program failed to compile: " + gl.getProgramInfoLog(program)
+      );
+    }
+
+    gl.deleteShader(vertexShader);
+    gl.deleteShader(fragmentShader);
+
+    return program;
+  };
+
+  /**
+   * 初始化数据缓存
+   */
+  RenderManager.prototype.initBuffers = function () {
+    var gl = this.contextGL;
+
+    var vertexPosBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]),
+      gl.STATIC_DRAW
+    );
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+    var texturePosBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([1, 0, 0, 0, 1, 1, 0, 1]),
+      gl.DYNAMIC_DRAW
+    );
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+    this.vertexPosBuffer = vertexPosBuffer;
+    this.texturePosBuffer = texturePosBuffer;
+  };
+
+  /**
+   * 创建纹理
+   */
+  RenderManager.prototype.initTexture = function () {
+    var gl = this.contextGL;
+
+    var textureRef = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, textureRef);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+
+    return textureRef;
+  };
+
+  /**
+   * 初始化YUV纹理
+   */
+  RenderManager.prototype.initTextures = function () {
+    var gl = this.contextGL;
+
+    var program = this.YUVProgram;
+    gl.useProgram(program);
+
+    var yTextureRef = this.initTexture();
+    var ySamplerRef = gl.getUniformLocation(program, "ySampler");
+    gl.uniform1i(ySamplerRef, 0);
+    this.yTextureRef = yTextureRef;
+
+    var uTextureRef = this.initTexture();
+    var uSamplerRef = gl.getUniformLocation(program, "uSampler");
+    gl.uniform1i(uSamplerRef, 1);
+    this.uTextureRef = uTextureRef;
+
+    var vTextureRef = this.initTexture();
+    var vSamplerRef = gl.getUniformLocation(program, "vSampler");
+    gl.uniform1i(vSamplerRef, 2);
+    this.vTextureRef = vTextureRef;
+
+    gl.useProgram(null);
+  };
+
+  /**
+   * 显示帧数据
+   * @param nWidth    宽度
+   * @param nHeight   高度
+   * @param nHeight   帧数据
+   */
+  RenderManager.prototype.SR_DisplayFrameData = function (
+    nWidth,
+    nHeight,
+    pData,
+    dWidth,
+    dHeight
+  ) {
+    if (nWidth <= 0 || nHeight <= 0) {
+      return;
+    }
+
+    var gl = this.contextGL;
+
+    if (null == pData) {
+      gl.clearColor(0.0, 0.0, 0.0, 0.0);
+      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+      return;
+    }
+
+    var canvas = this.canvasElement;
+
+    this.nWindowWidth = canvas.width;
+    this.nWindowHeight = canvas.height;
+
+    var nWindowWidth = this.nWindowWidth;
+    var nWindowHeight = this.nWindowHeight;
+
+    gl.clearColor(0.8, 0.8, 1.0, 1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+    gl.viewport(0, 0, nWindowWidth, nWindowHeight);
+
+    this.updateFrameData(nWidth, nHeight, pData, dWidth, dHeight);
+
+    var program = this.YUVProgram;
+    gl.useProgram(program);
+
+    var vertexPosBuffer = this.vertexPosBuffer;
+    gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
+    var vertexPosRef = gl.getAttribLocation(program, "vertexPos");
+    gl.enableVertexAttribArray(vertexPosRef);
+    gl.vertexAttribPointer(vertexPosRef, 2, gl.FLOAT, false, 0, 0);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+    var texturePosBuffer = this.texturePosBuffer;
+    gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
+    var texturePosRef = gl.getAttribLocation(program, "texturePos");
+    gl.enableVertexAttribArray(texturePosRef);
+    gl.vertexAttribPointer(texturePosRef, 2, gl.FLOAT, false, 0, 0);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+    gl.disableVertexAttribArray(vertexPosRef);
+    gl.disableVertexAttribArray(texturePosRef);
+
+    gl.useProgram(null);
+  };
+
+  /**
+   * 上传YUV数据到纹理
+   * @param nWidth    宽度
+   * @param nHeight   高度
+   * @param nHeight   帧数据
+   */
+  RenderManager.prototype.updateFrameData = function (
+    width,
+    height,
+    data,
+    dWidth,
+    dHeight
+  ) {
+    var gl = this.contextGL;
+
+    var yTextureRef = this.yTextureRef;
+    var uTextureRef = this.uTextureRef;
+    var vTextureRef = this.vTextureRef;
+
+    var i420Data = data;
+    // debugger;
+    if (width == dWidth && height == dHeight) {
+      var yDataLength = width * height;
+      var yData = i420Data.subarray(0, yDataLength);
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, yTextureRef);
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        gl.LUMINANCE,
+        width,
+        height,
+        0,
+        gl.LUMINANCE,
+        gl.UNSIGNED_BYTE,
+        yData
+      );
+
+      var cbDataLength = ((width / 2) * height) / 2;
+      var cbData = i420Data.subarray(
+        width * height,
+        width * height + cbDataLength
+      );
+      gl.activeTexture(gl.TEXTURE2);
+      gl.bindTexture(gl.TEXTURE_2D, vTextureRef);
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        gl.LUMINANCE,
+        width / 2,
+        height / 2,
+        0,
+        gl.LUMINANCE,
+        gl.UNSIGNED_BYTE,
+        cbData
+      );
+
+      var crDataLength = cbDataLength;
+      var crData = i420Data.subarray(
+        width * height + (width * height) / 4,
+        width * height + (width * height) / 4 + crDataLength
+      );
+      gl.activeTexture(gl.TEXTURE1);
+      gl.bindTexture(gl.TEXTURE_2D, uTextureRef);
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        gl.LUMINANCE,
+        width / 2,
+        height / 2,
+        0,
+        gl.LUMINANCE,
+        gl.UNSIGNED_BYTE,
+        crData
+      );
+    } else {
+      // //裁剪宽
+      var yDataLength = dWidth * dHeight;
+      var yData = new Uint8Array(yDataLength);
+      for (var i = 0; i < dHeight; i++) {
+        //var ySonData=new Uint8Array(dWidth) ;
+        var ySonData = i420Data.subarray(i * width, i * width + dWidth);
+        for (var j = 0; j < dWidth; j++) {
+          yData[i * dWidth + j] = ySonData[j];
+        }
+      }
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, yTextureRef);
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        gl.LUMINANCE,
+        dWidth,
+        dHeight,
+        0,
+        gl.LUMINANCE,
+        gl.UNSIGNED_BYTE,
+        yData
+      );
+      yData = null;
+      ySonData = null;
+
+      var cbDataLength = ((dWidth / 2) * dHeight) / 2;
+      var cbData = new Uint8Array(cbDataLength);
+      //var cbSonData=new Uint8Array(dWidth/2) ;
+      for (var i = 0; i < dHeight / 2; i++) {
+        var cbSonData = i420Data.subarray(
+          width * height + (i * width) / 2,
+          width * height + (i * width) / 2 + dWidth / 2
+        );
+        for (var j = 0; j < dWidth / 2; j++) {
+          cbData[(i * dWidth) / 2 + j] = cbSonData[j];
+        }
+      }
+      gl.activeTexture(gl.TEXTURE2);
+      gl.bindTexture(gl.TEXTURE_2D, vTextureRef);
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        gl.LUMINANCE,
+        dWidth / 2,
+        dHeight / 2,
+        0,
+        gl.LUMINANCE,
+        gl.UNSIGNED_BYTE,
+        cbData
+      );
+      cbData = null;
+      cbSonData = null;
+
+      var crDataLength = cbDataLength;
+      var crData = new Uint8Array(crDataLength);
+      for (var i = 0; i < dHeight / 2; i++) {
+        var crSonData = i420Data.subarray(
+          (width * height * 5) / 4 + (i * width) / 2,
+          (width * height * 5) / 4 + (i * width) / 2 + dWidth / 2
+        );
+        for (var j = 0; j < dWidth / 2; j++) {
+          crData[(i * dWidth) / 2 + j] = crSonData[j];
+        }
+      }
+      gl.activeTexture(gl.TEXTURE1);
+      gl.bindTexture(gl.TEXTURE_2D, uTextureRef);
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        gl.LUMINANCE,
+        dWidth / 2,
+        dHeight / 2,
+        0,
+        gl.LUMINANCE,
+        gl.UNSIGNED_BYTE,
+        crData
+      );
+      crData = null;
+      crSonData = null;
+    }
+  };
+
+  /**
+   * 设置显示区域
+   * @param stDisplayRect    显示区域
+   */
+  RenderManager.prototype.SR_SetDisplayRect = function (stDisplayRect) {
+    var gl = this.contextGL;
+
+    var nWindowWidth = this.nWindowWidth;
+    var nWindowHeight = this.nWindowHeight;
+
+    var texturePosValues = null;
+
+    if (stDisplayRect && nWindowWidth > 0 && nWindowHeight > 0) {
+      var fLeft = stDisplayRect.left / nWindowWidth;
+      var fTop = stDisplayRect.top / nWindowHeight;
+      var fRight = stDisplayRect.right / nWindowWidth;
+      var fBottom = stDisplayRect.bottom / nWindowHeight;
+
+      texturePosValues = new Float32Array([
+        fRight,
+        fTop,
+        fLeft,
+        fTop,
+        fRight,
+        fBottom,
+        fLeft,
+        fBottom,
+      ]);
+    } else {
+      texturePosValues = new Float32Array([1, 0, 0, 0, 1, 1, 0, 1]);
+    }
+
+    var texturePosBuffer = this.texturePosBuffer;
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
+    gl.bufferSubData(gl.ARRAY_BUFFER, 0, texturePosValues);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+  };
+
+  /**
+   * 释放显示资源
+   */
+  RenderManager.prototype.SR_Destroy = function () {
+    var gl = this.contextGL;
+
+    var YUVProgram = this.YUVProgram;
+    gl.deleteProgram(YUVProgram);
+
+    var vertexPosBuffer = this.vertexPosBuffer;
+    var texturePosBuffer = this.texturePosBuffer;
+
+    gl.deleteBuffer(vertexPosBuffer);
+    gl.deleteBuffer(texturePosBuffer);
+
+    var yTextureRef = this.yTextureRef;
+    var uTextureRef = this.uTextureRef;
+    var vTextureRef = this.vTextureRef;
+    gl.deleteTexture(yTextureRef);
+    gl.deleteTexture(uTextureRef);
+    gl.deleteTexture(vTextureRef);
+    //gl.getExtension('WEBGL_lose_context').loseContext();
+  };
+
+  return RenderManager;
+});