396 lines
13 KiB
Vue
396 lines
13 KiB
Vue
"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.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, cbData);
|
||
|
||
var crDataLength = cbDataLength;
|
||
var crData = i420Data.subarray(width*height + width*height/4, width*height + width*height/4 + crDataLength);
|
||
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, 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.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, 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.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, 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;
|
||
|
||
})); |