将纹理传递到PIXI.js中的片段着色器

Question

如何使用PIXI.js在片段着色器中传递和混合纹理？我有一套这样的制服：

uniforms = {
uResolution: new PIXI.Point(800, 600),
texture: { value: new PIXI.Texture.from('img link here')}
}

我有这个碎片着色器：

#ifdef GL_ES
precision mediump float;
#endif
// Uniforms from Javascript
uniform vec2 uResolution;
uniform float uScrollProgress;
// The texture is defined by PixiJS
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform sampler2D texture;

void main() {
// Normalized coordinates
vec2 uv = gl_FragCoord.xy / uResolution.xy;
vec4 pixel = texture2D(texture, vTextureCoord);
gl_FragColor = pixel;
}

例如，我应该在片段着色器中做什么来在屏幕上绘制纹理？我现在的例子中有一个错误：

Uncaught TypeError: texture.castToBaseTexture is not a function

Answer 1

着色器正在尝试读取名为uSampler的纹理，但从未创建该统一名称。相反，您将统一命名为texture，该名称从未在着色器代码中调用。看起来简单地重命名你的制服就能解决你的问题：

uniforms = {
uResolution: new PIXI.Point(800, 600),
uSampler: new PIXI.Texture.from('img link here')
}

Answer 2

以下是Pixi.js在着色器中渲染纹理的示例

// Create a pixi instance
const app = new PIXI.Application({ width: 800, height: 800 });
document.body.appendChild(app.view);
// Create the container that we will apply the shader to
var container = new PIXI.Container();
app.stage.addChild(container);

// Bring in some images
const spriteForShader = new PIXI.Sprite.from('https://assets.codepen.io/292864/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=1&width=512')
// This image is a random image from imgur (which has CORS enabled so Codepen can grab it)
const skyrimComic = new PIXI.Sprite.from('https://i.imgur.com/6BheBL1.jpeg')
// Note: The container must be rendering something in order for the shader to show,
// which is why we add this sprite to it.  It is a different sprite than spriteForShader
// to prove that the shader is rendering the spriteForShader ONLY via the texture uniform
// and not because it's a child.  Try removing the filter to see what it looks like without the
// shader applied
container.addChild(skyrimComic);
var shaderCode = `
varying vec2 vTextureCoord;
uniform sampler2D uTexture;
void main(void) {
gl_FragColor = texture2D(uTexture, vTextureCoord);
// Set the red to 0 just to show that the shader is having an effect
// this will make the texture render without any red
gl_FragColor.r = 0.0;
}
`;
var uniforms = {
// Pass the texture to the shader uniform
// "uTexture" could be named whatever you want
uTexture: spriteForShader.texture
}
var simpleShader = new PIXI.Filter('',shaderCode,uniforms);
container.filters = [simpleShader]

看看它在Codepen 上的工作

你的问题是，你传递的对象内部有纹理，而不是纹理。