Home  >  Article  >  Web Front-end  >  各位前辈,有没有学习WebGL方面的经验愿意分享?

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

WBOY
WBOYOriginal
2016-06-07 08:43:292732browse

每个人在学习中或多或少都有自己的思考,自己想使用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项目
各位前辈,有没有学习WebGL方面的经验愿意分享?

微软支持的BabylonJS项目

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

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

各位前辈,有没有学习WebGL方面的经验愿意分享? 各位前辈,有没有学习WebGL方面的经验愿意分享?
这个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下载来参考,结合示例代码自己慢慢在修改调试中学习吧,加油!
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn