📃
Pixi.js v8 CustomFilter のサンプルコード
pixi.jsのバージョン8でカスタムフィルターのuniforms指定周りが変わっていたので
備忘録としてサンプルコードを書きました。
どなたかの役に立つと嬉しいです。
V8でのCustomFilter
SampleFilter.ts
(旧 v7)
export class SampleFilter extends Filter {
constructor(texture: Texture) {
super(
SampleVert,
SampleFrag,
{ // uniforms
texture: texture,
time: 0,
}
)
}
}
(新 v8)
export class SampleFilter extends Filter {
constructor(texture: Texture) {
super({
glProgram: GlProgram.from({
vertex: SampleVert,
fragment: SampleFrag,
}),
resources: {
texture: texture.source,
uniforms: {
time: {
value: 0.0,
type: 'f32',
},
}
}
});
}
}
今までと変わったところ
・uniformsがresourcesに変更になり、数値はresourcesの中にuniformsを作成してそこに内包するようになりました。
・数値はvalueとtypeの指定が必要になりました。
・textureの受け渡し時に、texture.sourceを渡すようになりました。
V8でのベースシェーダー
SampleVert.vert (ベーシックなバーテックスシェーダー)
in vec2 aPosition;
out vec2 vTextureCoord;
varying vec2 vInputTextureCoord;
uniform vec4 uInputSize;
uniform vec4 uOutputFrame;
uniform vec4 uOutputTexture;
vec4 filterVertexPosition( void )
{
vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;
position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;
position.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;
return vec4(position, 0.0, 1.0);
}
vec2 filterTextureCoord( void )
{
return aPosition * (uOutputFrame.zw * uInputSize.zw);
}
void main(void)
{
gl_Position = filterVertexPosition();
vTextureCoord = filterTextureCoord();
vInputTextureCoord=aPosition;
}
↓ こちらから引用しています。そこにvInputTextureCoordを追加しています。
SampleFrag.frag (そのままのtextureの色を返却するだけのフラグメントシェーダー)
precision mediump float;
varying vec2 vTextureCoord;
varying vec2 vInputTextureCoord;
uniform sampler2D uSampler;
uniform sampler2D texture;
uniform float time;
void main(void) {
vec4 mainColor = texture2D(uSampler, vTextureCoord);
vec4 color = texture2D(texture, vInputTextureCoord);
// uniformで渡されるtextureを使用する場合はcolorを指定する
gl_FragColor = mainColor;
}
※外部から渡したTextureはvInputTextureCoordを使用してください。
最後に
pixi.js v8やり始めたばかりなので、ミスがあれば教えていただけると嬉しいです。
<pixijsのマイグレーションガイド>
Discussion