前提・実現したいこと
pixi.jsのシェーダーでテクスチャを読み込んで、RGBの値にアクセスすると、テクスチャにアルファがかかってる場合にRGAにアルファが乗算済みの状態で入力されてしまいます。
初期化パラメータには transparent:'notMultiplied' という設定もあるのですが、うまく効いてくれません。
実験用のソースコード
javascript
1 2 // 'notmultiply' つけて初期化 3 var app = new PIXI.Application(800, 600, { 4 backgroundColor : 0xcccccc, 5 transparent: 'notMultiplied' 6 }); 7 document.body.appendChild(app.view); 8 9 // アルファ0.5,カラー赤でまるを描画 ( 画面左側に描画 ) 10 var graphic = new PIXI.Graphics(); 11 graphic.alpha = 0.5; 12 graphic.beginFill(0xff0000); 13 graphic.drawCircle(100,100,100); 14 graphic.endFill(); 15 app.stage.addChild(graphic); 16 17 // 丸のグラフィックをテクスチャとして使用したメッシュを作成 ( 画面右側に描画 ) 18 var mesh = new PIXI.mesh.Mesh( graphic.generateCanvasTexture() ); 19 mesh.position.set(300,100); 20 app.stage.addChild(mesh); 21 22 // MeshRenderer の シェーダを変更して、乗算済みになってることが確認できるようにする 23 app.renderer.plugins.mesh.shader = new PIXI.Shader( 24 app.renderer.gl, 25 // vertex shader はオリジナルと同じものをコピー 26 ` 27 attribute vec2 aVertexPosition; 28 attribute vec2 aTextureCoord; 29 30 uniform mat3 projectionMatrix; 31 uniform mat3 translationMatrix; 32 uniform mat3 uTransform; 33 34 varying vec2 vTextureCoord; 35 36 void main(void) { 37 gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); 38 vTextureCoord = (uTransform * vec3(aTextureCoord, 1.0)).xy; 39 } 40 `, 41 42 // fragment shader を変更し、テクスチャのRGBのみ使用するように。 43 ` 44 varying vec2 vTextureCoord; 45 uniform vec4 uColor; 46 uniform sampler2D uSampler; 47 48 void main(void) { 49 //gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; <- remove 50 gl_FragColor = vec4(texture2D(uSampler, vTextureCoord).rgb, 1.0); 51 } 52 ` 53 ); 54 55 // 描画 56 app.render();
結果
本当はこうなってほしい
試したこと
ここではグラフィックスをテクスチャとして使用しましたが、context2dのcanvasにアルファを持たせて描画したものをソースにテクスチャを作成しても同じでした。
試してはいませんが、Filterのシェーダでも同じになるっぽいようなことを書いている人もいました。
テクスチャをGPGPUにも使いたいため、RGBの値が変更された状態で入力されてしまうと困ってしまいます。
もとのRGBAをそのまま保持して入力する方法をご存知でしたら教えて頂けると幸いです。

あなたの回答
tips
プレビュー