各位前辈,有没有学习WebGL方面的经验愿意分享?

原创
2016-06-07 08:43:292313浏览
每个人在学习中或多或少都有自己的思考,自己想使用WebGL来做一个网络三维地球模型,知乎比百度知道更专业,这里仅希望前辈们能提供一些经验,并无优劣之分!提前说声谢谢~~

回复内容:

楼上有推荐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程序,这本书会提供比较多的经验。
以上书目我都列出了豆瓣地址,原版书大家可以在amazon.cn或者amazon.com上买到,阅读英文有困难的同学可以考虑中文版(但是部分没有翻译版本)。

补充一个广告:本人正在编写一系列的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入手,它有不少的例子可以参考,很容易上手。 这有个不错的入门教程视频: oxox.work/web/recommend 因为毕业设计要用到WebGL相关知识,所以也在学习WebGL。学习之前先从w3school 在线教程简单掌握了javascript和HTML5的基本知识,如果你之前就学习过计算机图形学或者OpenGL,那学习起WebGL应该相对简单一些。不过像我这样的之前也没有接触过OpenGL和图形学知识,目前正在阅读的一本书不错--《WebGL编程指南》,原版是《WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL》,个人感觉相比《WebGL入门指南》这本书要更详细,理解起来更简单,而且书中的代码可以从sites.google.com/site/w下载来参考,结合示例代码自己慢慢在修改调试中学习吧,加油!
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。