← 返回文章流

Chrome 157 的 HTML-in-Canvas 實戰:把網頁字卡畫進 WebGPU,主執行緒少了七成

這篇記錄作者用 Chrome 157 正式推出的 HTML-in-Canvas,把首頁土星旁的 DOM 字卡畫進跑在 worker 裡的 WebGPU canvas。正式版 API 改過名字,網路上多數教學仍是舊寫法。three.js 內建的 HTMLTexture 既用舊命名、又假設 canvas 在主執行緒,只能自己寫上傳流程。第一次只搬小標註,唯一的好處是主執行緒卡住時字仍貼著衛星。量測後發現大頭是字卡每幀重建 CSS 轉場,先在所有瀏覽器修掉,再把字卡也搬進去,主執行緒工作從 460 降到 145 ms/s,樣式重算少了 92%。最後是字變成貼圖之後的效果試作:被吸進衛星、再倒著吐出來。

来自 宙と木作者主页
在原博客阅读全文 (新标签页打开)

以上内容来自博客订阅源,版权归原作者。关注作者后可以在 关注列表 第一时间查看作者文章。

一起聊聊 0

尊重不同观点

还没有评论。欢迎分享第一个想法。

RSS SUBSCRIPTIONS

选择 RSS 订阅

把博客汇的文章添加到你常用的阅读器。

关注文章 RSS 订阅本订阅需要登录后使用