PixiJS 渲染系统完全指南WebGL / WebGPU / Canvas 三种渲染器的选型、配置与实战【免费下载链接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.项目地址: https://gitcode.com/gh_mirrors/pi/pixijs导读PixiJS 的渲染器Renderer是整套引擎的核心它把场景图Scene Graph中的Container逐帧绘制到 Canvas 上底层分别基于WebGL/WebGL2、WebGPU或Canvas 2D三种 API。本文以官方文档 src/rendering/docs/rendering.md 为主线结合仓库源码深入讲解三种渲染器的差异、autoDetectRenderer()的自动选型机制、render()的完整参数含 RenderTexture、mip level 等高级用法以及resize()、generateTexture()、resetState()、destroy()等日常高频 API。读完本文你将能根据目标环境正确选型渲染器并掌握向纹理、mip 层级渲染和与其他渲染库混用的完整方案。渲染器是什么模块化 GPU 引擎PixiJS 渲染器不是单一大块代码而是由一组可插拔的 System系统与 RenderPipe渲染管道组合而成的 GPU 加速引擎。它们分工协作纹理上传、渲染管线、视口管理、事件分发等各自由独立模块负责。所有渲染器都继承自同一个基类AbstractRenderer见 AbstractRenderer.ts因此对外暴露了一致的方法与属性.render(container)—— 绘制场景.resize(w, h, resolution?)—— 调整视口.clear(options)—— 清空渲染目标.generateTexture(target)—— 从显示对象生成纹理.resetState()—— 重置 GPU 状态缓存.destroy()—— 释放全部资源除此之外所有渲染器共享一套通用系统。从 SharedSystems.ts 可以看到默认注入的共享系统包括系统职责ViewSystem管理主视口通常是一个 CanvasBackgroundSystem管理背景色与透明度GlobalUniformSystem管理 GPU 上的全局 uniformTextureGCSystem自动回收 GPU 上不再使用的纹理GenerateTextureSystem从任意 Container 生成纹理ExtractSystem从显示对象提取像素数据HelloSystem启动时在控制台打印版本信息而 WebGL / WebGPU / Canvas 三种后端则在此基础上追加各自专属的系统如GlContextSystem、GpuDeviceSystem、CanvasContextSystem并通过扩展机制ExtensionType.WebGLSystem、WebGPUSystem、CanvasSystem等见 WebGLRenderer.ts允许第三方包动态注入自己的系统与管道。三种渲染器类型与选型建议官方文档 rendering.md 给出了三种渲染器的定位对比渲染器说明状态WebGLRenderer默认渲染器基于 WebGL/WebGL2稳定且支持广泛推荐生产使用WebGPURenderer基于 WebGPU API多数场景更快仍在成熟中实验性CanvasRenderer基于 HTML Canvas 2D 上下文的兜底渲染器实验性注意WebGPU 渲染器功能上已趋于完整但各浏览器实现存在差异可能引发非预期行为。生产环境请优先使用 WebGL 渲染器。从源码角度看三者的类型标识在 types.ts 中定义且支持按位组合export enum RendererType { WEBGL 0b001, WEBGPU 0b010, CANVAS 0b100, BOTH 0b011 }这个位掩码非常实用例如某个 Filter 同时兼容 WebGL 与 WebGPU就可以声明compatibleRenderers RendererType.WEBGL | RendererType.WEBGPU内部据此决定是否启用该效果。各后端如何组装自己WebGL在共享系统之上追加GlContextSystem管理 GL 上下文与扩展、GlBufferSystem、GlTextureSystem、GlRenderTargetSystem、GlShaderSystem、GlStateSystem、GlStencilSystem、GlColorMaskSystem等约 13 个 GL 专属系统见 WebGLRenderer.ts渲染管道采用GlBatchAdaptor、GlMeshAdaptor、GlGraphicsAdaptor作为后端适配器。WebGPU追加GpuDeviceSystem管理 GPU 设备、GpuEncoderSystem、GpuBufferSystem、GpuTextureSystem、PipelineSystem、BindGroupSystem等见 WebGPURenderer.ts并额外使用GpuUniformBatchPipe做 uniform 批量上传。Canvas仅追加CanvasContextSystem、CanvasLimitsSystem、CanvasTextureSystem、CanvasRenderTargetSystem四个轻量系统见 CanvasRenderer.ts管道使用CanvasBatchAdaptor与CanvasGraphicsAdaptor。创建渲染器自动检测与直接构造推荐autoDetectRenderer()绝大多数应用应当使用autoDetectRenderer()让 PixiJS 根据当前环境自动挑选最佳后端。其源码位于 autoDetectRenderer.ts核心逻辑如下import { autoDetectRenderer } from pixi.js; // 首选 webgpu失败后按默认优先级回退 const renderer await autoDetectRenderer({ preference: webgpu, // 或 webgl / canvas }); // 只允许指定渲染器等价于对其他类型的黑名单 const renderer await autoDetectRenderer({ preference: [webgl, canvas], // webgpu 被完全排除 });源码中的preference处理规则值得细说传入单个字符串如webgpu该渲染器被排在最前优先尝试其余类型按默认优先级[webgl, webgpu, canvas]依次作为回退。实际检测顺序中 WebGL 是默认首选因为它是当前最成熟、最安全的 API未来 WebGPU 更稳定普及后会被提升为优先项源码注释已明确这一演进方向。传入数组如[webgl, canvas]仅按数组顺序尝试列出的类型未列出的类型被完全排除可当作黑名单使用。不传preference直接使用默认优先级顺序。检测过程会调用isWebGPUSupported()与isWebGLSupported()做能力探测其中 WebGL 检测会参考failIfMajorPerformanceCaveat选项默认false见 AbstractRenderer.ts。若所有候选均不可用函数会抛出No available renderer for the current environment。一个容易被忽略的细节autoDetectRenderer对选中后端的代码使用动态import()按需加载见 autoDetectRenderer.ts以优化初始包体积。官方建议搭配支持代码分割code splitting的现代打包器把渲染器代码拆成独立 chunk仅在需要时加载。按后端分别传参autoDetectRenderer还支持针对不同后端传入不同的专属配置未命中的配置会被自动剔除源码在选型后执行delete finalOptions.webgpu / webgl / canvasOptionsconst renderer await autoDetectRenderer({ width: 800, height: 600, webgpu: { antialias: true, backgroundColor: red }, webgl: { antialias: true, backgroundColor: green }, });直接构造特定渲染器当你知道目标环境例如单元测试固定使用 WebGL或需要 Canvas 兜底时可以直接构造import { WebGLRenderer } from pixi.js; const renderer new WebGLRenderer(); await renderer.init(options);注意init()是异步的在init内部会加载环境扩展、执行后端 loaderWebGLLoader等见 AbstractRenderer.ts注入系统与管道然后逐个await各系统的初始化。因此必须await renderer.init()之后才能渲染。如果采用自动导入扩展但希望完全手动控制引入哪些模块可以使用skipExtensionImports: true见 SharedSystems.ts随后自己import graphics、import mesh、import text等。渲染一帧render()详解基础用法import { Container } from pixi.js; const container new Container(); renderer.render(container);进阶选项import { Matrix } from pixi.js; renderer.render({ container: myContainer, // 要绘制的场景根节点 clear: true, // 渲染前是否清屏 transform: new Matrix(), // 应用到容器的变换矩阵 });render()的选项定义在 AbstractRenderer.ts 中完整参数包括参数类型说明containerContainer要绘制的场景根节点必填targetRenderSurface渲染目的地如RenderTexture缺省为屏幕transformMatrix应用到容器的变换矩阵缺省时使用容器的localTransformclearCLEAR_OR_BOOL清屏模式clearColorColorSource清屏颜色缺省取背景色mipLevelnumber渲染到纹理目标的指定 mip 层级默认 0高级layernumber渲染到数组纹理的指定图层默认 0高级flipYboolean反转 Y 方向默认false高级几个值得展开的源码行为若传入的container不可见visible falserender()会直接返回不做任何绘制见 AbstractRenderer.ts。渲染前 PixiJS 会把容器强制转成 render group调用container.enableRenderGroup()因为渲染器只渲染 render group。一次render()调用会依次触发prerender → renderStart → render → renderEnd → postrender五组 runner 事件见 AbstractRenderer.ts系统与第三方插件可挂在这些生命周期上。flipY: true适用于向纹理渲染 3D 内容后直接给材质采样用的场景它会同时翻转投影和绕序/剔除方向保证纹理中 3D 内容的背面剔除仍然正确省去消费端每次采样时的翻转。兼容提示v7 时代的render(container, { renderTexture: rt })双参数写法在 v8 已被标记弃用应改用render({ container, target: rt })。仓库示例 rendering_render-texture_basic.ts 展示了向 RenderTexture 逐帧渲染的完整流程。向纹理与 mip 层级渲染高级渲染到 RenderTextureimport { RenderTexture, Sprite } from pixi.js; const rt RenderTexture.create({ width: 300, height: 300, scaleMode: linear, resolution: 1, }); const sprite new Sprite(rt); stage.addChild(sprite); // 每一帧把 container 绘制进纹理 app.ticker.add(() { renderer.render({ container, target: rt }); });RenderTexture.create()的完整选项可在 RenderTexture.ts 附近查看除宽高、resolution、scaleMode外还支持mipLevelCount、autoGenerateMipmaps、arrayLayerCount等纹理源级配置。渲染到指定 mip 层级当目标是纹理支撑的渲染面时可以指定mipLevel把内容渲染到目标底层纹理存储的特定 mip 层级上。绝大多数应用用不到它主要服务于自定义 LOD细节层次系统或手动生成 mipmapimport { RenderTexture } from pixi.js; const rt RenderTexture.create({ width: 256, height: 256, mipLevelCount: 4, autoGenerateMipmaps: false, // 关闭自动生成改为手动渲染各层级 }); // 渲染到 mip 1即 128x128 renderer.render({ container, target: rt, mipLevel: 1, });这里有一个容易踩坑的细节当target是带frame的Texture例如图集里的子纹理时frame以mip 0 的像素空间解释渲染到mipLevel 0时会被等比缩放并做钳制处理。也就是说子纹理区域在低层级 mip 上不一定完整覆盖需自行确认尺寸换算。调整尺寸resize()renderer.resize(window.innerWidth, window.innerHeight);resize(desiredScreenWidth, desiredScreenHeight, resolution?)支持可选的第三参数字幕分辨率device pixel ratio。源码实现中见 AbstractRenderer.ts调用ViewSystem.resize()调整画布物理尺寸触发resize事件EventEmitter事件参数为屏幕宽、高、分辨率若显式传入的分辨率与之前不同还会触发resolutionChangerunner让各系统如滤镜缩放同步更新。从显示对象生成纹理generateTexture()generateTexture()可以把任意显示对象Sprite、Container、Graphics等离线渲染成一张可复用的纹理适合把复杂的静态内容缓存成纹理、动态拼合图集或生成缩略图import { Sprite } from pixi.js; const sprite new Sprite(); const texture renderer.generateTexture(sprite);其底层实现位于 GenerateTextureSystem.ts支持丰富的选项const texture renderer.generateTexture({ target: container, // 要生成的显示对象 frame: new Rectangle(0, 0, 100, 100), // 裁剪区域缺省为容器局部包围盒 resolution: 2, // 生成纹理分辨率缺省取渲染器分辨率 clearColor: #ff0000, // 渲染前清屏颜色支持 hex / 字符串 / [r,g,b,a] antialias: true, // 是否抗锯齿可能影响性能 defaultAnchor: { x: 0.5, y: 0.5 }, // 生成纹理的默认锚点 textureSourceOptions: { scaleMode: linear }, // 底层纹理源的高级选项 });从源码可以看到几个关键行为未指定frame时使用容器的局部包围盒getLocalBounds并保证最小尺寸不低于1 / resolution避免零尺寸纹理。生成过程本质是一次离屏渲染内部创建RenderTexture用平移矩阵把容器绘制进去renderer.render({ container, transform, target, clearColor })随后调用source.updateMipmaps()。未指定antialias时继承渲染器视口的抗锯齿设置。文档明确提醒生成纹理是相对昂贵的操作应缓存结果注意分辨率与尺寸用完调用texture.destroy(true)释放。与其他渲染库混用resetState()把 PixiJS 与 Three.js 等 WebGL/WebGPU 库放在同一个页面时每个库都可能留下自己的 GPU 状态绑定的纹理、混合模式、当前 shader彼此冲突会导致画面花屏、对象丢失或混合错误。解决方法是让每个库在渲染前先重置对方留下的状态function render() { threeRenderer.resetState(); threeRenderer.render(scene, camera); pixiRenderer.resetState(); pixiRenderer.render({ container: stage }); requestAnimationFrame(render); } requestAnimationFrame(render);resetState()的实现只是触发resetStaterunner见 AbstractRenderer.ts由GlStateSystem等后端状态系统清除内部缓存。在外部直接操作 WebGL 上下文之后、下一次 PixiJS 渲染之前调用它可以确保内部状态缓存与真实 GPU 状态重新同步AbstractRenderer.ts 的注释对 Three.js 混用场景有完整示例说明。销毁渲染器destroy()renderer.destroy();destroy()会释放所有 GPU 资源、系统、事件监听器与内部状态。源码实现见 AbstractRenderer.ts做了这几件事逆序触发destroyrunner让各系统与管道按依赖顺序完成清理若传入true或{ releaseGlobalResources: true }还会释放全局资源池/缓存GlobalResourceRegistry.release()销毁所有 runner将内部系统哈希表与管道置空调用removeAllListeners()移除渲染器上挂载的全部EventEmitter监听器。销毁后的渲染器不能再用于任何渲染。若你的应用只销毁一次、之后不再创建新渲染器直接destroy()即可若频繁创建/销毁如热切换画布注意destroy(true)会同时清空全局纹理池等共享资源可能影响仍在运行的其他渲染器实例。小结与速查场景推荐做法生产环境、追求稳定autoDetectRenderer()默认 WebGL需要最高性能、环境受控autoDetectRenderer({ preference: webgpu })排除某种后端preference: [webgl, canvas]数组即黑名单单元测试 / 固定环境new WebGLRenderer()await init(options)离线缓存静态内容renderer.generateTexture({ target, ... })与 Three.js 同页混用每帧在各自render()前调用resetState()卸载 / 释放资源renderer.destroy()进一步深入阅读渲染器基类与系统注入机制AbstractRenderer.ts自动选型与按后端传参autoDetectRenderer.ts共享系统清单与skipExtensionImportsSharedSystems.tsWebGL 后端系统组成WebGLRenderer.tsWebGPU 后端系统组成WebGPURenderer.ts纹理生成实现与选项GenerateTextureSystem.ts渲染到 RenderTexture 的完整示例rendering_render-texture_basic.ts渲染器类型位掩码RendererTypetypes.ts【免费下载链接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.项目地址: https://gitcode.com/gh_mirrors/pi/pixijs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
PixiJS 渲染系统完全指南：WebGL / WebGPU / Canvas 三种渲染器的选型、配置与实战
PixiJS 渲染系统完全指南WebGL / WebGPU / Canvas 三种渲染器的选型、配置与实战【免费下载链接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.项目地址: https://gitcode.com/gh_mirrors/pi/pixijs导读PixiJS 的渲染器Renderer是整套引擎的核心它把场景图Scene Graph中的Container逐帧绘制到 Canvas 上底层分别基于WebGL/WebGL2、WebGPU或Canvas 2D三种 API。本文以官方文档 src/rendering/docs/rendering.md 为主线结合仓库源码深入讲解三种渲染器的差异、autoDetectRenderer()的自动选型机制、render()的完整参数含 RenderTexture、mip level 等高级用法以及resize()、generateTexture()、resetState()、destroy()等日常高频 API。读完本文你将能根据目标环境正确选型渲染器并掌握向纹理、mip 层级渲染和与其他渲染库混用的完整方案。渲染器是什么模块化 GPU 引擎PixiJS 渲染器不是单一大块代码而是由一组可插拔的 System系统与 RenderPipe渲染管道组合而成的 GPU 加速引擎。它们分工协作纹理上传、渲染管线、视口管理、事件分发等各自由独立模块负责。所有渲染器都继承自同一个基类AbstractRenderer见 AbstractRenderer.ts因此对外暴露了一致的方法与属性.render(container)—— 绘制场景.resize(w, h, resolution?)—— 调整视口.clear(options)—— 清空渲染目标.generateTexture(target)—— 从显示对象生成纹理.resetState()—— 重置 GPU 状态缓存.destroy()—— 释放全部资源除此之外所有渲染器共享一套通用系统。从 SharedSystems.ts 可以看到默认注入的共享系统包括系统职责ViewSystem管理主视口通常是一个 CanvasBackgroundSystem管理背景色与透明度GlobalUniformSystem管理 GPU 上的全局 uniformTextureGCSystem自动回收 GPU 上不再使用的纹理GenerateTextureSystem从任意 Container 生成纹理ExtractSystem从显示对象提取像素数据HelloSystem启动时在控制台打印版本信息而 WebGL / WebGPU / Canvas 三种后端则在此基础上追加各自专属的系统如GlContextSystem、GpuDeviceSystem、CanvasContextSystem并通过扩展机制ExtensionType.WebGLSystem、WebGPUSystem、CanvasSystem等见 WebGLRenderer.ts允许第三方包动态注入自己的系统与管道。三种渲染器类型与选型建议官方文档 rendering.md 给出了三种渲染器的定位对比渲染器说明状态WebGLRenderer默认渲染器基于 WebGL/WebGL2稳定且支持广泛推荐生产使用WebGPURenderer基于 WebGPU API多数场景更快仍在成熟中实验性CanvasRenderer基于 HTML Canvas 2D 上下文的兜底渲染器实验性注意WebGPU 渲染器功能上已趋于完整但各浏览器实现存在差异可能引发非预期行为。生产环境请优先使用 WebGL 渲染器。从源码角度看三者的类型标识在 types.ts 中定义且支持按位组合export enum RendererType { WEBGL 0b001, WEBGPU 0b010, CANVAS 0b100, BOTH 0b011 }这个位掩码非常实用例如某个 Filter 同时兼容 WebGL 与 WebGPU就可以声明compatibleRenderers RendererType.WEBGL | RendererType.WEBGPU内部据此决定是否启用该效果。各后端如何组装自己WebGL在共享系统之上追加GlContextSystem管理 GL 上下文与扩展、GlBufferSystem、GlTextureSystem、GlRenderTargetSystem、GlShaderSystem、GlStateSystem、GlStencilSystem、GlColorMaskSystem等约 13 个 GL 专属系统见 WebGLRenderer.ts渲染管道采用GlBatchAdaptor、GlMeshAdaptor、GlGraphicsAdaptor作为后端适配器。WebGPU追加GpuDeviceSystem管理 GPU 设备、GpuEncoderSystem、GpuBufferSystem、GpuTextureSystem、PipelineSystem、BindGroupSystem等见 WebGPURenderer.ts并额外使用GpuUniformBatchPipe做 uniform 批量上传。Canvas仅追加CanvasContextSystem、CanvasLimitsSystem、CanvasTextureSystem、CanvasRenderTargetSystem四个轻量系统见 CanvasRenderer.ts管道使用CanvasBatchAdaptor与CanvasGraphicsAdaptor。创建渲染器自动检测与直接构造推荐autoDetectRenderer()绝大多数应用应当使用autoDetectRenderer()让 PixiJS 根据当前环境自动挑选最佳后端。其源码位于 autoDetectRenderer.ts核心逻辑如下import { autoDetectRenderer } from pixi.js; // 首选 webgpu失败后按默认优先级回退 const renderer await autoDetectRenderer({ preference: webgpu, // 或 webgl / canvas }); // 只允许指定渲染器等价于对其他类型的黑名单 const renderer await autoDetectRenderer({ preference: [webgl, canvas], // webgpu 被完全排除 });源码中的preference处理规则值得细说传入单个字符串如webgpu该渲染器被排在最前优先尝试其余类型按默认优先级[webgl, webgpu, canvas]依次作为回退。实际检测顺序中 WebGL 是默认首选因为它是当前最成熟、最安全的 API未来 WebGPU 更稳定普及后会被提升为优先项源码注释已明确这一演进方向。传入数组如[webgl, canvas]仅按数组顺序尝试列出的类型未列出的类型被完全排除可当作黑名单使用。不传preference直接使用默认优先级顺序。检测过程会调用isWebGPUSupported()与isWebGLSupported()做能力探测其中 WebGL 检测会参考failIfMajorPerformanceCaveat选项默认false见 AbstractRenderer.ts。若所有候选均不可用函数会抛出No available renderer for the current environment。一个容易被忽略的细节autoDetectRenderer对选中后端的代码使用动态import()按需加载见 autoDetectRenderer.ts以优化初始包体积。官方建议搭配支持代码分割code splitting的现代打包器把渲染器代码拆成独立 chunk仅在需要时加载。按后端分别传参autoDetectRenderer还支持针对不同后端传入不同的专属配置未命中的配置会被自动剔除源码在选型后执行delete finalOptions.webgpu / webgl / canvasOptionsconst renderer await autoDetectRenderer({ width: 800, height: 600, webgpu: { antialias: true, backgroundColor: red }, webgl: { antialias: true, backgroundColor: green }, });直接构造特定渲染器当你知道目标环境例如单元测试固定使用 WebGL或需要 Canvas 兜底时可以直接构造import { WebGLRenderer } from pixi.js; const renderer new WebGLRenderer(); await renderer.init(options);注意init()是异步的在init内部会加载环境扩展、执行后端 loaderWebGLLoader等见 AbstractRenderer.ts注入系统与管道然后逐个await各系统的初始化。因此必须await renderer.init()之后才能渲染。如果采用自动导入扩展但希望完全手动控制引入哪些模块可以使用skipExtensionImports: true见 SharedSystems.ts随后自己import graphics、import mesh、import text等。渲染一帧render()详解基础用法import { Container } from pixi.js; const container new Container(); renderer.render(container);进阶选项import { Matrix } from pixi.js; renderer.render({ container: myContainer, // 要绘制的场景根节点 clear: true, // 渲染前是否清屏 transform: new Matrix(), // 应用到容器的变换矩阵 });render()的选项定义在 AbstractRenderer.ts 中完整参数包括参数类型说明containerContainer要绘制的场景根节点必填targetRenderSurface渲染目的地如RenderTexture缺省为屏幕transformMatrix应用到容器的变换矩阵缺省时使用容器的localTransformclearCLEAR_OR_BOOL清屏模式clearColorColorSource清屏颜色缺省取背景色mipLevelnumber渲染到纹理目标的指定 mip 层级默认 0高级layernumber渲染到数组纹理的指定图层默认 0高级flipYboolean反转 Y 方向默认false高级几个值得展开的源码行为若传入的container不可见visible falserender()会直接返回不做任何绘制见 AbstractRenderer.ts。渲染前 PixiJS 会把容器强制转成 render group调用container.enableRenderGroup()因为渲染器只渲染 render group。一次render()调用会依次触发prerender → renderStart → render → renderEnd → postrender五组 runner 事件见 AbstractRenderer.ts系统与第三方插件可挂在这些生命周期上。flipY: true适用于向纹理渲染 3D 内容后直接给材质采样用的场景它会同时翻转投影和绕序/剔除方向保证纹理中 3D 内容的背面剔除仍然正确省去消费端每次采样时的翻转。兼容提示v7 时代的render(container, { renderTexture: rt })双参数写法在 v8 已被标记弃用应改用render({ container, target: rt })。仓库示例 rendering_render-texture_basic.ts 展示了向 RenderTexture 逐帧渲染的完整流程。向纹理与 mip 层级渲染高级渲染到 RenderTextureimport { RenderTexture, Sprite } from pixi.js; const rt RenderTexture.create({ width: 300, height: 300, scaleMode: linear, resolution: 1, }); const sprite new Sprite(rt); stage.addChild(sprite); // 每一帧把 container 绘制进纹理 app.ticker.add(() { renderer.render({ container, target: rt }); });RenderTexture.create()的完整选项可在 RenderTexture.ts 附近查看除宽高、resolution、scaleMode外还支持mipLevelCount、autoGenerateMipmaps、arrayLayerCount等纹理源级配置。渲染到指定 mip 层级当目标是纹理支撑的渲染面时可以指定mipLevel把内容渲染到目标底层纹理存储的特定 mip 层级上。绝大多数应用用不到它主要服务于自定义 LOD细节层次系统或手动生成 mipmapimport { RenderTexture } from pixi.js; const rt RenderTexture.create({ width: 256, height: 256, mipLevelCount: 4, autoGenerateMipmaps: false, // 关闭自动生成改为手动渲染各层级 }); // 渲染到 mip 1即 128x128 renderer.render({ container, target: rt, mipLevel: 1, });这里有一个容易踩坑的细节当target是带frame的Texture例如图集里的子纹理时frame以mip 0 的像素空间解释渲染到mipLevel 0时会被等比缩放并做钳制处理。也就是说子纹理区域在低层级 mip 上不一定完整覆盖需自行确认尺寸换算。调整尺寸resize()renderer.resize(window.innerWidth, window.innerHeight);resize(desiredScreenWidth, desiredScreenHeight, resolution?)支持可选的第三参数字幕分辨率device pixel ratio。源码实现中见 AbstractRenderer.ts调用ViewSystem.resize()调整画布物理尺寸触发resize事件EventEmitter事件参数为屏幕宽、高、分辨率若显式传入的分辨率与之前不同还会触发resolutionChangerunner让各系统如滤镜缩放同步更新。从显示对象生成纹理generateTexture()generateTexture()可以把任意显示对象Sprite、Container、Graphics等离线渲染成一张可复用的纹理适合把复杂的静态内容缓存成纹理、动态拼合图集或生成缩略图import { Sprite } from pixi.js; const sprite new Sprite(); const texture renderer.generateTexture(sprite);其底层实现位于 GenerateTextureSystem.ts支持丰富的选项const texture renderer.generateTexture({ target: container, // 要生成的显示对象 frame: new Rectangle(0, 0, 100, 100), // 裁剪区域缺省为容器局部包围盒 resolution: 2, // 生成纹理分辨率缺省取渲染器分辨率 clearColor: #ff0000, // 渲染前清屏颜色支持 hex / 字符串 / [r,g,b,a] antialias: true, // 是否抗锯齿可能影响性能 defaultAnchor: { x: 0.5, y: 0.5 }, // 生成纹理的默认锚点 textureSourceOptions: { scaleMode: linear }, // 底层纹理源的高级选项 });从源码可以看到几个关键行为未指定frame时使用容器的局部包围盒getLocalBounds并保证最小尺寸不低于1 / resolution避免零尺寸纹理。生成过程本质是一次离屏渲染内部创建RenderTexture用平移矩阵把容器绘制进去renderer.render({ container, transform, target, clearColor })随后调用source.updateMipmaps()。未指定antialias时继承渲染器视口的抗锯齿设置。文档明确提醒生成纹理是相对昂贵的操作应缓存结果注意分辨率与尺寸用完调用texture.destroy(true)释放。与其他渲染库混用resetState()把 PixiJS 与 Three.js 等 WebGL/WebGPU 库放在同一个页面时每个库都可能留下自己的 GPU 状态绑定的纹理、混合模式、当前 shader彼此冲突会导致画面花屏、对象丢失或混合错误。解决方法是让每个库在渲染前先重置对方留下的状态function render() { threeRenderer.resetState(); threeRenderer.render(scene, camera); pixiRenderer.resetState(); pixiRenderer.render({ container: stage }); requestAnimationFrame(render); } requestAnimationFrame(render);resetState()的实现只是触发resetStaterunner见 AbstractRenderer.ts由GlStateSystem等后端状态系统清除内部缓存。在外部直接操作 WebGL 上下文之后、下一次 PixiJS 渲染之前调用它可以确保内部状态缓存与真实 GPU 状态重新同步AbstractRenderer.ts 的注释对 Three.js 混用场景有完整示例说明。销毁渲染器destroy()renderer.destroy();destroy()会释放所有 GPU 资源、系统、事件监听器与内部状态。源码实现见 AbstractRenderer.ts做了这几件事逆序触发destroyrunner让各系统与管道按依赖顺序完成清理若传入true或{ releaseGlobalResources: true }还会释放全局资源池/缓存GlobalResourceRegistry.release()销毁所有 runner将内部系统哈希表与管道置空调用removeAllListeners()移除渲染器上挂载的全部EventEmitter监听器。销毁后的渲染器不能再用于任何渲染。若你的应用只销毁一次、之后不再创建新渲染器直接destroy()即可若频繁创建/销毁如热切换画布注意destroy(true)会同时清空全局纹理池等共享资源可能影响仍在运行的其他渲染器实例。小结与速查场景推荐做法生产环境、追求稳定autoDetectRenderer()默认 WebGL需要最高性能、环境受控autoDetectRenderer({ preference: webgpu })排除某种后端preference: [webgl, canvas]数组即黑名单单元测试 / 固定环境new WebGLRenderer()await init(options)离线缓存静态内容renderer.generateTexture({ target, ... })与 Three.js 同页混用每帧在各自render()前调用resetState()卸载 / 释放资源renderer.destroy()进一步深入阅读渲染器基类与系统注入机制AbstractRenderer.ts自动选型与按后端传参autoDetectRenderer.ts共享系统清单与skipExtensionImportsSharedSystems.tsWebGL 后端系统组成WebGLRenderer.tsWebGPU 后端系统组成WebGPURenderer.ts纹理生成实现与选项GenerateTextureSystem.ts渲染到 RenderTexture 的完整示例rendering_render-texture_basic.ts渲染器类型位掩码RendererTypetypes.ts【免费下载链接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.项目地址: https://gitcode.com/gh_mirrors/pi/pixijs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
