passing textures to fragment shader in PIXI.js

user_14343142 0
Viewed 1020

How to pass and mix textures in fragment shader with PIXI.js? I have a uniforms like this:

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

And I have this fragment shader:

#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;
}

What should I do in fragment shader, for example, to draw my texture on the screen? I have an error in my example now:

Uncaught TypeError: texture.castToBaseTexture is not a function
pixi.js javascript
2 Answers

Your shader is trying to read a texture named uSampler but you never created that uniform name. Instead you named your uniform texture, which is never invoked in your shader code. Looks like simply renaming your uniform would fix your problem:

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

Here is an example of Pixi.js rendering a texture inside of a shader

// 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]

See it working on Codepen

Your problem is that you're passing in an object with a texture inside of it, rather than a texture.

user_44188360
Related