7

I set up a webgl canvas on my page, and used these params at startup:

gl = canvas.getContext("webgl", {
  alpha: true,
  premultipliedAlpha: false
});

Then I did all the setup work to make a program, a vertex shader and a fragment shader.

My vertex shader just gives me a 2d drawing surface, and my fragment shader looks like this:

void main(void) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 0.1);
}

So basically all I'm trying to do is draw a transparent white box on the page. This works on every browser I've tested it on except safari/ios. In safari the box is fully white, no transparency seen.

Here's a side by side screenshot of what it looks like with a blue page background:

enter image description here

Are there additional parameters I should set to make this work? Or does ios have different behavior than other browsers?

Update: If I run the clear color command after my fragment shader is called (meaning the shader output is wiped and replaced with the clear color) the webgl canvas is transparent. 

 gl.clearColor(0.0, 0.0, 0.0, 0.1);
 gl.clear(gl.COLOR_BUFFER_BIT);

However this doesn't let me do much other than make a solid semi-transparent color. I'm looking to do variable transparency in the fragment shader itself.

YAHsaves
  • 1,697
  • 12
  • 33
  • 4
    It's a bug in Safari in general (Desktop and iOS both) and Apple has shown zero interest in fixing WebGL bugs whatsoever. If you want things to work on Safari you'll need to use premultpliedAlpha = true (the default) and set colors appropriately – gman Jul 23 '19 at 04:38
  • @gman, Thank you that worked! Sad they don't show interest in getting things up to spec, but at least in this case there was a work around. – YAHsaves Jul 23 '19 at 12:12

0 Answers0