2018年的 GDC 和 SIGGRAPH 已经结束，看了下网上的文章大多围绕 Technique Paper 和 NVIDIA 的 RTX 等，缺少 WebGL 的相关总结。本文将针对18年两大会公开的资料对 WebGL 目前的发展情况进行总结。首先什么是BOF？其实是 Birds of a Feature（一丘之貉）的缩写，是 SIGGRAPH 大会中具有相同兴趣点的人进行的线下交流，比如做 Web 的，VR 的，做医学图形的。
牛逼的 DEMO
WebGL 的最大优势就是能通过网页做到快速传播，用酷炫的图形体验达到营销宣传等目的。话不多说，今年两大会上也收集了一些牛逼 demo，咱们来看看：
WebGL基本现状
- WebGL 1.0 基本有98%的设备支持率，而 WebGL 2.0 有大概49%的设备支持率，并逐步在上升。
- 其中 WebGL 2.0 的重要特性有：
WebAssembly方面：许多 C3D 引擎都开始涉及这块领域。比如 oryol，一个轻量级的 C 框架。其中物理模拟的部分通过 Webassembly 的方式去做，在 web 上做了个布料模拟的 demo。当然 Unity 和 Unreal 也都推出了自己基于 Webassembly 的 demo：
Unity：两个 demo，分别为：tank，webgl_linear。
Unreal：EpicZenGarden。
WebGL 工作组最近专注的一些工作有
持续修复 WebGL 2.0 的各种边角情况，修复 WebGL 实现和图形驱动中的问题。并在过去的一年了解决了57个 GitHub Issues，220 个 Pull Request，660 个 Chromium Issues 和 160 个 Firefox Issues 等等。
将 Microsoft Edge 的 WebGL 实现转移到ANGLE)上。整合 ANGLE 到 Apple 的 WebKit 中。优化 ANGLE 的性能等等。
与 Mozilla 和 Google 合作，实现了非阻塞的 GPU 回读，以前同步的 readPixels 和 getBufferSubData等函数在 WenGL 2.0 中成为异步。
NVIDIA 主要实现了 WEBGL_multiview 的拓展，显著地减少了 WebVR/XR 在 CPU 端的开销，demo。
WebGL 研发中的新特性
英特尔的先进网络科技团队对 WebGL 的生态系统做出了许多贡献，因此新特性部分主要由他们来展示。接下来让我们看看到底有哪些研发中的特性，个人感觉都比较重量级。
WebGL 2.0 Compute
研发描述：在 WebGL 实现 OpenGL ES 3.1 的功能，主要是 Compute Shader！
研发状态：
对于 OpenGL 和 D3D 后端 Compute Shader 都基本完成，通过在 Chrome 中设置 flag enable-webgl2-compute-context 可以使用。
基于 Compute Shader 的 Tensorflow.js 基本可以运行。
研发计划：
在今年末实现所有 Compute Shader 的特性。
在 Emscripten 中支持 WebGL 2.0。
将 Native dEQP ES 3.1 的样例移植到Web端。
根据需求实现 OpenGL ES 3.1的其他特性
Parallel Shader Compilation
研发描述：实现 KHR_parallel_shader_compile 拓展，可以多 CPU 线程进行 Shader 编译。使得编译较长且复杂的 Shader 时不会阻塞浏览器的 UI 等。
研发状态：已经在 ANGLE 中实现并被接受。在 PlayCanvas 的 After the Flood demo中，使用这个特性将编译时间从 6223.5ms 减少到 2074.6ms。
研发计划：考虑在 ANGLE 中实现并行的 shader 翻译(GLSL to HLSL)。
WEBGL_video_to_texture
研发描述：实现 WEBGL_video_texture 拓展来优化将视频数据传输到 WebGL（尤其对于360度的 VR 视频）。
研发状态：在 Skia 和 Chromium 补丁进行中，基本实现已经有了>33%的性能提升，开发进行中。
研发计划：完成初始补丁并继续分析性能。
WebGL Geometry Shader Extension
研发描述：在 WebGL 中增加几何着色器！不知道几何着色器的朋友们可以翻阅 OpenGL 流水线。
研发状态：基于 OpenGL 后端的几何着色器在 ANGLE 中已经实现。
研发计划：继续完成基于 D3D 后端的部分。如果有需求的话在 Chrome enable 这个功能。增加 WebGL Conformance Tests。
WebGPU
研发描述：与 W3C WebGPU 组合作，将 Metal，D3D12 和 Vulkan 等带到web端。
研发状态：warm up
研发计划：参与到Dawn的开发(以 Chromium 下一代 Web Graphics API 原型开发的类似ANGLE 的库)。移植 WebGL demo Aquarium 到 Dawn。
Web Machine Learning
研发描述：将机器学习带到 Web 端。
研发状态：
基于 Compute Shader 的方案：TensorFlow.js 可以通过 OpenGL 和 D3D 的后端进行加速。
WebML 方案：与操作系统供应商们(OS vendors)讨论 WebML API 的定义，并进行了大量原型实验。
研发计划：
基于 Compute Shader 的方案：进一步对 TensorFLow.js 进行优化。
WebML 方案：与操作系统供应商和浏览器供应商讨论 API 的定义，创建一个 W3C 的组织来推动项目。
Native vs. Web Performance comparison
研发描述：
利用定量的方法来度量 WebGL 和 native 的性能差距。
深度理解 web 平台上的 overhead，包括 JS 引擎，各种验证(validate)，和 D3D 转换等。
研发状态：
基于 OpenGL 后端的开发已经在 Windows，macOS 和 Linux 都支持了。
一些 native 方面的性能优化
研发计划：
在其他端上实现功能，web：WebGL 2.0，WebGPU，native：D3D11, D3D12, Vulkan, Metal, Dawn。
继续探索其他开销和工作量。
基于 WebGL 的新应用
在 BOF 环节中有一些小厂展示了基于 WebGL 的应用。
biodigital这家公司，在 web 端用粒子系统构建了人体中的液体等，用于展示和教学。
Merchlogix在零售货架管理系统中加入了 WebGL 模块，图形技术使得上货过程更直观更容易，增强了使用体验。
业界主流的动态
18年 SIGGRAPH 上众多 WebGL 大厂都来 BOF 进行来展示交流，包括：Microsoft，AutoDesk，Turbosquid，Babylon，visgl(Uber)，Sketchfab，PlayCanvas，Cesium(不要问为什么没有 threejs)。让我们接下来都看看这些大厂们都有哪些分享。
- Microsoft：微软的重点就是在 HoloLens 和 Office 的各种软件中都直接支持了glTF，直接在 Word 和Powerpoint 中都可以展示各种 3d 模型了(如下图)。另外，微软开源了一套 gltf sdk。
- AutoDesk：宣传了自家的 Forge 平台，是一个为开发创新云端应用提供API和服务的平台。并给出了一些demo(如下图)。看了下软阴影和透明的质量很不错的。
Turbosquid：这是一家提供 3d 模型的网站，分享没啥特殊的，感兴趣可以看看 ppt。
Babylon：没啥特殊的，感兴趣可以看 ppt。
vis.gl: Uber推出的一系列开源可视化框架。其中 DECK.GL 是基于 WebGL 1.0 的大规模地理空间(geospatial)可视化框架，而 NEBULA.GL 是它的可编辑版本。KEPLER.GL 新一代是基于 WebGL 2.0 的大规模地理位置(geolocation)可视化框架。而 LUMA.GL 是一系列 WebGL 2.0 组件的集合。
- SketchFab：这家公司可能有很多人不熟悉，其实是分享 3d 模型的一个网站。他们在这次 BOF 上分享了他们Web 端 Viewer 的一些高级渲染特性，效果非常地不错，令人流泪。分别有以下几个特性：
次表面散射（subsurface scattering），demo地址。
基于屏幕空间的反射(screen space reflection)，demo 地址。
PBR 中的 Clear Coat，demo地址。
折射(refraction)，demo地址。
- Cesium：他们分享了使用 3d tile 对大规模 3d 点云进行渲染的 demo。适合 3d 重建出来的城市或者道路的渲染。
- PlayCanvas：没啥特殊的，不过感觉他的 Web 端编辑器很厉害的样子，ppt地址。
glTF 专场
glTF 最近几年发展得如火如荼，几乎所有图形相关的大厂都增加了自家软件对 glTF 的支持。glTF 专场主要有以下几个 topic：
英伟达开源了MDL(material definition language) SDK，并探讨了未来在 glTF 中支持 MDL 的方案。
宜家在自己的 app 使用了glTF，但表示想要更多的特性来满足实际的渲染，包括以下需求：
Google 推广了自家的开源 3d 压缩库Draco，其压缩标准也通过拓展 KHR_draco_mesh_compression 进入到glTF 标准。
最后看下 glTF 目前的生态系统：
参考文献：
若有收获，就点个赞吧
0 人点赞
