在IOS 10 beta 7(Safari)中使用webGL渲染视频 – 显示出奇怪的紫色

2019年7月28日 224次阅读

我正在通过传递Video对象作为tex
Image2D的源来渲染webGL中的视频.这适用于所有平台(支持webGL),但在IOS 10 beta 7的Safari中,它呈现出奇怪的颜色(在以前的IOS版本中看起来没问题).

例如,这是一个来自它的图像框架,它看起来如何：
《在IOS 10 beta 7(Safari)中使用webGL渲染视频 – 显示出奇怪的紫色》

这就是它在IOS 10(奇怪的版本)中呈现的方式：

《在IOS 10 beta 7(Safari)中使用webGL渲染视频 – 显示出奇怪的紫色》

这是IOS10测试版的错误吗？

这是渲染代码(每帧发生一次)：

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);        
gl.bindTexture(gl.TEXTURE_2D, frameTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
gl.drawArrays(gl.TRIANGLES, 0, 6);
gl.bindTexture(gl.TEXTURE_2D, null);

frameTexture是之前创建的2D纹理.视频是一个视频对象.
之前已初始化顶点缓冲区以形成保存图像的矩形.

这些是着色器：

顶点

attribute vec3 a_position;
attribute vec2 a_texCoord;
uniform vec2 u_resolution;
varying vec2 v_texCoord;

void main() {
    vec4 pos = vec4(a_position, 1.0);
    vec2 xy = vec2(pos.x,pos.y);

    // convert the rectangle from pixels to 0.0 to 1.0
    vec2 zeroToOne = xy / u_resolution;
    // convert from 0->1 to 0->2
    vec2 zeroToTwo = zeroToOne * 2.0;
    // convert from 0->2 to -1->+1 (clipspace)
    vec2 clipSpace = zeroToTwo - 1.0;
    gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
    // pass the texCoord to the fragment shader
    // The GPU will interpolate this value between points.
    v_texCoord = a_texCoord;        
}

u_resolution之前从JS获取视频的宽度和高度.

分段

precision mediump float;

// our texture
uniform sampler2D u_image;
// the texCoords passed in from the vertex shader.
varying vec2 v_texCoord;

void main() {
   gl_FragColor = texture2D(u_image, v_texCoord);
}

我尝试了几个视频 – 结果相同.虽然我注意到白人和黑人看起来很正常并且变得很好.

如果这不是webGL中的IOS10错误 – 任何想法会导致什么？
(我应该注意,我对webGL不是很有经验)

最佳答案 这显然是WebKit(或Safari甚至iOS本身)中的一个错误.一个好的开始是将它报告给WebKit的跟踪器：
https://webkit.org/reporting-bugs/.

点赞