0

0

PIXI.js v7 中 PIXI.Shader.from() 的正确用法详解

霞舞

霞舞

发布时间:2026-01-05 15:50:02

|

897人浏览过

|

来源于php中文网

原创

PIXI.js v7 中 PIXI.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 的性能与类型优势。

动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包

下载

相关专题

更多
javascriptvoid(o)怎么解决
javascriptvoid(o)怎么解决

javascriptvoid(o)的解决办法:1、检查语法错误;2、确保正确的执行环境;3、检查其他代码的冲突;4、使用事件委托;5、使用其他绑定方式;6、检查外部资源等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

174

2023.11.23

java中void的含义
java中void的含义

本专题整合了Java中void的相关内容,阅读专题下面的文章了解更多详细内容。

94

2025.11.27

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

510

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

244

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

253

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

5244

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

471

2023.09.01

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

206

2023.09.04

漫蛙2入口地址合集
漫蛙2入口地址合集

本专题整合了漫蛙2入口汇总,阅读专题下面的文章了解更多详细内容。

162

2026.01.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 8.1万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号