在 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: { value: new PIXI.Texture.from('img link here')}
}

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

passing textures to fragment shader in PIXI.js

javascript

pixi.js