{ "schemaVersion": "0.11.0", "canonical": "https://www.pystone.net/notes/webgl-unity3d-framework-quick-reference/", "atlas": "https://www.pystone.net/?node=webgl-unity3d-framework-quick-reference#knowledge-atlas", "markdown": "https://www.pystone.net/notes/webgl-unity3d-framework-quick-reference.md", "context": "https://www.pystone.net/notes/webgl-unity3d-framework-quick-reference.context.json", "knowledgeVersion": "224c990773de.5fa8af6e39fa", "build": { "siteCommit": "224c990773de166d23a886306577dd90379529ce", "notesCommit": "5fa8af6e39fa3891d1b9b4832bfa6c4e0ecaaf0a", "builtAt": "1970-01-01T00:00:00.000Z", "version": "224c990773de.5fa8af6e39fa" }, "id": "note:webgl-unity3d-framework-quick-reference", "slug": "webgl-unity3d-framework-quick-reference", "title": "WebGL及Unity3D 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": "WebGL显示链路", "contentRole": "unspecified", "isMoc": false, "mocRecognition": "none", "generated": false, "attribution": "unspecified", "domain": "10-计算机、信息技术与工程", "tags": [], "mocs": [], "contentHash": "0935a4e5e04fc7b173c383f394ed4c6422d8750e9a523e2d01a133a55ae9b6db", "assets": [ { "reference": "assets/web-platform-stack.png", "url": "/media/d2801687418797f17545.png", "mediaType": "image/png", "contentHash": "d2801687418797f175453484d8307ff39eec2b2c7e5b3b358b2cca89671d626e", "byteLength": 88557, "width": 1804, "height": 705 } ], "headings": [ { "depth": 3, "text": "WebGL显示链路", "anchor": "webgl显示链路", "citation": "https://www.pystone.net/notes/webgl-unity3d-framework-quick-reference/#webgl%E6%98%BE%E7%A4%BA%E9%93%BE%E8%B7%AF" }, { "depth": 3, "text": "Unity3D与.wasm", "anchor": "unity3d与wasm", "citation": "https://www.pystone.net/notes/webgl-unity3d-framework-quick-reference/#unity3d%E4%B8%8Ewasm" }, { "depth": 3, "text": "Unity WebGL 小游戏 vs 纯微信小游戏：技术栈对照", "anchor": "unity-webgl-小游戏-vs-纯微信小游戏技术栈对照", "citation": "https://www.pystone.net/notes/webgl-unity3d-framework-quick-reference/#unity-webgl-%E5%B0%8F%E6%B8%B8%E6%88%8F-vs-%E7%BA%AF%E5%BE%AE%E4%BF%A1%E5%B0%8F%E6%B8%B8%E6%88%8F%E6%8A%80%E6%9C%AF%E6%A0%88%E5%AF%B9%E7%85%A7" }, { "depth": 1, "text": "WebGL及Unity3D WebGL框架速览", "anchor": "webgl及unity3d-webgl框架速览", "citation": "https://www.pystone.net/notes/webgl-unity3d-framework-quick-reference/#webgl%E5%8F%8Aunity3d-webgl%E6%A1%86%E6%9E%B6%E9%80%9F%E8%A7%88" }, { "depth": 2, "text": "1. 浏览器为何跨平台？", "anchor": "1-浏览器为何跨平台", "citation": "https://www.pystone.net/notes/webgl-unity3d-framework-quick-reference/#1-%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%BA%E4%BD%95%E8%B7%A8%E5%B9%B3%E5%8F%B0" }, { "depth": 2, "text": "2. WebGL 为什么跨平台？", "anchor": "2-webgl-为什么跨平台", "citation": "https://www.pystone.net/notes/webgl-unity3d-framework-quick-reference/#2-webgl-%E4%B8%BA%E4%BB%80%E4%B9%88%E8%B7%A8%E5%B9%B3%E5%8F%B0" }, { "depth": 2, "text": "3. .wasm、JS、HTML 如何一起跑？", "anchor": "3-wasmjshtml-如何一起跑", "citation": "https://www.pystone.net/notes/webgl-unity3d-framework-quick-reference/#3-wasmjshtml-%E5%A6%82%E4%BD%95%E4%B8%80%E8%B5%B7%E8%B7%91" }, { "depth": 2, "text": "4. 为何同一 WebGL 可跑在微信/抖音/FB？", "anchor": "4-为何同一-webgl-可跑在微信抖音fb", "citation": "https://www.pystone.net/notes/webgl-unity3d-framework-quick-reference/#4-%E4%B8%BA%E4%BD%95%E5%90%8C%E4%B8%80-webgl-%E5%8F%AF%E8%B7%91%E5%9C%A8%E5%BE%AE%E4%BF%A1%E6%8A%96%E9%9F%B3fb" } ], "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中的“WebGL及Unity3D WebGL框架速览”导航项", "citation": "https://www.pystone.net/notes/game-graphics-and-runtime/#webgl" } ], "contentMarkdown": "### WebGL显示链路\n\n```text\nHTML/CSS/DOM(可选)\n │\n ▼ JS 引擎(V8/SpiderMonkey…)\nJavaScript 业务逻辑 ──► **WebGL API (ES 2.0/3.0 语义)**\n │ │ ↳ 生成 GPU 命令缓冲\n ▼ ▼\n 浏览器驱动层 ─────────► GPU 驱动(OpenGL ES / Metal)\n │\n ▼\n 帧缓冲 → 显示器\n```\n\n* **核心要点**\n 1. HTML / DOM 只是创建 `` 的容器；WebGL 本身完全脱离 DOM 渲染流程。\n 2. WebGL 1/2 只是 **OpenGL ES 2.0/3.0 的 JavaScript 绑定**。API 调用被 JS 引擎打包为 GPU 命令。\n 3. 所有顶点/片元运算都在 **开发者自编写的 GLSL ES 着色器** 中完成；没有固定功能管线。\n\n---\n\n### Unity3D与`.wasm`\n\n| 目标 | Unity 的做法 | 结果 |\n| -------------------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |\n| **让 C#/C++ 逻辑在浏览器跑** | IL2CPP 把 C# ➜ C++ ➜ 交给 **Emscripten** 编译成 **WebAssembly (.wasm)** | 把 CPU 密集逻辑、物理、ECS 等全部搬进高性能 Wasm VM |\n| **调用浏览器 API** | Emscripten 生成 **Glue JS (`framework.js`)**，负责：• 加载 `.wasm`• 把 JS 字符串 ↔ Wasm 内存• 把 Wasm 函数导出给 JS（`Module.xxx`） | JS ↔ Wasm 像互调 DLL；渲染仍通过 `gl.*` |\n| **保证性能与安全** | Wasm 经过 JIT → 机器码，沙盒隔离 | 速度接近原生，避免 JS 动态开销 |\n\n> **`.wasm` 处在链路里的位置**\n\n\n```makefile\nJavaScript Glue (framework.js)\n\t│ ↕ FFI(import/export)\n\t▼\nWebAssembly VM (unity.wasm)\n\t│ ↕ 调用 WebGL API / Audio / Input\n\t▼\nGPU 驱动 …\n```\n\n\n> * **渲染指令**：Wasm 内部调用 Emscripten‑提供的 `glBindBuffer` 等函数，这些又回到浏览器的 WebGL 实现；因此 `.wasm` 主要承担 **CPU 侧游戏逻辑**，GPU 命令仍走 WebGL。\n> * **生命周期**：下载 `.wasm` → `WebAssembly.instantiateStreaming()` ➜ `Module.onRuntimeInitialized` → 游戏开始。([Unity Documentation][1])\n\n### Unity WebGL 小游戏 vs 纯微信小游戏：技术栈对照\n\n| 维度 | **Unity WebGL 转小游戏** | **原生微信小游戏（小游戏 IDE）** |\n| -------- | ------------------------------------------------------------------------------------ | --------------------------------------------- |\n| **主语言** | C# (逻辑) + Wasm C++(编译后) + 少量 JS Glue | JavaScript/TypeScript |\n| **运行时** | `unity.wasm` + `framework.js` + **minigame‑unity‑webgl‑transform** 适配层 ([GitHub][2]) | WeChat Game Runtime（基于 QQ Game Engine），直接跑 JS |\n| **渲染层** | Unity 自带渲染管线 ➜ WebGL context（单 Canvas） | 微信提供 `wx.createCanvas()` ➜ WebGL/2D context |\n| **脚本热更** | IL2CPP 编译期静态；热更需 AssetBundle / Lua / C# 热更新框架 | JS 热重载、分包加载 |\n| **资源管线** | Unity Importer ➜ AssetBundle ➜ LZ4 压缩 | IDE & 自定义打包；纹理可 KTX2, Basis |\n| **包体体积** | `.wasm` + 引擎数据 5‑15 MB 起；首包常借微信「分包加载」拆分 | JS+资源，一般 < 4 MB 首包，动态拉取其余 |\n| **多线程** | WebAssembly Pthreads ⚠ 仅在特定浏览器/小游戏版本开放，需 `SharedArrayBuffer` 安全头；小游戏端仍在灰度 | Worker 线程可做下载/解析，但 WebGL context 只能在主线程 |\n| **平台能力** | 通过转换工具桥接到 `wx.*` API (支付、分享、云开发) | 直接调 `wx.*` |\n| **调试** | 浏览器 DevTools + WeChat DevTools (查看 wasm) | WeChat DevTools (调 JS) |\n\n> **使用场景取舍**\n>\n> * 如果你已有完整 Unity 项目、需要重用 C# 生态→ 适配方案节省大量人天。\n> * 若从零做轻量小游戏、包体/加载时长极敏感→ JS/TS 原生小游戏更轻。\n\n[1]: https://docs.unity3d.com/2021.3/Documentation/Manual/webgl-technical-overview.html?utm_source=chatgpt.com \"Unity - Manual: Advanced overview\"\n[2]: https://github.com/wechat-miniprogram/minigame-unity-webgl-transform?utm_source=chatgpt.com \"wechat-miniprogram/minigame-unity-webgl-transform - GitHub\"\n\n\n# WebGL及Unity3D WebGL框架速览\n```mermaid\ngraph TD\n %% ───────── 物理硬件 ─────────\n subgraph Hardware\n CPU([CPU])\n GPU([GPU])\n end\n\n %% ───────── 操作系统抽象层 ─────────\n subgraph OS[\"Windows • macOS • Linux • Android …\"]\n Kernel[\"内核 & 驱动(文件、进程、GPU Driver)\"]\n GraphicsAPI[\"平台图形 APIDirectX · OpenGL · Metal · Vulkan\"]\n end\n Hardware --> Kernel\n Kernel --> GraphicsAPI\n\n %% ───────── 浏览器可移植代码库 ─────────\n subgraph Browser[\"浏览器通用代码库 (C/C++)\"]\n Engine[\"排版 & 渲染引擎Blink / WebKit / Gecko\"]\n JSVM[\"JavaScript VMV8 / SpiderMonkey / JSC\"]\n NetStack[\"网络栈HTTP/2 · TLS · Cache\"]\n WebGL_Impl[\"WebGL 实现 + ANGLEOpenGL ES 语义 → 平台 API\"]\n end\n GraphicsAPI --> WebGL_Impl\n Engine --> WebGL_Impl\n JSVM --> Engine\n NetStack --> Engine\n\n %% ───────── Web 内容运行时 ─────────\n subgraph Runtime[\"Web 内容\"]\n HTML_Node[\"HTML / CSS\"]\n JS_Node[\"JavaScript\"]\n Wasm_Node[\"WebAssembly\"]\n end\n HTML_Node --> Engine\n JS_Node --> JSVM\n Wasm_Node --> JSVM\n\n %% ───────── 宿主基座 / WebView ─────────\n subgraph Hosts[\"宿主基座 (App WebView)\"]\n WeChat[\"WeChat Mini‑Game\"]\n TikTok[\"TikTok In‑App Browser\"]\n FB[\"Facebook In‑App Browser\"]\n end\n Engine -. 嵌入 .-> Hosts\n Hosts -. 调用系统 WebView .-> Browser\n\n\n```\n\n![Web 平台与 WebGL 运行栈](assets/web-platform-stack.png)\n\n---\n\n> 浏览器跨平台的根本是 **“通用代码 + 薄适配”**，而 WebGL 跨平台靠 **标准 JS API + ANGLE 翻译层**；无论是桌面浏览器还是嵌入式 WebView（微信、抖音、Facebook），只要内核遵守同一规范并映射到本地 GPU 驱动，**同一份 Web 内容 & WebGL 代码即可无差别运行**。\n\n## 1. 浏览器为何跨平台？\n\n| 关键点 | 说明 |\n| ---------------- | -------------------------------------------------------------------------------------------------- |\n| **同一份 C/C++ 代码** | Chrome/Firefox/Safari 内核 95 % 以上用标准 C/C++ 实现。只需为不同 OS **重新编译（Clang/LLVM、MSVC、Xcode）**，就能得到本机可执行文件。 |\n| **平台抽象层** | 内核中有 *Platform* 模块，把文件、线程、网络、窗口、GPU 等统一抽象；各 OS 只写少量适配。 |\n| **标准化 Web 语法** | HTML5、CSSOM、ECMAScript 由 W3C/WHATWG/TC39 统一；渲染和 JS 行为在所有操作系统一致。 |\n\n---\n\n## 2. WebGL 为什么跨平台？\n\n| 链条 | 作用 |\n| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |\n| **WebGL 规范** | 定义 *OpenGL ES 2/3* 的 JS 绑定；写死函数名、状态机和 GLSL ES 行为。 |\n| **浏览器实现层** | Blink/Gecko 不直接调用 OpenGL；而是先经过 **ANGLE**——一个把 OpenGL ES 调到 **DirectX / Metal / Vulkan / EGL** 的翻译库。所以 *同一段 JS WebGL 代码* 在任何系统都能落到可用的底层 API。 |\n| **GPU 驱动负责最后一步** | 各厂商驱动把平台图形 API 指令变成本机指令；因此只要系统有合规 GPU 驱动，WebGL 就能跑。 |\n\n---\n\n## 3. `.wasm`、JS、HTML 如何一起跑？\n\n1. **HTML/CSS** ➜ 排版引擎（树 + 盒模型）。\n2. **JS** ➜ JS VM (V8…) **解释 → JIT**，调用 DOM/Canvas/WebGL。\n3. **WebAssembly** ➜ JS VM 中的 Wasm Runtime **验证 → baseline JIT → 优化 JIT** ➜ 本机机器码。\n4. **JS ↔ Wasm ↔ Web APIs (含 WebGL)** 通过导入/导出函数与共享内存交互。\n\n> JS 与 Wasm 都 **跑在同一 JS 引擎里**，因此跨平台能力继承自浏览器本身。\n\n---\n\n## 4. 为何同一 WebGL 可跑在微信/抖音/FB？\n\n* **这些 App 内嵌系统 WebView**（Android WebView、iOS WKWebView、Chromium Embedded），本质还是浏览器内核 ➜ 承袭同一跨平台链条。\n* 宿主只额外提供 JS Bridge (`wx.*`, `tiktok.*`) → 业务层调用，不影响 WebGL API。\n* 仅需注意 **WebView 版本差异**（低版本可能缺 WebGL 2 / 线程 / WebAssembly SIMD）。\n\n---\n" }