PIXI.jsv7Shader.from()使用详解

本篇文章向大家介绍《PIXI.js v7 Shader.from() 使用教程》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

PIXI.js 7 已移除 `Shader` 类的构造函数调用方式，`PIXI.Shader.from()` 现为静态工厂方法，需直接调用而非 `new PIXI.Shader.from(...)`，否则会抛出 `TypeError`。

在 PIXI.js v7 中，PIXI.Shader 不再是一个可被 new 实例化的类，而是完全重构为一个纯静态工具类。这意味着 PIXI.Shader.from() 不再是构造函数，而是一个返回已配置 Shader 实例的工厂方法。这是 v7 为统一 API 设计、提升类型安全与运行时性能所做的一项重要变更（类似 PIXI.Texture.from()、PIXI.Graphics.from() 等模式）。

✅ 正确写法（v7+）

// ✅ 正确：直接调用静态方法，不使用 new
const material = PIXI.Shader.from(null, shaderCode, uniforms);

❌ 错误写法（v6 及之前兼容，v7 报错）

// ❌ 错误：v7 中 PIXI.Shader 无构造函数，new 会触发 TypeError
const material = new PIXI.Shader.from(null, shaderCode, uniforms); // Uncaught TypeError: PIXI.Shader.from is not a constructor

? 为什么文档看似“没变”？
官方文档中 Shader.from() 的签名未调整措辞（如未明确标注 “static factory method”），但其底层实现已彻底去除了类实例化逻辑。API 参考页仍保留该方法，但语义已从“构造器”转变为“创建器”。

其他注意事项

• GLSL 版本适配：v7 默认使用 WebGL2，着色器代码需声明 #version 300 es（若使用 fragment shader），并改用 in/out 替代 attribute/varying，主函数签名改为 void main() → out vec4 fragColor。
• Uniform 类型校验更严格：确保 uniforms 对象中的值类型与 GLSL 声明一致（例如 res: [w, h] 应为 Float32Array 或普通数组，但推荐显式 new Float32Array([w, h])）。
• 纹理绑定顺序：v7 中 Shader.from() 会自动处理纹理单元分配，但需确保传入的 texture 和 normal 均已完成加载（建议用 await PIXI.Texture.from(url) 或监听 loaded 事件）。

完整修复示例（片段节选）

// ✅ v7 兼容写法
const material = PIXI.Shader.from(
  null, // vertex shader (null → 使用默认)
  shaderCode,
  {
    tex: texture,
    norm: normal,
    res: new Float32Array([window.innerWidth, window.innerHeight]),
    light: new Float32Array([0, 0, 0.3, 1.0])
  }
);

const mesh = new PIXI.Mesh(geometry, material);
app.stage.addChild(mesh);

? 总结：升级到 PIXI.js v7 后，请全局搜索项目中所有 new PIXI.Shader.from(...) 并删除 new 关键字；同时建议检查着色器语法与资源加载流程，以充分发挥 v7 的性能与类型优势。

理论要掌握，实操不能落！以上关于《PIXI.jsv7Shader.from()使用详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！