[Public WebGL] y-orientation for texImage2D from HTML elements

Gregg Tavares (社用) [email protected]
Thu Dec 6 00:35:14 PST 2012

This isn't a bug. it's by design.

By default WebGL does the same as GL. It doesn't flip anything. The "data"
pointer passed to texImage2D represents the bottom left corner of the
texture. Whether that's an ArrayBuffer, an Image, a Canvas, a Video. For
Image, Canvas, and Video that means by default they'be upside down (which
is the same as GL).

CopyTexImage2D in GL has always been "effectively" backward relative to
TexImage2D when talking about images because most (all?) image libraries
load images with the first pixel in the top, left and GL expects the first
pixel is the bottom, left. Since CopyTexImage is copying internally it
appears to have different behavior because it's matching src data 0x0 =
bottom, left, dst data 0x0 = bottom left where as TexImage2D, when passing
standard image data, is src data 0x0 = top,left, dest = bottom, left

If you want WebGL to flip the data for you call
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

There is no PACK_FLIP_Y so readPixels will always return the bottom,left as
the first data in the array buffer.

As for matching implementations it's all tested in the conformance tests

On Thu, Dec 6, 2012 at 4:59 PM, Jeff Gilbert <[email protected]> wrote:

> It seems backwards (as implemented) and underdefined in the spec. It looks
> like we all upload HTML element texImage data with 0,0=top-left, making it
> effectively upside-down.
> The following two lines yield different results:
> [1] gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0,
> gl.drawingBufferWidth, gl.drawingBufferHeight, 0);
> [2] gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE,
> gl.canvas);
> [1] matches this: [3]
> var data = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight *
> 4);
> gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight,
> gl.RGBA, gl.UNSIGNED_BYTE, data);
> gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.drawingBufferWidth,
> gl.drawingBufferHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
> UNPACK_FLIP_Y_WEBGL=true makes [2] the same as [1], but now [3] is
> upside-down.
> This is Mozilla bug 818810:
> https://bugzilla.mozilla.org/show_bug.cgi?id=818810
> Testcase showing inconsistent behavior:
> https://bugzilla.mozilla.org/attachment.cgi?id=689110
> As I mention in the bug, it doesn't look like y-orientation of texImage2D
> of HTML elements is well-specified in the spec. So far everyone appears to
> have implemented it the same, though.
> My suggestion was adding an UNPACK_ pixelStore option that allows us to
> get OpenGL-style 0,0=bottom-left texImage2D uploads of HTML elements.
> -----------------------------------------------------------
> You are currently subscribed to [email protected]
> To unsubscribe, send an email to [email protected] with
> the following command in the body of your email:
> unsubscribe public_webgl
> -----------------------------------------------------------
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://khronos.org/pipermail/public_webgl_khronos.org/attachments/20121206/dbe61bbb/attachment.html>

More information about the public_webgl mailing list