PIXI.jsでフラグメントシェーダ内でアルファ値を変更できない

PIXI.jsで写真を部分的に透過させるという処理をしたかったのですが、つまずいたのでメモ。

下記のようにただ単純に表示されたもののアルファ値を変更しようとしたのですがうまくいきませんでした。

fragment.glsl

precision mediump float;

varying vec2 vTextureCoord;
uniform sampler2D uSampler;

void main(){
   vec4 color = texture2D(uSampler, vTextureCoord);
   color.w = 0.1;

   gl_FragColor = vec4(color);
}

原因はレンダラーの設定でした。

gl_FragColorの透過を反映させる場合には、レンダラーのオプションでtranparentを指定する必要があるようです。

app.js

this.renderer = new PIXI.autoDetectRenderer(this.width, this.height);

⬇︎

this.renderer = PIXI.autoDetectRenderer(this.width, this.height, {transparent: true});