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