SuperAPI AI 工具集

pixijs-custom-rendering

写作与研究

查看项目

更新于 10-16 03:42

技能介绍

用途:在 PixiJS v8 中编写自定义渲染代码,包括自定义着色器、uniform、滤镜、批处理器和底层绘制逻辑。核心是 Shader.from({ gl, gpu, resources }) 将 GLSL 与 WGSL 程序绑定到场景对象,同一着色器可同时面向 WebGL 和 WebGPU。

主要能力:Uniform 存放在带类型的 UniformGroup 中,每个 uniform 必须显式写 { value, type };纹理作为独立资源传入 texture.source 与 texture.source.style,不作为 uniform。支持 UBO 模式(WebGPU 必需,WebGL2+ 可选),仅支持 f32/i32 类型,矩阵只能为浮点,采样器不能放入 UBO;UBO 名称与结构顺序须与着色器布局完全一致。自定义 Filter 使用 Filter.from({ gl, resources }),只需片段着色器,PixiJS 提供默认顶点着色器;需要采样滤镜后方目标时设 blendRequired: true 并使用 uBackTexture。Batcher 可通过 extensions.add 注册自定义批处理。

必要用法:旧的位置参数构造 Shader.from(vertex, fragment, uniforms) 在 v8 已移除。运行时更新 uniform 通过 shader.resources.xxx.uniforms.uTime 赋值;isStatic 的 UBO 需调用 update()。严格 CSP 环境需在启动时 import pixi.js/unsafe-eval 才能使用 UBO 着色器与 WebGPU。

限制与常见错误:UniformGroup 缺 type 会在运行时抛错;u32、采样器放入 UBO、结构与着色器声明不匹配会导致报错或渲染错乱;渲染捆绑包不能跨不同渲染目标重放;geometry.getSize() 自 8.20.0 起废弃,应改用 geometry.vertexCount。相关技能包括 pixijs-filters、pixijs-scene-mesh、pixijs-performance、pixijs-migration-v8。