{ "schemaVersion": "0.11.0", "canonical": "https://www.pystone.net/notes/h5-webgl-framework-comparison/", "atlas": "https://www.pystone.net/?node=h5-webgl-framework-comparison#knowledge-atlas", "markdown": "https://www.pystone.net/notes/h5-webgl-framework-comparison.md", "context": "https://www.pystone.net/notes/h5-webgl-framework-comparison.context.json", "knowledgeVersion": "224c990773de.5fa8af6e39fa", "build": { "siteCommit": "224c990773de166d23a886306577dd90379529ce", "notesCommit": "5fa8af6e39fa3891d1b9b4832bfa6c4e0ecaaf0a", "builtAt": "1970-01-01T00:00:00.000Z", "version": "224c990773de.5fa8af6e39fa" }, "id": "note:h5-webgl-framework-comparison", "slug": "h5-webgl-framework-comparison", "title": "H5 WebGL 应用技术框架差异", "type": "note", "visibility": "public", "idStability": "rename-stable", "author": { "name": "Perrin Yong", "profile": "https://www.pystone.net/profile/" }, "publisher": { "name": "Perrin Yong", "profile": "https://www.pystone.net/profile/" }, "aliases": [], "summary": "H5 WebGL 应用技术框架差异", "contentRole": "unspecified", "isMoc": false, "mocRecognition": "none", "generated": false, "attribution": "unspecified", "domain": "10-计算机、信息技术与工程", "tags": [], "mocs": [], "contentHash": "2dffa964e5dfc8eff9d77b43a1ba2d28f0d917c65e35c18af8bd93855fa961d4", "assets": [], "headings": [ { "depth": 1, "text": "H5 WebGL 应用技术框架差异", "anchor": "h5-webgl-应用技术框架差异", "citation": "https://www.pystone.net/notes/h5-webgl-framework-comparison/#h5-webgl-%E5%BA%94%E7%94%A8%E6%8A%80%E6%9C%AF%E6%A1%86%E6%9E%B6%E5%B7%AE%E5%BC%82" }, { "depth": 2, "text": "1 共性的技术堆栈（逻辑到像素的最短路径）", "anchor": "1-共性的技术堆栈逻辑到像素的最短路径", "citation": "https://www.pystone.net/notes/h5-webgl-framework-comparison/#1-%E5%85%B1%E6%80%A7%E7%9A%84%E6%8A%80%E6%9C%AF%E5%A0%86%E6%A0%88%E9%80%BB%E8%BE%91%E5%88%B0%E5%83%8F%E7%B4%A0%E7%9A%84%E6%9C%80%E7%9F%AD%E8%B7%AF%E5%BE%84" }, { "depth": 2, "text": "2 不同宿主的运行时命名与关键差异", "anchor": "2-不同宿主的运行时命名与关键差异", "citation": "https://www.pystone.net/notes/h5-webgl-framework-comparison/#2-%E4%B8%8D%E5%90%8C%E5%AE%BF%E4%B8%BB%E7%9A%84%E8%BF%90%E8%A1%8C%E6%97%B6%E5%91%BD%E5%90%8D%E4%B8%8E%E5%85%B3%E9%94%AE%E5%B7%AE%E5%BC%82" }, { "depth": 2, "text": "3 典型共性 vs. 差异——快速备忘", "anchor": "3-典型共性-vs-差异快速备忘", "citation": "https://www.pystone.net/notes/h5-webgl-framework-comparison/#3-%E5%85%B8%E5%9E%8B%E5%85%B1%E6%80%A7-vs-%E5%B7%AE%E5%BC%82%E5%BF%AB%E9%80%9F%E5%A4%87%E5%BF%98" }, { "depth": 2, "text": "4 小结", "anchor": "4-小结", "citation": "https://www.pystone.net/notes/h5-webgl-framework-comparison/#4-%E5%B0%8F%E7%BB%93" } ], "claims": [], "outgoing": [], "incoming": [ { "id": "note:game-graphics-and-runtime", "title": "游戏图形与运行时", "url": "https://www.pystone.net/notes/game-graphics-and-runtime/", "atlas": "https://www.pystone.net/?node=game-graphics-and-runtime#knowledge-atlas", "label": "游戏图形与运行时", "origin": "explicit", "humanReviewed": true, "context": "WebGL中的“H5 WebGL 应用技术框架差异”导航项", "citation": "https://www.pystone.net/notes/game-graphics-and-runtime/#webgl" } ], "contentMarkdown": "# H5 WebGL 应用技术框架差异\n\n# H5 WebGL 应用技术框架差异\n\n下面把 **“浏览器 WebGL 应用”** 与 **三大国内小程序容器（微信 / 抖音 / 支付宝）** 放在同一张剖面图里，先讲 **共性技术栈**，再用对照表说明 **宿主-层差异、运行时命名**。\n\n---\n\n## 1 共性的技术堆栈（逻辑到像素的最短路径）\n\n```text\nJS / WebAssembly ‒‒ V8 / JSCore / QuickJS … (语言运行时)\n │\n │ WebGL 1-API (≈ OpenGL ES 2.0)\n ▼\n浏览器 / 小程序内核 (命令转译、状态校验) (宿主运行时)\n ▼\nGPU 驱动 (OpenGL ES / Metal / ANGLE / Vulkan-GL) (操作系统层)\n ▼\n帧缓冲 → 显示器\n```\n\n| 层 | 100 % 共用的协议/格式 | 典型差异点 |\n| ----------- | -------------------------------------- | ------------------------------------- |\n| JavaScript | ES5-ES2020 语法、TypedArray、Promise、Fetch | 小程序需 ES5（子域）、是否支持 `SharedArrayBuffer` |\n| WebAssembly | 字节码格式＆MVP 指令集 | 是否启用 *Threads* / *SIMD*、内存上限 |\n| WebGL 1/2 | Khronos 规范 + GLSL ES | ASTC 压缩纹理扩展、`WEBGL_lose_context` 是否可用 |\n| GPU Driver | OpenGL ES 2/3 → ANGLE、Metal → WebGPU | 厂商 Bug、Watch-Dog 超时阈值 |\n| 宿主运行时^ | WebView / Mini-Game Runtime | 私有 JS-Bridge、生命周期、资源/包体限制 |\n\n^“宿主运行时”就是你问的 **Host**——对浏览器是 **WebView**，对小程序是各家 **小游戏 / WebGL Runtime**（见 §2）。\n\n## 2 不同宿主的运行时命名与关键差异\n\n| 宿主 | JS / Wasm 引擎(渲染进程) | 宿主内核 / 官方称谓 | 典型限制 (截至 2025-05) |\n| ----------------------- | ---------------------------------- | -------------------------------------------- | ----------------------------------------------------------------------------------- |\n| **浏览器 (Chrome / Edge)** | **V8 + WasmCore** | **Blink** | 全特性；可用 SharedArrayBuffer+Threads（COOP/COEP） |\n| **Safari / WKWebView** | **JavaScriptCore + b3 Wasm** | **WebKit** | 没有 ANGLE，纹理扩展少；无 SAB |\n| **微信小程序 / 小游戏** | **V8 (Android)+ JSCore (iOS)** | **X5-TBS 内核**（Android）**WKWebView**（iOS） | · 包体 ≤ 20 MB+分包· 基础库 < 2.24 无 SIMD· Worker 默认关闭，需 `\"minigame-thread\": true` |\n| **抖音小程序 / 小游戏** | **Hermes-Lite → V8** | **Zeus / Byte-WebView** | · 业务域名白名单（`web-view` 组件）([Open Douyin Developer][1])· 包体 ≤ 16 MB；Worker 需审批 |\n| **支付宝小程序** | **QuickJS fork → V8 切换中** | **Nebula-Kernel** | · `navigator.gpu` / WebGPU 关闭· 缓存分区对外域资源 5 MB |\n| **头条 H5-小游戏 SDK** | **V8** | **TTGame Runtime** | · 必须 `ttDownloader` 托管资源下载· 仅 Android 支持 SAB |\n\n> **命名指引**\n> *在文档里描述时可统一写成：*\n> **“宿主运行时 (Host Runtime)”** = JS/Wasm 引擎 + 小程序／WebView Bridge\n> **“浏览器内核 (Browser Engine)”** = Blink / WebKit / X5 / Zeus / Nebula\n> 二者加上 **GPU 驱动** 和 **操作系统**，才组成完整渲染链。\n\n---\n\n## 3 典型共性 vs. 差异——快速备忘\n\n| 维度 | 共性 | 差异示例 |\n| ---------- | ------------------------------------------------- | --------------------------------------------------------------------------------- |\n| **加载** | `import('xxx.wasm') / fetch()` | 微信先下载 `.wasm.br`，再自解压或要求关压缩 |\n| **生命周期** | `window.onfocus/blur`、`pagehide` | 微信小游戏有 `wx.onShow/onHide`；抖音是 `tt.onAppShow` |\n| **文件系统** | `MEMFS`, `IndexedDB (IDBFS)` | 微信 `wx` `file://`、抖音 `tt` `file://` 私有沙盒 |\n| **线程** | `Worker` / `Pthreads` | 需在小程序 `game.json` 打开开关；iOS-WeChat 仍无 Worker |\n| **调试** | Chrome DevTools `webglcontextlost`, `performance` | 小程序 DevTools 另有 “JS 分析”“内存” 标签页 |\n| **包体** | 浏览器无限制（CDN） | 微信 20 MB*主包*、64 MB 总包；支付宝 14 MB；抖音 16 MB |\n| **私有 API** | 无 | 微信 `wx.getSystemInfoSync()`、抖音 `tt.miniProgram.postMessage()`、支付宝 `my.tradePay()` |\n\n---\n\n## 4 小结\n\n* **核心公约**：所有宿主都跑 **相同的 WebGL 1/2 API 与 Wasm**；差异主要在 **上层 Runtime（JS 引擎、线程、包体、私有 Bridge）** 和 **下层 GPU 驱动**。\n* **宿主称谓**：\n\n * 浏览器 = **WebView / Browser Engine**\n * 微信 = **WeChat Mini-Game Runtime (X5 / JSCore)**\n * 抖音 = **Zeus Runtime**\n * 支付宝 = **Nebula Kernel**\n* 做跨宿主框架时：\n\n 1. **业务逻辑 & 渲染** 尽量纯 WebGL + Wasm。\n 2. 把 **文件系统 / 生命周期 / 下载** 等差异包装成一层 *PlatformAdapter*（例如 `Adapter.wx.ts`），便于做条件编译或运行时切换。\n\n有了这些“技术雷区导航”，团队就能对症做 **资源分包、线程开关、Bridge 封装** 等适配策略，最大程度地让同一套 WebGL/Wasm 资产跑遍各大宿主而不重写核心逻辑。\n\n[1]: https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/open-capacity/web-view \"web-view 网页容器_抖音开放平台\"\n" }