2022 Developer Survey is open! Take survey.
deleted 172 characters in body
Source Link
Rabbid76
  • 175.8k
  • 25
  • 101
  • 145

This appears to be a problem related to Premultiplied Alpha (see Why does my WebGL alpha-transparency look wrong?. Disable premultipliedAlpha. e.g:

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

If you want to keep Premultiplied Alpha enabled, youYou need to multiply the color channels by the alpha channel in the fragment shader:

void main() {
    // [...]

    vec4 color = ...;

    gl_FragColor = vec4(color.rgb * color.a, color.a);
}

and change the blend function to 1 * source_color + (1 -alpha) * dest_color:

gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

This appears to be a problem related to Premultiplied Alpha (see Why does my WebGL alpha-transparency look wrong?. Disable premultipliedAlpha. e.g:

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

If you want to keep Premultiplied Alpha enabled, you need to multiply the color channels by the alpha channel in the fragment shader:

void main() {
    // [...]

    vec4 color = ...;

    gl_FragColor = vec4(color.rgb * color.a, color.a);
}

and change the blend function to 1 * source_color + (1 -alpha) dest_color:

gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

This appears to be a problem related to Premultiplied Alpha (see Why does my WebGL alpha-transparency look wrong?.

You need to multiply the color channels by the alpha channel in the fragment shader:

void main() {
    // [...]

    vec4 color = ...;

    gl_FragColor = vec4(color.rgb * color.a, color.a);
}

and change the blend function to 1 * source_color + (1 -alpha) * dest_color:

gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
Post Undeleted by Rabbid76
added 173 characters in body
Source Link
Rabbid76
  • 175.8k
  • 25
  • 101
  • 145

This appears to be a problem related to Premultiplied Alpha (see Why does my WebGL alpha-transparency look wrong?. Disable premultipliedAlpha. e.g:

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

If you want to keep Premultiplied Alpha enabled, you need to multiply the color channels by the alpha channel in the fragment shader::

void main() {
    // [...]

    vec4 color = ...;

    gl_FragColor = vec4(color.rgb * color.a, color.a);
}

and change the blend function to 1 * source_color + (1 -alpha) dest_color:

gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

This appears to be a problem related to Premultiplied Alpha (see Why does my WebGL alpha-transparency look wrong?. Disable premultipliedAlpha. e.g:

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

If you want to keep Premultiplied Alpha enabled, you need to multiply the color channels by the alpha channel in the fragment shader::

void main() {
    // [...]

    vec4 color = ...;

    gl_FragColor = vec4(color.rgb * color.a, color.a);
}

This appears to be a problem related to Premultiplied Alpha (see Why does my WebGL alpha-transparency look wrong?. Disable premultipliedAlpha. e.g:

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

If you want to keep Premultiplied Alpha enabled, you need to multiply the color channels by the alpha channel in the fragment shader:

void main() {
    // [...]

    vec4 color = ...;

    gl_FragColor = vec4(color.rgb * color.a, color.a);
}

and change the blend function to 1 * source_color + (1 -alpha) dest_color:

gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
Post Deleted by Rabbid76
Source Link
Rabbid76
  • 175.8k
  • 25
  • 101
  • 145

This appears to be a problem related to Premultiplied Alpha (see Why does my WebGL alpha-transparency look wrong?. Disable premultipliedAlpha. e.g:

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

If you want to keep Premultiplied Alpha enabled, you need to multiply the color channels by the alpha channel in the fragment shader::

void main() {
    // [...]

    vec4 color = ...;

    gl_FragColor = vec4(color.rgb * color.a, color.a);
}