Video 在IOS 10 beta 7（Safari）中使用webGL渲染视频-显示奇怪的紫色

我正在webGL中渲染一个视频，方法是传递一个

video

对象作为

texImage2D

的源
这在所有平台（支持webGL）上都非常有效，但是在IOS 10 beta 7中的Safari中，它会以奇怪的颜色呈现（在以前的IOS版本中，它看起来还可以）

例如，这是一个来自它的图像帧，它看起来是这样的：

这就是IOS 10（怪异版本）中的呈现方式：

这是一个IOS10测试错误吗

以下是渲染代码（针对每个帧）：

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本身）中的一个bug。一个好的开始是向WebKit的跟踪器报告：。

以防万一，纹理的包裹和过滤参数是什么？你试过修补它们吗？@KirillDmitrenko谢谢你的评论。我刚才试过了。不幸的是，除了

gl.CLAMP_TO_EDGE

之外的任何东西都会呈现一个黑色矩形。@KirillDmitrenko包装和过滤不会以这种方式影响实际颜色，这里的明确答案是“是的，这是一个bug”，没有必要去摆弄这些东西@OP您可以在创建上下文时尝试设置

alpha:false

（

var gl=canvas.getContext（{alpha:false}）

），或者将纹理数据类型设置为

RGB

，而不是

RGBA

（通常视频没有alpha通道）。但这仍然是一个bug，你应该向苹果报告。至于发生了什么，我怀疑webkit从视频中提取的数据是作为BGR数据而不是RGB提供给WebGL的，你可以将其反转（翻转片段着色器中的R和B通道：

gl_FragColor=texture2D（u image，v_texCoord）.bgra；

）以使其看起来再次正确，但是，正如前面所说，这是一个错误，应由供应商修复。@LJᛃ 你是对的：）反转它会使它看起来正常（在所有其他平台上都是紫色）。我将报告此事。感谢大家的帮助。

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);
}