WebGLその9：色加算

WebGL

■index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SanoWebGLSample09.html</title>
</head>
<script type="text/javascript" src="webglut03.js"></script>
<script>
//------------------------------------------------------------------------
//    
//------------------------------------------------------------------------
var    gl;
var    imageData;        //イメージデータ
//------------------------------------------------------------------------
//    初期化
//------------------------------------------------------------------------
function    init()
{
    // gl用コンテキストを取得
    gl    = Ginit( document.getElementById("c") );
    G2Dinit();
    //    テクスチャ登録
    imageData    = GsetImage( "ball.png" );
    //    メインループ登録
    setInterval( "MainLoop()", 33 );
}
//------------------------------------------------------------------------
//    メインループ
//------------------------------------------------------------------------
function MainLoop()
{
    // 画面クリア
    Gclear();
    //    加算
    gl.blendFuncSeparate( gl.SRC_ALPHA, gl.ONE, gl.ONE, gl.ONE );
    gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );
    // 描画
    G2Dimage( imageData, 10, 10, 200, 200 );
    G2Dimage( imageData, 50, 50, 200, 200 );
    G2Dimage( imageData, 90, 90, 200, 200 );
}
</script>
</head>
<body onload="init();">
<canvas id="c" style="border:none" width="640" height="480">
</body>
</html>

■テクスチャは

「ball.png」
を使用、そして色加算の呪文

    gl.blendFuncSeparate( gl.SRC_ALPHA, gl.ONE, gl.ONE, gl.ONE );
    gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );

■

そのほかの合成では
■線形合成

    gl.blendFuncSeparate( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE );
    gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );

■減算合成

    gl.blendFuncSeparate( gl.SRC_ALPHA, gl.ONE, gl.ONE, gl.ONE );
    gl.blendEquationSeparate( gl.FUNC_REVERSE_SUBTRACT, gl.FUNC_ADD );

■積算合成

    gl.blendFuncSeparate( gl.ZERO, gl.SRC_COLOR, gl.ONE, gl.ONE );
    gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );