当前位置：首页 > news >正文

WebGL简易教程——结语

news 2025/7/13 5:48:15

1 概述

笔者在几年前写过一系列关于WebGL的文章《WebGL简易教程——目录》，前端时间将其整理了一下，增加了一个在线案例的站点以便于学习查看。这里就顺便写一段结语吧。

WebGL简易教程在线案例

2 观点

2.1 建议

这个系列文章写了十五篇，之所以不继续写了是因为写到后面代码越来越膨胀（比如《WebGL简易教程(十四)：阴影》中的实现写了700行代码），一些高级的图形技术要通过WebGL这样底层的API来实现就不是一件很容易的事情。一般来说，要较好的实现比较高级的图形技术，最好需要经过一定的封装（可以参考一些图形引擎），否则代码复杂度会非常高。

因此，如果读者已经完成了这十五篇教程的学习，那么接下来就建议读者可以选一门图形引擎来学习，研究一下比较高级的图形技术的实现。其实如果学习时间很紧张，并且接受程度比较高，直接选择一门图形引擎学习也可以。当然WebGL这样底层的接口还是值得学习的，不过就类似于基本功，会对日后的工作产生直接或间接的助力。

另外，虽然已经有了Vulkan、WebGPU以及DX12这样的现代图形api，但是我不觉得初学者能直接入门这些更加底层的图像API。图形技术的发展与软件编程技术相反，不是越来越高级，反而越来越低级，倾向于更好地挖掘硬件的性能。没办法，目前硬件的发展就是跟不上图形技术的需求，性能总是绝对的刚需。你当然可以使用更加高级的图形引擎API，但是凡封装必有代价，你总有遇到需要使用底层API的时候。

2.2 趋势

笔者还记得当年学习WebGL的时候，主流浏览器还只支持WebGL 1.0，但是现在主流浏览器几乎都已经支持WebGL 2.0，甚至包括以封闭保守著称的Safari。也就是说，即使是Web端图形技术的趋势是WebGPU，但是WebGL自身也还是不断演进中。不要觉得支持WebGL 2.0没什么意义，要知道WebGL 2.0对应于嵌入式端的OpenGL ES3.0，以及桌面端的OpenGL 3.3，这使得我们增加了相当多的图形技术可以使用，比如实例化渲染、多目标渲染等等。更重要的意义是，WebGL已经是最轻量的图形技术API了，如果浏览器端都不支持的设备，你就可以光明正大地跟业主说需要设备升级了。其实在信创、嵌入式等项目中，因为一些兼容性问题，还是不得不上OpenGL这样的老家伙；你说WebGL要被WebGPU淘汰，那估计还得等很长一段时间。

还有一个很有意思的地方，前面我说苹果系的技术体系是很封闭保守的，在自家的设备上甚至不愿意支持OpenGL；但是在Safari上却乐于推进WebGL和WebGPU。其实原因很简单，我们所用的WebGL API其实并不是像我们设想的那样是直接使用显卡驱动里面OpenGL API，还是根据不同的平台使用这些平台上首选图像API接口。比如在Windows操作系统Chrome浏览器的WebGL，后台使用的其实是DX12；而苹果系统Safari浏览器的WebGL，后台使用的却是Metal。如果你进一步深入图形技术行业，你就知道这种图形API相互转义非常常见，这其实告诉我们一个道理：不同的图形API其实是大同小异的，关键是要掌握图形技术的思想。

3 教程

记得前些年WebGL最火爆的时候，很多HR会在前端行业招会WebGL的，也有很多前端程序员在询问是不是应该要接手WebGL的工作。其实传统意义上的前端和WebGL除了都使用JavaScript外，两者没有任何共同点。传统意义上的前端解决的是事务型的，约定俗成的界面交互性问题；WebGL则关注的是如何可视化能被人眼识别接受的不同行业的场景。WebGL其实属于图形领域，俗称就是“搞三维的”。让前端从业人员去做WebGL，无异于是让这个人换行业了，而且是换到了一个相对更加艰深的行业，多半是很难搞定的。

但是调换一下，如果一个图形从业者来搞WebGL，多半也是会对目前的前端技术感到眼花缭乱。说真的，现在的前端还能说上手很简单：我写一个html+js，丢到浏览器里面就能运行吗？说实话，应该不完全行了吧？至少我想要规范的ES6模块是不行的，至少我需要开一个HTTP服务器，将代码放到Web域内才行；更不谈后面使用构建工具，安装依赖库等等，这些都是隐形的入门成本。

笔者在整理以前写的WebGL教程的时候，本来也是想将代码修改的更加规范，符合目前的前端主流开发范式一点。但是改起来的时候就觉得，学习WebGL的重点应该是了解其中的图形技术，前端技术其实不是重点，更何况来看WebGL教程的可能并不太会前端。所以笔者还是保留了之前WebGL教程的代码：WebGLTutorial 。另外，笔者增加了一个在线案例的站点以便于学习查看，并且在线案例的项目也在Git上开源了：webgl-tutorial-online 。

具体来说，两者有什么区别呢？WebGLTutorial会更加原生一点，不用开启Web服务器，直接通过浏览器就可以运行。主要是用到一些文件资源，会引起跨域问题；但是原生的JS其实是由文件资源操作的，通过打开指定的文件就可以避开安全策略，可以不依赖Web服务器域内访问。笔者也是推荐使用这个代码进行学习，毕竟学习WebGL，JS不是关键，关键是学习其中的图形技术。当然你有前端基础，看看webgl-tutorial-online也行，其中的代码可能更规范一点，功能更多，所以学习成本也会高一点。