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:
And this is how it's rendered in IOS 10 (the weird version):
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
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.
These are the shaders:
Vertex
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
gets the width and height of the video from the JS, before.
Fragment
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.
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)
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/.