Geek Answers Handbook

WebGL: Why does a transparent canvas show a clearColor color component when alpha is 0?

Here is a simple splash showing my problem:

<html>
<head>
    <title>Clear Color</title>
    <style type="text/css">
        #stage {
            background-color: rgba(127,127,127,1);
        }
    </style>
</head>
<body>
    <canvas id="stage" width="100", height="100"></canvas>
    <script type="text/javascript">
        var options = {
            alpha: true,
            premultipliedAlpha: true
        };
        var ctx = document.getElementById("stage").getContext("webgl", options);
        ctx.clearColor(1, 0, 0, 0);
        ctx.enable(ctx.BLEND);
        ctx.blendFuncSeparate(
            ctx.SRC_ALPHA, ctx.ONE_MINUS_SRC_ALPHA,
            ctx.ONE, ctx.ONE_MINUS_SRC_ALPHA
        );
        ctx.clear(ctx.COLOR_BUFFER_BIT);
    </script>
</body>
</html>

BlendFunc:
(sR * sA) + (dR * (1-sA)) = rR
(sG * sA) + (dG * (1-sA)) = rG
(sB * sA) + (dB * (1-sA) ) = rB
(sA * 1) + (dA * (1-sA)) = rA

... that translates into this (I think):
(1 * 0) + (0.5 * (1-0)) = 0.5
(0 * 0) + (0.5 * (1-0) ) = 0.5
(0 * 0) + (0.5 * (1-0)) = 0.5
(0 * 1) + (1.0 * (1-0)) = 1.0

Why do I see a light pink canvas instead of gray, which declares CSS? Pink obviously comes from my clearColor, but why does it show red when the alpha component is 0?

+4
source share
1

WebGL , . 1,0,0,0 , rgb (1,0,0) * alpha (0) = 0,0,0 1,0,0, , undefined . .

  • WebGL, .

    gl = canvas.getContext("experimental-webgl", { premultipliedalpha: false });

  • -

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


  • var r = 1;
var g = 0;
var b = 0;
var a = 0;
gl.clearColor(r * a, g * a, b * a, a);

    , .

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

. gl.drawXXX, , .

+4

More articles:


All Articles