在IOS 10 beta 7(Safari)中使用webGL渲染视频-显示奇怪的紫色 [英] Rendering a video with webGL in IOS 10 beta 7 (Safari) - shows weird purplish colors

问题描述

我通过传递 Video 对象作为 texImage2D 的源，在webGL中渲染视频.
此方法在所有支持webGL的平台上均适用，但是在IOS 10 beta 7的Safari中，它呈现为奇怪的颜色(在以前的IOS版本中看起来还可以).

I'm rendering a video in webGL, by passing a Video object as the source for texImage2D.
This works great in all platforms (that supports webGL), however in Safari in IOS 10 beta 7, it is rendered with weird colors (in previous IOS versions it looks ok).

例如，这是它的图像帧，看起来像是这样:

For example, this is an image frame from it, that looks how it's supposed:

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

And this is how it's rendered in IOS 10 (the weird version):

这是IOS10 beta错误吗?

Is this an IOS10 beta bug?

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

Here is the render code (that happens for each frame):

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纹理. video 是 Video 对象.
顶点缓冲区在进行初始化之前已形成一个容纳图像的矩形.

frameTexture is a 2D texture created before. video is a Video object.
The vertex buffers have been initialized before to form a rectangle that holds the image.

这些是着色器:

顶点

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获取视频的宽度和高度.

u_resolution gets the width and height of the video from the JS, before.

片段

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

我尝试了多个视频-结果相同.尽管我注意到白人和黑人看起来很正常，而且看起来还不错.

I tried several videos - same result. Though I noticed that whites and blacks looks normal and are rendered ok.

如果这不是webGL中的IOS10错误-不知道是什么原因导致的?
(我应该注意，我对webGL不太了解)

If this is not an IOS10 bug in webGL - any idea what can cause this?
(I should note, that I am not very experienced with webGL)

推荐答案

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

It's clearly a bug in WebKit (or Safari or even iOS itself). A good start would be to report it to WebKit's tracker: https://webkit.org/reporting-bugs/.

这篇关于在IOS 10 beta 7(Safari)中使用webGL渲染视频-显示奇怪的紫色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！