質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

GLSL

GLSL (OpenGL Shading Language) はC言語をベースとしたシェーディング言語です。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

Q&A

0回答

2908閲覧

Pixi.jsのテクスチャにシェーダーから読み込むと、乗算済み(premultiplied)の状態になってしまう。

MutsuyukiTanaka

総合スコア24

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

GLSL

GLSL (OpenGL Shading Language) はC言語をベースとしたシェーディング言語です。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

0グッド

0クリップ

投稿2018/10/22 08:25

前提・実現したいこと

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をそのまま保持して入力する方法をご存知でしたら教えて頂けると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問