Appearance
WebGL 技术选型调研报告
B 站虚拟形象项目背景下，对 WebGL 在移动端的可行性进行系统调研。
调研背景
虚拟形象需要覆盖尽可能多的用户设备。移动端浏览器对 WebGL 的支持情况直接决定了方案的可行性。调研围绕三个核心问题：
- WebGL 在移动端浏览器的兼容性如何？
- Unity 构建的 WebGL 的体积和加载速度？
- WebGL 2.0 的覆盖率？
调研结果
移动端浏览器 WebGL 支持
| 浏览器 | WebGL 1.0 | WebGL 2.0 | 备注 |
|---|---|---|---|
| Chrome Android | ✅ | ✅ | 完全支持 |
| Safari iOS | ✅ | ⚠️ 有限 | 内存限制严格 |
| 微信内置浏览器 | ✅ | ❌ | 仅 WebGL 1.0 |
| 百度浏览器 | ⚠️ | ❌ | 部分低端机不支持 |
| UC 浏览器 | ✅ | ❌ | WebGL 1.0 |
结论：WebGL 1.0 支持率约 90%+，WebGL 2.0 仅约 60%。选择 WebGL 1.0 作为基线。
Unity WebGL 体积与加载速度
| 项目类型 | WASM 体积 | 首次加载 | 内存占用 |
|---|---|---|---|
| 空项目 | ~4MB | ~3s | ~80MB |
| 简单 3D | ~10MB | ~8s | ~150MB |
| 虚拟形象 | ~20MB+ | ~15s | ~300MB+ |
结论：Unity WebGL 在移动端加载慢、内存高，适合高端机。
移动端 WebGL 演示
在 iPhone 8（2017 年发布）上测试 WebGL 虚拟形象：
- Three.js 方案：15fps（可优化到 30fps）
- Unity WebGL：无法加载（内存不足崩溃）
最终建议
采用 Three.js + WebGL 1.0 基线，配合后台机型分级。高端机用高精度模型，低端机用简化模型。
参考截图
（WebGL 兼容性对比、Unity 构建大小、移动端演示 GIF 等原始调研材料保存在 docs/素材/哔哩哔哩/WebGL调研/）
公开版深化
案例定位
WebGL 技术选型调研报告不是孤立笔记，而是渲染与图形能力下的一个可复用案例。它服务于“性能治理与稳定性优化”这条主线，公开版重点保留问题抽象、工程取舍和可复用方法，不暴露内部系统细节。
关键问题
B 站虚拟形象项目背景下，对 WebGL 在移动端的可行性进行系统调研。
这篇文章已经覆盖 调研背景、调研结果、最终建议、参考截图。后续阅读时应重点看三件事：问题如何被定义，方案如何在约束下落地，以及哪些经验可以迁移到下一次类似项目。
企业级产出
| 产出 | 公开表达 |
|---|---|
| 问题定义 | 用用户体验、性能、稳定性或交付效率描述影响 |
| 技术方案 | 保留架构、流程、算法和工具链层面的抽象 |
| 指标证据 | 只使用页面已有数字或经过脱敏审查的量级 |
| 复用方法 | 沉淀为 SOP、检查清单、图谱关系或后续案例链接 |
指标与证据
- 结论：WebGL 1.0 支持率约 90%+，WebGL 2.0 仅约 60%。选择 WebGL 1.0 作为基线。
- 空项目 ~4MB ~3s ~80MB
- 简单 3D ~10MB ~8s ~150MB
- 虚拟形象 ~20MB+ ~15s ~300MB+
复盘结论
这个案例的核心价值，是把一次具体工程处理沉淀成可检索、可复盘、可继续扩展的技术资产。没有公开证据支撑的细节继续留在私有材料池，不进入线上页面。
公开版深化
案例定位
WebGL 技术选型调研报告不是孤立笔记，而是渲染与图形能力下的一个可复用案例。它服务于“性能治理与稳定性优化”这条主线，公开版重点保留问题抽象、工程取舍和可复用方法，不暴露内部系统细节。
关键问题
B 站虚拟形象项目背景下，对 WebGL 在移动端的可行性进行系统调研。
这篇文章已经覆盖 调研背景、调研结果、最终建议、参考截图。后续阅读时应重点看三件事：问题如何被定义，方案如何在约束下落地，以及哪些经验可以迁移到下一次类似项目。
企业级产出
| 产出 | 公开表达 |
|---|---|
| 问题定义 | 用用户体验、性能、稳定性或交付效率描述影响 |
| 技术方案 | 保留架构、流程、算法和工具链层面的抽象 |
| 指标证据 | 只使用页面已有数字或经过脱敏审查的量级 |
| 复用方法 | 沉淀为 SOP、检查清单、图谱关系或后续案例链接 |
指标与证据
- 结论：WebGL 1.0 支持率约 90%+，WebGL 2.0 仅约 60%。选择 WebGL 1.0 作为基线。
- 空项目 ~4MB ~3s ~80MB
- 简单 3D ~10MB ~8s ~150MB
- 虚拟形象 ~20MB+ ~15s ~300MB+
复盘结论
这个案例的核心价值，是把一次具体工程处理沉淀成可检索、可复盘、可继续扩展的技术资产。没有公开证据支撑的细节继续留在私有材料池，不进入线上页面。
公开版深化
案例定位
WebGL 技术选型调研报告不是孤立笔记，而是渲染与图形能力下的一个可复用案例。它服务于“性能治理与稳定性优化”这条主线，公开版重点保留问题抽象、工程取舍和可复用方法，不暴露内部系统细节。
关键问题
B 站虚拟形象项目背景下，对 WebGL 在移动端的可行性进行系统调研。
这篇文章已经覆盖 调研背景、调研结果、最终建议、参考截图。后续阅读时应重点看三件事：问题如何被定义，方案如何在约束下落地，以及哪些经验可以迁移到下一次类似项目。
企业级产出
| 产出 | 公开表达 |
|---|---|
| 问题定义 | 用用户体验、性能、稳定性或交付效率描述影响 |
| 技术方案 | 保留架构、流程、算法和工具链层面的抽象 |
| 指标证据 | 只使用页面已有数字或经过脱敏审查的量级 |
| 复用方法 | 沉淀为 SOP、检查清单、图谱关系或后续案例链接 |
指标与证据
- 结论：WebGL 1.0 支持率约 90%+，WebGL 2.0 仅约 60%。选择 WebGL 1.0 作为基线。
- 空项目 ~4MB ~3s ~80MB
- 简单 3D ~10MB ~8s ~150MB
- 虚拟形象 ~20MB+ ~15s ~300MB+
复盘结论
这个案例的核心价值，是把一次具体工程处理沉淀成可检索、可复盘、可继续扩展的技术资产。没有公开证据支撑的细节继续留在私有材料池，不进入线上页面。