pixi.jsで半透明背景を実現する

pixijs-semi-transparent-background.png

WebGLRendererのrender()関数をコピペして書き換えました

<script src="http://miffysora.wikidot.com/local--files/webgl/pixi.min.js" type="text/javascript"></script>
</script>
<script type='text/javascript' >
// 初期化関数は`new PIXI.WebGLRenderer`か, `new PIXI.CanvasRenderer`, か`PIXI.autoDetectRenderer`です
var renderer = new PIXI.WebGLRenderer(200, 200, {transparent:true});//一度全透明で初期化するのがコツです
//<canvas>要素をbodyに追加します
document.body.appendChild(renderer.view);
 
//まず、 ルートコンテナを作成しないといけません。描画シーンのコンテナになります。
var stage = new PIXI.Container();
 
//テクスチャをロードします
PIXI.loader.add('bunny', 'http://miffysora.wdfiles.com/local--files/pixijs/favisora.png').load(function (loader, resources) {
    //png画像からテクスチャを生成します。
    var bunny = new PIXI.Sprite(resources.bunny.texture);
 
    //主役の位置をスケールを調整します 
    bunny.position.x = 30;
    bunny.position.y = 30;
 
    bunny.scale.x = 2;
    bunny.scale.y = 2;
 
    // うさぎをシーンに追加します
    stage.addChild(bunny);
 
    // アニメーションループをスタートします
    animate(bunny);
});
 
function animate(bunny) {
 
// start the timer for the next animation loop
    requestAnimationFrame(animate);
 
    // each frame we spin the bunny around a bit
    bunny.rotation += 0.01;
 
    //半透明背景を実現させるために自作render関数に渡す
    render(renderer,stage);
    //renderer.render(stage);//<-もともとあったソースコード
}
function  render(renderer,object)
{
 
    renderer.emit('prerender');
 
    // no point rendering if our context has been blown up!
    if (renderer.gl.isContextLost())
    {
        return;
    }
 
    renderer.drawCount = 0;
 
    renderer._lastObjectRendered = object;
 
    if(renderer._useFXAA)
    {
        renderer._FXAAFilter[0].uniforms.resolution.value.x = renderer.width;
        renderer._FXAAFilter[0].uniforms.resolution.value.y = renderer.height;
        object.filterArea = renderer.renderTarget.size;
        object.filters = renderer._FXAAFilter;
    }
 
    var cacheParent = object.parent;
    object.parent = renderer._tempDisplayObjectParent;
 
    // update the scene graph
    object.updateTransform();
 
    object.parent = cacheParent;
 
    var gl = renderer.gl;
 
    // make sure we are bound to the main frame buffer
    renderer.setRenderTarget(renderer.renderTarget);
 
        gl.clearColor(83.0/255.0, 62.0/255.0, 37.0/255.0, 0.6);//半透明茶色
        gl.clear(gl.COLOR_BUFFER_BIT);
 
    renderer.renderDisplayObject(object, renderer.renderTarget);
 
    renderer.emit('postrender');
};
</script>
<body>
</body>

サポートサイト Wikidot.com