将纹理传递给 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，但您从未创建过该统一名称。相反，您命名了您的 uniform texture，它永远不会在您的着色器代码中调用。看起来简单地重命名你的制服就可以解决你的问题：uniforms = {     uResolution: new PIXI.Point(800, 600),     uSampler: new PIXI.Texture.from('img link here')}

Answer 2

这是 Pixi.js 在着色器内渲染纹理的示例// Create a pixi instanceconst app = new PIXI.Application({ width: 800, height: 800 });document.body.appendChild(app.view);// Create the container that we will apply the shader tovar container = new PIXI.Container();app.stage.addChild(container);// Bring in some imagesconst 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 appliedcontainer.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 上工作你的问题是你传递的是一个内部有纹理的对象，而不是纹理。分享编辑跟随2022 年 7 月 25 日 15:44编辑这是 Pixi.js 在着色器内渲染纹理的示例// Create a pixi instanceconst app = new PIXI.Application({ width: 800, height: 800 });document.body.appendChild(app.view);// Create the container that we will apply the shader tovar container = new PIXI.Container();app.stage.addChild(container);// Bring in some imagesconst 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 appliedcontainer.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 上工作你的问题是你传递的是一个内部有纹理的对象，而不是纹理。分享编辑跟随2022 年 7 月 25 日 15:44编辑 这是 Pixi.js 在着色器内渲染纹理的示例// Create a pixi instanceconst app = new PIXI.Application({ width: 800, height: 800 });document.body.appendChild(app.view);// Create the container that we will apply the shader tovar container = new PIXI.Container();app.stage.addChild(container);// Bring in some imagesconst 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 appliedcontainer.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 上工作你的问题是你传递的是一个内部有纹理的对象，而不是纹理。分享编辑跟随2022 年 7 月 25 日 15:44编辑  这是 Pixi.js 在着色器内渲染纹理的示例// Create a pixi instanceconst app = new PIXI.Application({ width: 800, height: 800 });document.body.appendChild(app.view);// Create the container that we will apply the shader tovar container = new PIXI.Container();app.stage.addChild(container);// Bring in some imagesconst 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 appliedcontainer.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 上工作你的问题是你传递的是一个内部有纹理的对象，而不是纹理。