WebGL技术学习之路

迷南。 2022-09-23 04:56 387阅读 0赞

#     #

相比其他前端技术，WebGL最大的特点的就是学习曲线异常之陡，入门感觉比较难。另外在这方面的资料也非常少，一部分因为该技术出现的时间还比较晚，另外它和OpenGL这样成熟的技术类似，很多人熟悉了OpenGL之后并不再需要单独介绍WebGL。这里沉淀了目前LBS-WEB所积累下来的WebGL资源，供大家学习。

## 如何学习 ##

这里给大家一些学习方法和经验：

找一本入门书籍开始阅读，作者最好是该行业从业多年或该领域的专家，其代码会比较规范，基础概念也会讲得很清楚。针对每个知识点做小demo进行学习，尝试修改参数并查看结果。了解一些图形渲染、GPU方面的知识，加深对WebGL渲染流水线的认知。什么时候都不该忽略性能，WebGL也如此，看一些性能相关的最佳实践，从源头避免写出性能很差的3D程序。在OpenGL ES、OpenGL方向扩展。如果你只是想利用WebGL技术快速做出一些效果，可以选择目前较为成熟的库，例如Three.js。

## 学习资源 ##

[Learning WebGL][]。一个专门介绍WebGL技术、进展的网站，里面提供了一系列的基础课程，这个课程就目前来说是比较经典的，推荐学习。了解基本的WebGL程序写法和风格。该网站的作者也是《WebGL: Up and Running》一书的作者。[WebGL规范][WebGL]。目前浏览器应用的规范标准。

[WebGL Techniques and Performance][]（Youtube，需要翻）：Google I/O 2011年的一个分享，推荐。可以了解WebGL性能优化的基本思想和方法。分享人是Gregg Travares，在Chrome GPU团队，主要推动了Chrome的GPU渲染以及WebGL在Chrome上的实现，在Stackoverflow上非常活跃，经常回答WebGL相关问题。[WebGL Fundamentals][] 还是Gregg Travares写的，在HTML5Rocks上。[HTML5Rocks上关于WebGL的资源][HTML5Rocks_WebGL]。可以自行搜索。[WebGL课程中文翻译版][WebGL 1]

## 性能 ##

[Debugging and Optimizing WebGL Applications][]。Google的两位工程师介绍WebGL性能相关的议题。

[Thinking in WebGL: Reducing Memory Usage][Thinking in WebGL_ Reducing Memory Usage]。关于内存方面的考虑。

## 工具 ##

[WebGL Debugging and Profiling Tools][]。一篇介绍WebGL调试工具的文章。

## 书籍 ##

这里列出了一些读过的WebGL书籍，并附有简短的说明供大家参考，其他书籍信息可自行在amazon、china-pub上查找。

[WebGL Beginner's Guide][WebGL Beginner_s Guide] 入门书籍，强烈推荐。

[Beginning WebGL for HTML5][] 另一本入门，推荐。

Professional WebGL Programming: Developing 3D Graphics for the Web 比较深入的一本书，适合进阶阅读，强烈推荐。LBS图书馆有英文版。

WebGL: Up and Running 入门书籍，有比较多的three.js部分介绍，对于想从底层掌握WebGL同学不太适合。该书作者也同时维护一个学习WebGL的网站：[Learning WebGL][]。上面的课程非常不错。

[WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL (OpenGL)][WebGL Programming Guide_ Interactive 3D Graphics Programming with WebGL _OpenGL] 基础知识比较全面。推荐看这本书的高阶部分，介绍的内容也比较丰富。

[Graphics Shaders][][Theory and Practice][Graphics Shaders] 专门介绍图形着色器的书，有翻译版（吐槽一下清华大学出版社的翻译版本，排版差，翻译更差，可见就是糊弄出来的一本书）。\[G

PU编程与CG语言之阳春白雪下里巴人\][16][] 好奇怪的书名，这是国内一位作者所写，开篇痛诉国内科研之现状，作者对待做学问的态度还是很不错的。少有的优秀中文资料，推荐。

[Learning WebGL]: http://learningwebgl.com/blog/
[WebGL]: https://www.khronos.org/registry/webgl/specs/1.0/
[WebGL Techniques and Performance]: https://www.youtube.com/watch?v=rfQ8rKGTVlg
[WebGL Fundamentals]: http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/
[HTML5Rocks_WebGL]: http://www.html5rocks.com/en/search?q=webgl
[WebGL 1]: http://blog.csdn.net/lufy_legend/article/category/2434493
[Debugging and Optimizing WebGL Applications]: https://docs.google.com/presentation/d/12AGAUmElB0oOBgbEEBfhABkIMCL3CUX7kdAPLuwZ964/edit#slide=id.i0
[Thinking in WebGL_ Reducing Memory Usage]: http://www.goocreate.com/learn/reducing-memory-usage/
[WebGL Debugging and Profiling Tools]: http://www.realtimerendering.com/blog/webgl-debugging-and-profiling-tools/
[WebGL Beginner_s Guide]: http://wiki.baidu.com/download/attachments/40185058/WebGL%20Beginner%27s%20Guide.pdf?version=1&modificationDate=1413533753000&api=v2
[Beginning WebGL for HTML5]: http://wiki.baidu.com/download/attachments/40185058/Beginning%20WebGL%20for%20HTML5.pdf?version=1&modificationDate=1413533753000&api=v2
[WebGL Programming Guide_ Interactive 3D Graphics Programming with WebGL _OpenGL]: http://wiki.baidu.com/download/attachments/40185058/AWP.WebGL.Programming.Guide.Jul.2013.pdf?version=1&modificationDate=1413533752000&api=v2
[Graphics Shaders]: http://wiki.baidu.com/download/attachments/40185058/Graphics%20Shaders%20Theory%20and%20Practice%202nd%20Edition.pdf?version=1&modificationDate=1413870480000&api=v2
[16]: http://wiki.baidu.com/download/attachments/40185058/GPU-Programming-AndCgLanguage-Primer.pdf?version=1&modificationDate=1413870680000&api=v2