Zenn
📃

Pixi.js v8 CustomFilter のサンプルコード

2025/02/05に公開

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を追加しています。
https://github.com/pixijs/filters/blob/8276b6f9baf0685b46bae1c731cd8d0388067371/src/defaults/default.vert

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のマイグレーションガイド>
https://pixijs.com/8.x/guides/migrations/v8

Discussion

ログインするとコメントできます