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

【问题标题】：passing textures to fragment shader in PIXI.js在 PIXI.js 中将纹理传递给片段着色器
【发布时间】：2020-09-26 20:16:01
【问题描述】：

如何使用 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

【问题讨论】：

不确定为什么要包含 [three.js] 标记。我已经删除了，因为这个问题与 pixi.js 相关，而不是 three.js
嘿 Spawni，看看你用来设置这个片段着色器的 PixiJS 代码会很有帮助。特别是，默认的批处理渲染器使用一组非常有限的制服来提高速度，并且不会在不重新调整渲染流程的情况下使用自定义制服。如果您可以将您的问题放入可运行的示例中，这将有助于回答您的问题。

标签： javascript pixi.js

【解决方案1】：

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

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

【讨论】：

我认为，uSampler 默认是由 PIXIjs 提供的。因为我以前有一个带有一些精灵的画布。我想在这个画布上绘制新的纹理，但我不知道该怎么做