CODEWITHSUNDEEP
javascripthtml5-canvaswebgl
Randomblue
Randomblue

Reputation: 116263

Transparency discrepancy between webgl and 2d canvases

I have a png, which I load using 2d canvas, and as a webgl texture. The png has some transparent parts, which are rendered black in webgl, and white in the 2d canvas. (Please see this fiddle for a live demo. In Chrome, you need to run with the flag --disable-web-security to bypass cross-origin restrictions.)

Is there a way to set the transparency color for webgl textures? What about for 2d canvases?

Upvotes: 0

Views: 209

Answers (2)

user128511
user128511

Reputation:

You're loading the texture as RGB in createTexture and therefore throwing away the alpha channel. Change it to RGBA as in

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

And they'll look the same.

Upvotes: 2

kinduff
kinduff

Reputation: 142

In order for canvas to understand your png transparency, you'll need to save it in 24-bit.

Because 24-bit PNG images include a full 8-bit alpha channel.

Full reference

Upvotes: 0

Related Questions