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

Question

如何使用 PIXI.js 在片段着色器中传递和混合纹理？我有这样的制服：uniforms = {      uResolution: new PIXI.Point(800, 600),      texture: { value: new PIXI.Texture.from('img link here')}    }我有这个片段着色器：#ifdef GL_ESprecision mediump float;#endif// Uniforms from Javascriptuniform vec2 uResolution;uniform float uScrollProgress;// The texture is defined by PixiJSvarying 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 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 上工作

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

分享

编辑

跟随

2022 年 7 月 25 日 15:44编辑

这是 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 上工作

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

分享

编辑

跟随

2022 年 7 月 25 日 15:44编辑

 

这是 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 上工作

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

分享

编辑

跟随

2022 年 7 月 25 日 15:44编辑

  

这是 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 上工作

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