webgl中如何做YUV数据的裁剪

针对有裁剪信息的码流（1088，768），在进行渲染之前需要进行YUV数据的裁剪，因为裁剪区域的码流为冗余数据，如果不进行裁剪，渲染出来将有蓝边或紫边状态。

在将YUV数据上传到纹理前进行YUV的裁剪。

即https://blog.csdn.net/qq_34754747/article/details/107281312  webgl渲染过程中的

步骤：上传YUV数据到纹理 updateFrameData

updateFrameData = function(oWidth,oHeight,data,crop_left,crop_right,crop_top,crop_bottom)
{
    var i420Data = data;
    var dWidth = oWidth - crop_left - crop_right;
    var dHeight = oHeight - crop_top - crop_bottom;
    
    var yDataLength = dWidth * dHeight;//实际的长度
    var yData = i420Data.subarray(0, yDataLength);//从原始
    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);//指定纹理的绑定对象

    var cbDataLength = dWidth/2 * dHeight/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, dWidth/2, dHeight/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, dWidth/2, dHeight/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, crData);
}

 

本文地址：https://blog.csdn.net/qq_34754747/article/details/107281226