WebGL渲染视频至Canvas遇异常 求排查及原生JS示例

我正在做视频渲染基准测试，需要实现无滤镜、无变换的WebGL视频帧渲染到Canvas，目前已经用Canvas 2D Context的CanvasRenderingContext2D.drawImage API实现了该功能，但因为缺乏GLSL、OpenGL相关知识，WebGL版本的实现遇到了困难。

经过搜索和测试，我写出了一个能把视频帧读取到纹理并渲染的Demo，但存在三个异常：

• 仅渲染视频的右侧部分；
• 视频在横竖两个方向均被错误缩放；
• 在Stackblitz环境下显示颜色异常，但本地Vite Demo显示正常。

我怀疑问题出在GLSL着色器或者WebGL配置里，希望有人能指出问题所在，或者提供可用的原生JavaScript示例。

核心逻辑在useWebGl文件夹内，视频加载后点击start benchmark按钮触发渲染循环。

片段着色器代码 #

// texture fragment
precision lowp float;
uniform sampler2D uSampler;
varying vec2 vTextureCoord;
varying vec2 vTextureOffsetVector;
void main () {
  gl_FragColor = vec4(texture2D(uSampler, vTextureCoord).rgb, texture2D(uSampler, vTextureCoord+vTextureOffsetVector).r); // rgb + alpha变化
}

顶点着色器代码 #

// texture vertex position
attribute vec4 aVertexPosition;
attribute vec2 aTextureCoord;
varying vec2 vTextureCoord;
varying vec2 vTextureOffsetVector;
uniform vec2 uTextureOffsetVector;
uniform vec4 uScale;
void main () {
  gl_Position = aVertexPosition * uScale;
  vTextureCoord = aTextureCoord;
  vTextureOffsetVector = uTextureOffsetVector;
}

内容的提问来源于stack exchange，提问作者bbbbbbbboat