PixiJS 渲染循環(huán)Render Loop深入解析從 Ticker 到 GPU 繪制的每一幀【免費(fèi)下載鏈接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.項(xiàng)目地址: https://gitcode.com/gh_mirrors/pi/pixijs導(dǎo)讀渲染循環(huán)Render Loop是 PixiJS 引擎的心臟它負(fù)責(zé)每幀驅(qū)動(dòng)用戶邏輯、更新場(chǎng)景圖Scene Graph變換、執(zhí)行視口剔除Culling并最終把顯示對(duì)象批量提交給 WebGL / WebGPU 完成繪制。本文以倉(cāng)庫(kù)內(nèi) render-loop.md 為核心骨架結(jié)合 Ticker、TickerPlugin、Culler 等源碼實(shí)現(xiàn)完整還原一幀從開(kāi)始到上屏的內(nèi)部時(shí)序并給出暫停/限幀/手動(dòng)渲染等實(shí)戰(zhàn)控制手段。讀完本文你將理解app.ticker、deltaTime、onRender、cullable這些 API 背后各自的執(zhí)行時(shí)機(jī)與優(yōu)先級(jí)從而寫(xiě)出幀率獨(dú)立、結(jié)構(gòu)清晰的 PixiJS 應(yīng)用。一、總體概覽一幀內(nèi)發(fā)生的三件事與傳統(tǒng) Web 開(kāi)發(fā)中僅在事件觸發(fā)時(shí)才重繪的模式不同PixiJS 采用持續(xù)動(dòng)畫(huà)循環(huán)continuous animation loop只要應(yīng)用運(yùn)行且 Ticker 處于激活狀態(tài)每一幀都會(huì)依次完成下面三個(gè)階段Ticker 回調(diào)執(zhí)行用戶邏輯——運(yùn)行通過(guò)ticker.add()/app.ticker.add()注冊(cè)的所有監(jiān)聽(tīng)器更新游戲狀態(tài)與動(dòng)畫(huà)參數(shù)場(chǎng)景圖更新變換與剔除——從根節(jié)點(diǎn)app.stage向下遍歷重算每個(gè)對(duì)象的局部/世界變換并對(duì)屏幕外的可剔除對(duì)象關(guān)閉渲染渲染發(fā)生GPU 繪制——渲染器遍歷顯示列表、批量打包繪制指令batcher、上傳幾何體/紋理/Uniform最后發(fā)出 GPU 繪制命令。這個(gè)循環(huán)以requestAnimationFrame為節(jié)拍器反復(fù)執(zhí)行直到調(diào)用app.ticker.stop()或應(yīng)用銷毀為止。二、Step 1Ticker——渲染循環(huán)的驅(qū)動(dòng)器2.1 三個(gè)時(shí)間單位的正確用法Ticker 在每幀回調(diào)中通過(guò)參數(shù)暴露三種時(shí)間信息源碼 Ticker.ts 中的類型注釋與文檔給出了明確分工屬性類型語(yǔ)義典型用途ticker.deltaTime無(wú)量綱標(biāo)量縮放后的幀增量60 FPS 下約為1.0幀率無(wú)關(guān)動(dòng)畫(huà)sprite.rotation 0.1 * deltaTimeticker.deltaMS毫秒經(jīng)過(guò)minFPS上限截?cái)嗖磗peed縮放后的毫秒數(shù)基于真實(shí)時(shí)間的計(jì)算如progress deltaMS / durationticker.elapsedMS毫秒未截?cái)?、未縮放的原始幀間隔性能測(cè)量、原始幀時(shí)統(tǒng)計(jì)三者的計(jì)算關(guān)系在 update() 中一目了然先保存未截?cái)嗟膃lapsedMS再用_maxElapsedMS由minFPS反推截?cái)?、乘以speed最后換算成deltaMS與deltaTime deltaMS * Ticker.targetFPMS。默認(rèn)Ticker.targetFPMS 0.06對(duì)應(yīng) 60 FPS見(jiàn) Ticker.ts因此1 / 0.06 ≈ 16.67ms即目標(biāo)幀時(shí)長(zhǎng)。2.2 監(jiān)聽(tīng)器的注冊(cè)、優(yōu)先級(jí)與一次性回調(diào)Ticker.add(fn, context?, priority?)會(huì)把回調(diào)掛進(jìn)一個(gè)按優(yōu)先級(jí)降序排列的鏈表_addListener中l(wèi)istener.priority current.priority時(shí)插到前面見(jiàn) Ticker.ts。倉(cāng)庫(kù)定義了五個(gè)內(nèi)置優(yōu)先級(jí)常量const.ts常量值用途UPDATE_PRIORITY.INTERACTION50EventSystem交互事件最先執(zhí)行UPDATE_PRIORITY.HIGH25AnimatedSprite等高層更新UPDATE_PRIORITY.NORMAL0ticker.add()默認(rèn)優(yōu)先級(jí)UPDATE_PRIORITY.LOW-25Application的渲染渲染放最后UPDATE_PRIORITY.UTILITY-50PrepareBase預(yù)備系統(tǒng)最后執(zhí)行這一點(diǎn)意義重大渲染是以UPDATE_PRIORITY.LOW注冊(cè)進(jìn) Ticker 的見(jiàn) TickerPlugin.ts 的ticker.add(this.render, this, UPDATE_PRIORITY.LOW)——也就是說(shuō)先更新邏輯、后渲染畫(huà)面的順序正是由優(yōu)先級(jí)保證的。此外ticker.addOnce()注冊(cè)的回調(diào)只在下一幀執(zhí)行一次TickerListener的once標(biāo)志適合做延遲初始化ticker.remove()會(huì)按fn context匹配并刪除同名多次添加會(huì)全部移除當(dāng)鏈表清空時(shí)自動(dòng)cancelAnimationFrame停止空轉(zhuǎn)?；A(chǔ)用法示例// 幀率無(wú)關(guān)的旋轉(zhuǎn)動(dòng)畫(huà) app.ticker.add((ticker) { bunny.rotation ticker.deltaTime * 0.1; }); // 基于毫秒的進(jìn)度動(dòng)畫(huà) app.ticker.add((ticker) { const progress Math.min(1, ticker.deltaMS / 2000); sprite.alpha progress; }); // 指定優(yōu)先級(jí)物理更新先于普通邏輯 app.ticker.add( (ticker) physics.update(ticker.deltaTime), undefined, UPDATE_PRIORITY.HIGH ); // 一次性回調(diào)下一幀執(zhí)行一次 app.ticker.addOnce(() console.log(only next frame));2.3 幀請(qǐng)求的按需調(diào)度Ticker并不是無(wú)腦每幀都調(diào)用requestAnimationFrame。源碼 Ticker.ts 中的_requestIfNeeded與_startIfPossible表明只有當(dāng) Ticker 已啟動(dòng)started且鏈表非空存在監(jiān)聽(tīng)器時(shí)才會(huì)申請(qǐng)下一幀停止或清空監(jiān)聽(tīng)器后會(huì)調(diào)用_cancelIfNeeded取消已申請(qǐng)的幀。這也是Ticker.shared供AnimatedSprite、VideoSource等共享autoStart true與Ticker.system供PrepareBase核心時(shí)序使用兩個(gè)全局實(shí)例存在的意義——它們各自管理獨(dú)立的幀調(diào)度。三、Step 2場(chǎng)景圖更新——變換、onRender 與剔除3.1 從根到葉的層次遍歷PixiJS 用一棵以app.stage為根的層次化場(chǎng)景圖表示所有可見(jiàn)對(duì)象詳見(jiàn) scene-graph.mdx。渲染前引擎會(huì)遍歷這棵樹(shù)重算世界變換把 position / rotation / scale 從父節(jié)點(diǎn)逐級(jí)傳播到子節(jié)點(diǎn)父級(jí)的位移、旋轉(zhuǎn)、透明度會(huì)按層級(jí)累積到子級(jí)執(zhí)行onRender回調(diào)對(duì)每個(gè)顯示對(duì)象運(yùn)行按幀邏輯跳過(guò)屏外對(duì)象當(dāng) 剔除culling 開(kāi)啟時(shí)屏幕外的子樹(shù)不再參與繪制。需要注意 v8 的變換模型與舊版本的區(qū)別Container.updateTransform()在 v8 中已不再是每幀必被調(diào)用的鉤子見(jiàn) onRenderMixin.ts 中的注釋它現(xiàn)在只是一個(gè)帶參的 setter 式工具方法Container.ts。想要每幀對(duì)某個(gè)對(duì)象執(zhí)行邏輯正確姿勢(shì)是下面的onRender。3.2 onRender掛在對(duì)象上的按幀鉤子onRender是把逐幀邏輯直接綁定到顯示對(duì)象自身的替代方案避免為單一對(duì)象引入全局 Ticker 回調(diào)sprite.onRender () { sprite.rotation 0.01; }; // 移除回調(diào) sprite.onRender null;底層實(shí)現(xiàn)onRenderMixin.ts會(huì)通過(guò)renderGroup?.addOnRender(this)把該容器注冊(cè)到所屬 RenderGroup 的_onRenderContainers列表中渲染時(shí)逐幀遍歷調(diào)用置null時(shí)則執(zhí)行removeOnRender從列表中摘除。從源碼結(jié)構(gòu)看onRender的觸發(fā)與 RenderGroup 的指令生成流程綁定適合做對(duì)象級(jí)的輕量每幀更新GifSprite等內(nèi)置對(duì)象也借助該機(jī)制驅(qū)動(dòng)自身動(dòng)畫(huà)見(jiàn) GifSprite.ts。3.3 視口剔除讓屏外對(duì)象不再白畫(huà)對(duì)于橫版卷軸游戲這類大量對(duì)象在屏幕外的場(chǎng)景不剔除意味著 GPU 仍會(huì)為不可見(jiàn)像素執(zhí)行繪制。PixiJS 內(nèi)置視口剔除啟用方式與參數(shù)對(duì)應(yīng) scene-graph.mdx// 對(duì)精靈或容器啟用剔除 sprite.cullable true; // 子對(duì)象不會(huì)超出父級(jí)邊界時(shí)跳過(guò)遞歸子剔除以節(jié)省開(kāi)銷 container.cullableChildren false; // 提供自定義剔除區(qū)域避免每幀重新測(cè)量對(duì)象包圍盒 sprite.cullArea new Rectangle(0, 0, 200, 200);剔除的算法核心在 Culler.cull()遞歸遍歷cullable且measurable的容器用包圍盒與視口矩形做相交測(cè)試不相交則把culled置為true跳過(guò)渲染當(dāng)cullableChildren為false時(shí)不再下探子級(jí)。Culler 的單測(cè)覆蓋了可剔除對(duì)象出屏不渲染 / 入屏恢復(fù)渲染 / 非 cullable 恒渲染 / cullArea 自定義邊界等行為Culler.test.ts。Culler 與渲染循環(huán)的銜接點(diǎn)在 CullerPlugin.ts應(yīng)用安裝該插件后render會(huì)在渲染前先執(zhí)行Culler.shared.cull(this.stage, this.renderer.screen, updateTransform)。注意插件選項(xiàng)culler.updateTransform ! true時(shí)默認(rèn)由插件內(nèi)部處理變換更新只有顯式開(kāi)啟updateTransform時(shí)才跳過(guò)這一步——這是為了避免與手動(dòng)渲染流程重復(fù)更新變換。四、Step 3渲染場(chǎng)景——保留模式與指令提交4.1 render() 的執(zhí)行管線場(chǎng)景圖就緒后渲染器從app.stage出發(fā)走完整個(gè)繪制流程。AbstractRenderer.render()AbstractRenderer.ts展示了調(diào)用鏈的輪廓入口與參數(shù)歸一render(options)接受{ container, target, clearColor, clear, transform }形式的渲染選項(xiàng)兼容 v8 之前render(container, renderTexture)的舊簽名默認(rèn)目標(biāo)與清屏目標(biāo)默認(rèn)是this.view.renderTarget清屏顏色默認(rèn)取自background.colorRgba、clearBeforeRender決定是否每幀清屏可見(jiàn)性短路options.container.visible false時(shí)直接返回跳過(guò)整個(gè)渲染確保 RenderGroup調(diào)用container.enableRenderGroup()——渲染器只認(rèn) RenderGroup普通容器會(huì)被提升為渲染組Runner 事件序列依次觸發(fā)prerender → renderStart → render → renderEnd → postrender各渲染子系統(tǒng)批處理、蒙版、濾鏡等通過(guò)這套 Runner 管線協(xié)作。4.2 批處理與上傳減少繪制調(diào)用進(jìn)入各 RenderPipe 后渲染器會(huì)盡量批量打包繪制調(diào)用把共享紋理/狀態(tài)的精靈合并進(jìn)同一個(gè)批次batcher用一次 GPU draw call 畫(huà)完顯著降低drawElements次數(shù)上傳幾何體、紋理與 Uniform臟數(shù)據(jù)才重新上傳未變化的資源直接復(fù)用 GPU 端緩沖發(fā)出 GPU 命令最終由 WebGL 或 WebGPU 后端執(zhí)行繪制。所有渲染都是保留模式retained mode對(duì)象一旦加入場(chǎng)景圖就會(huì)持續(xù)存在并逐幀重繪除非你顯式removeChild/destroy這與每次重繪都重建畫(huà)面的立即模式形成鮮明對(duì)比。4.3 一個(gè)值得注意的架構(gòu)分層從 RenderGroup.ts 的類注釋可以讀出 v8 的優(yōu)化思路RenderGroup 負(fù)責(zé)為根容器及其子樹(shù)生成指令集InstructionSet并監(jiān)聽(tīng)子樹(shù)變化——只有發(fā)生變化的容器childrenToUpdate/childrenRenderablesToUpdate才重建或增量更新指令數(shù)據(jù)未變化的部分直接復(fù)用。這意味著每幀遍歷場(chǎng)景圖在 v8 中并不是無(wú)差別的全量重算而是結(jié)構(gòu)化的臟檢查 增量更新。想進(jìn)一步了解可閱讀 render-groups.md 與渲染器說(shuō)明文檔。五、完整幀生命周期圖把上面三步驟串起來(lái)一幀的完整時(shí)序如下requestAnimationFrame │ [Ticker._tick()] // 見(jiàn) src/ticker/Ticker.ts#L273 │ ├─ 計(jì)算幀間隔elapsedMS → deltaMS → deltaTime ├─ 按優(yōu)先級(jí)調(diào)用用戶 Ticker 監(jiān)聽(tīng)器 ├─ CullerPlugin視口剔除標(biāo)記屏外對(duì)象 │ └─ 剔除前按需更新世界變換 ├─ 遍歷場(chǎng)景圖 / RenderGroup │ ├─ sprite.onRender遍歷到對(duì)象時(shí)觸發(fā) │ ├─ 增量更新世界變換與指令集 │ └─ 跳過(guò) culled 對(duì)象 └─ renderer.render(stage) ├─ prerender / renderStart ├─ 批處理幾何體、紋理、Uniform ├─ 發(fā)出 GPU 繪制命令WebGL / WebGPU └─ renderEnd / postrender六、控制循環(huán)暫停、限幀與完全手動(dòng)渲染6.1 暫停與恢復(fù)Ticker 的stop()/start()會(huì)走_(dá)cancelIfNeeded/_requestIfNeeded真正取消/申請(qǐng)動(dòng)畫(huà)幀Ticker.tsapp.ticker.stop(); // 暫停渲染與所有回調(diào) app.ticker.start(); // 恢復(fù)循環(huán)對(duì)應(yīng)地應(yīng)用初始化選項(xiàng)autoStart決定循環(huán)是否自動(dòng)啟動(dòng)默認(rèn)true當(dāng)autoStart: false時(shí)需在合適時(shí)機(jī)手動(dòng)app.start()。sharedTicker選項(xiàng)默認(rèn)false則決定app.ticker是新建專屬實(shí)例還是復(fù)用全局Ticker.shared——多個(gè)實(shí)例共享同一 Ticker 可保持更新同步但會(huì)失去獨(dú)立控制更新順序的靈活性相關(guān)選項(xiàng)說(shuō)明見(jiàn) TickerPlugin.ts。6.2 限制幀率以省電移動(dòng)端可通過(guò)maxFPS封頂幀率minFPS則用于防止長(zhǎng)時(shí)間卡頓后一次補(bǔ)很多幀導(dǎo)致的跳躍app.ticker.maxFPS 30; // 上限 30 FPS省電 app.ticker.minFPS 10; // 幀間隔超過(guò) 100ms 時(shí)截?cái)?delta默認(rèn)即為 10兩者的內(nèi)部映射關(guān)系在 Ticker.ts 的 setter 中實(shí)現(xiàn)maxFPS換算為最小幀間隔_minElapsedMS 1 / (fps / 1000)minFPS換算為最大允許幀間隔_maxElapsedMS 1000 / minFPS默認(rèn) 100ms二者互相鉗制以保證上限不低于下限。需要特別留意maxFPS會(huì)改變實(shí)測(cè)FPS因?yàn)橄拗屏藢?shí)際渲染節(jié)奏而minFPS只截?cái)郿eltaTime/deltaMS的計(jì)算值、不影響實(shí)測(cè)幀率speed屬性默認(rèn)1可對(duì)整個(gè) ticker 做慢動(dòng)作0.5或快進(jìn)2.0時(shí)間縮放。6.3 完全手動(dòng)渲染無(wú) Ticker若希望把渲染主動(dòng)權(quán)完全交給自己的requestAnimationFrame例如與自研物理循環(huán)深度耦合app.ticker.stop(); function customLoop() { requestAnimationFrame(customLoop); app.renderer.render(app.stage); // 手動(dòng)渲染支持 { container, target, clearColor } 選項(xiàng) } customLoop();手動(dòng)模式下請(qǐng)自行保證變換與剔除的更新時(shí)機(jī)可參考 CullerPlugin 的做法或自行調(diào)用Culler.shared.cull(stage, renderer.screen)否則可能出現(xiàn)邏輯已更新、畫(huà)面未刷新的錯(cuò)位。七、性能實(shí)踐小結(jié)動(dòng)畫(huà)參數(shù)用deltaTime無(wú)量綱標(biāo)量真實(shí)計(jì)時(shí)用deltaMS/elapsedMS避免高刷屏與低幀率設(shè)備上動(dòng)畫(huà)快慢不一大量對(duì)象的逐幀邏輯優(yōu)先掛onRender全局邏輯用ticker.add并善用優(yōu)先級(jí)交互INTERACTION→ 動(dòng)畫(huà)HIGH→ 常規(guī)NORMAL→ 渲染LOW→ 預(yù)備UTILITY橫版卷軸等大量屏外對(duì)象場(chǎng)景開(kāi)啟cullable并用cullArea緩存邊界、cullableChildren false跳過(guò)遞歸以降低每幀測(cè)量開(kāi)銷對(duì)象少時(shí)剔除本身也有成本需按實(shí)際場(chǎng)景取舍可參考 performance-tips.md移動(dòng)端用maxFPS限幀、必要時(shí)stop()暫停配合autoStart/sharedTicker選項(xiàng)按需組織循環(huán)保留模式 RenderGroup 臟檢查意味著場(chǎng)景圖未變化的部分不會(huì)重復(fù)上傳與重建指令保持場(chǎng)景樹(shù)穩(wěn)定、避免每幀大規(guī)模增刪節(jié)點(diǎn)能讓渲染循環(huán)保持高效。【免費(fèi)下載鏈接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.項(xiàng)目地址: https://gitcode.com/gh_mirrors/pi/pixijs創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考