各位前辈，有没有学习WebGL方面的经验愿意分享？
程序员文章站
2022-04-14 16:30:16
...
每个人在学习中或多或少都有自己的思考，自己想使用WebGL来做一个网络三维地球模型，知乎比百度知道更专业，这里仅希望前辈们能提供一些经验，并无优劣之分！提前说声谢谢~~
建议买一本,大致的通读一遍,自己尝试把里面的代码改写练习下,大致知道一些webgl的底层知识.
然后,建议不要想自己直接用底层的代码完全建立,而是去使用three.js,你会发现轻快好省见效快.
直接上three.js,你可能会觉得莫名其妙无从下手,可能不知道自己需要干些什么.
完全用底层代码从头写,会跟我早期一样,时间和思绪都缠绕在不好理解的代码运行中,毕竟webgl的调试功能基本上可以说没有,很多问题得靠猜...真的,靠猜...所以刚开始看书打基础的时候,确实很烦恼,熬过去到three.js就好多了.
我现在的目标是东西做出来之后,再转底层,慢慢自己用代码建立一些基础功能,这样应该会更顺手一些. 其实这个问题应该分成三个小问题。
1. 学习opengl
2. 学习javascript
3. 学习图形渲染知识
如果现在是一张白纸，建议先学javascript，现在事态浮躁，所以直接拿本书啃就好，尤其是有其他语言经验的，挑一本javascript精粹就好。
然后再看opengl，把nehe教程抄一遍，基本就把opengl 2.0掌握的差不多。之后随便翻翻es programming guide。写两个基于es的nehe范例就过关。
同时开始看图形方面的材料，掌握几个点，第一是pipeline，第二是空间转换，最后是基本光照模型。
上面这些掌握扎实，基本算入门了。 我分享一下我的经验：
关于性能，你可以参考下面这些资源（该*的请自行*）：
最近有人在询问书籍的事情，我把我看过或者了解过的书列在下面：
补充一个广告：本人正在编写一系列的WebGL教程，力图用最简单易懂的语言来讲解WebGL相关内容，除了介绍WebGL基础知识外，其中还包括一些实际开发中积累下来的经验和实践，欢迎感兴趣的朋友来了解学习。 04年玩vrml的路过，先介绍几个项目。大名鼎鼎的three.js项目
微软支持的BabylonJS项目
Blend4Web项目
WebGLStudio.js项目
这个ide牛啊
另外unity发布wengl简直人间悲剧！目测6.0会有好改
这个ide吊咋天了！
还有几个有空分享，对于来说我还是喜欢当年的vrml！ 原生的webgl颇复杂 如果是初学 建议three.js开始 看楼主想画地球 可参考谷歌2011年就开源的webgl-globe 这个项目基于three.js 很多地理3d可视化由这个项目衍生 后期也许three不能满足你表现的需求 可以写shader做提高 shader可以控制gpu渲染流 能达到很多threejs默认材质达不到的效果 我是用这个学的。
GitHub - stackgl/webgl-workshop: The sequel to shader-school: Learn the WebGL API
GitHub - stackgl/shader-school: A workshopper for GLSL shaders and graphics programming 简单的说就是数三角形。我记得有一篇中文的写得还可以的。我找找。
使用原生WebGL实现的一个太阳系模型 可以从three.js入手，它有不少的例子可以参考，很容易上手。 这有个不错的入门教程视频： http://www.oxox.work/web/recommend/webgl/ 因为毕业设计要用到WebGL相关知识，所以也在学习WebGL。学习之前先从w3school 在线教程简单掌握了javascript和HTML5的基本知识，如果你之前就学习过计算机图形学或者OpenGL，那学习起WebGL应该相对简单一些。不过像我这样的之前也没有接触过OpenGL和图形学知识，目前正在阅读的一本书不错--《WebGL编程指南》，原版是《WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL》，个人感觉相比《WebGL入门指南》这本书要更详细，理解起来更简单，而且书中的代码可以从https://sites.google.com/site/webglbook/home/downloads下载来参考，结合示例代码自己慢慢在修改调试中学习吧，加油！
回复内容：
楼上有推荐WebGL编程指南 这本书,确实不错,我也买了一本.建议买一本,大致的通读一遍,自己尝试把里面的代码改写练习下,大致知道一些webgl的底层知识.
然后,建议不要想自己直接用底层的代码完全建立,而是去使用three.js,你会发现轻快好省见效快.
直接上three.js,你可能会觉得莫名其妙无从下手,可能不知道自己需要干些什么.
完全用底层代码从头写,会跟我早期一样,时间和思绪都缠绕在不好理解的代码运行中,毕竟webgl的调试功能基本上可以说没有,很多问题得靠猜...真的,靠猜...所以刚开始看书打基础的时候,确实很烦恼,熬过去到three.js就好多了.
我现在的目标是东西做出来之后,再转底层,慢慢自己用代码建立一些基础功能,这样应该会更顺手一些. 其实这个问题应该分成三个小问题。
1. 学习opengl
2. 学习javascript
3. 学习图形渲染知识
如果现在是一张白纸，建议先学javascript，现在事态浮躁，所以直接拿本书啃就好，尤其是有其他语言经验的，挑一本javascript精粹就好。
然后再看opengl，把nehe教程抄一遍，基本就把opengl 2.0掌握的差不多。之后随便翻翻es programming guide。写两个基于es的nehe范例就过关。
同时开始看图形方面的材料，掌握几个点，第一是pipeline，第二是空间转换，最后是基本光照模型。
上面这些掌握扎实，基本算入门了。 我分享一下我的经验：
- 找一本入门书籍开始阅读，作者最好是该行业从业多年或该领域的专家，其代码会比较规范，基础概念也会讲得很清楚。
- 针对每个知识点做小demo进行学习，尝试修改参数并查看结果。
- 了解一些图形渲染、GPU方面的知识，加深对WebGL渲染管线的认知。
- 什么时候都不该忽略性能，WebGL也如此，看一些性能相关的最佳实践，从源头避免写出性能很差的3D程序。
- 在OpenGL ES、OpenGL方向扩展。
- 如果你只是想利用WebGL技术快速做出一些效果，可以选择目前较为成熟的库，例如Three.js。
关于性能，你可以参考下面这些资源（该*的请自行*）：
- Debugging and Optimizing WebGL Applications。Google的两位工程师介绍WebGL性能相关的议题。
- Thinking in WebGL: Reducing Memory Usage。关于内存方面的考虑。
- Three.js源码注释 本专栏包括THREE.js整个代码库的源码注释，从数学库，几何对象，相机，材质，纹理，灯光，着色器，内核，详尽细致的注释了每段代码，在注释中，尽可能的包括本人学习wegbl过程中遇到的数学问题，着色器问题，甚至是各种图形学的技术，都进行了详细的补充。
- Efficient JavaScript Vector Math。glMatrix的作者介绍如何编写高性能的矢量函数库。
最近有人在询问书籍的事情，我把我看过或者了解过的书列在下面：
- WebGL Beginner's Guide 入门书籍，强烈推荐。
- Beginning WebGL for HTML5 另一本入门，推荐。
- Professional WebGL Programming: Developing 3D Graphics for the Web 比较深入的一本书，适合进阶阅读，强烈推荐。
- WebGL: Up and Running 入门书籍，有比较多的three.js部分介绍，对于想从底层掌握WebGL同学不太适合。该书作者也同时维护一个学习WebGL的网站：Learning WebGL。上面的课程非常不错。
- WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL 基础知识比较全面。推荐看这本书的高阶部分，介绍的内容也比较丰富。
- Graphics Shaders: Theory and Practice 专门介绍图形着色器的书（吐槽一下清华大学出版社的翻译版本，排版差，翻译更差，可见就是糊弄出来的一本书）。
- GPU编程与CG语言之阳春白雪下里巴人 好奇怪的书名，这是国内一位作者所写，开篇痛诉国内科研之现状，作者对待做学问的态度还是很不错的。少有的优秀中文资料，推荐。网上下载的地方很多，自己百度就好了。
- WebGL Insights 一本WebGL应用经验的文章合集，适合高阶阅读，如果你开发比较复杂且要求高性能的WebGL程序，这本书会提供比较多的经验。
补充一个广告：本人正在编写一系列的WebGL教程，力图用最简单易懂的语言来讲解WebGL相关内容，除了介绍WebGL基础知识外，其中还包括一些实际开发中积累下来的经验和实践，欢迎感兴趣的朋友来了解学习。 04年玩vrml的路过，先介绍几个项目。大名鼎鼎的three.js项目
微软支持的BabylonJS项目
Blend4Web项目
WebGLStudio.js项目
这个ide牛啊
另外unity发布wengl简直人间悲剧！目测6.0会有好改
这个ide吊咋天了！
还有几个有空分享，对于来说我还是喜欢当年的vrml！ 原生的webgl颇复杂 如果是初学 建议three.js开始 看楼主想画地球 可参考谷歌2011年就开源的webgl-globe 这个项目基于three.js 很多地理3d可视化由这个项目衍生 后期也许three不能满足你表现的需求 可以写shader做提高 shader可以控制gpu渲染流 能达到很多threejs默认材质达不到的效果 我是用这个学的。
GitHub - stackgl/webgl-workshop: The sequel to shader-school: Learn the WebGL API
GitHub - stackgl/shader-school: A workshopper for GLSL shaders and graphics programming 简单的说就是数三角形。我记得有一篇中文的写得还可以的。我找找。
使用原生WebGL实现的一个太阳系模型 可以从three.js入手，它有不少的例子可以参考，很容易上手。 这有个不错的入门教程视频： http://www.oxox.work/web/recommend/webgl/ 因为毕业设计要用到WebGL相关知识，所以也在学习WebGL。学习之前先从w3school 在线教程简单掌握了javascript和HTML5的基本知识，如果你之前就学习过计算机图形学或者OpenGL，那学习起WebGL应该相对简单一些。不过像我这样的之前也没有接触过OpenGL和图形学知识，目前正在阅读的一本书不错--《WebGL编程指南》，原版是《WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL》，个人感觉相比《WebGL入门指南》这本书要更详细，理解起来更简单，而且书中的代码可以从https://sites.google.com/site/webglbook/home/downloads下载来参考，结合示例代码自己慢慢在修改调试中学习吧，加油！