搜索
首页web前端H5教程各位前辈,有没有学习WebGL方面的经验愿意分享?

每个人在学习中或多或少都有自己的思考,自己想使用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下载来参考,结合示例代码自己慢慢在修改调试中学习吧,加油!
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
H5:网络标准和技术的发展H5:网络标准和技术的发展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今,经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API,增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能,使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法,如箭头函数和类,提升了开发效率和代码可读性,这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速记吗?探索细节H5是HTML5的速记吗?探索细节Apr 14, 2025 am 12:05 AM

H5不仅仅是HTML5的简称,它代表了一个更广泛的现代网页开发技术生态:1.H5包括HTML5、CSS3、JavaScript及相关API和技术;2.它提供更丰富、互动、流畅的用户体验,能在多设备上无缝运行;3.使用H5技术栈可以创建响应式网页和复杂交互功能。

H5和HTML5:网络开发中常用的术语H5和HTML5:网络开发中常用的术语Apr 13, 2025 am 12:01 AM

H5与HTML5指的是同一个东西,即HTML5。HTML5是HTML的第五个版本,带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能,提升了网页的表现力和交互性。

H5指的是什么?探索上下文H5指的是什么?探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5:工具,框架和最佳实践H5:工具,框架和最佳实践Apr 11, 2025 am 12:11 AM

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面,支持组件化开发。2.React通过虚拟DOM优化页面渲染,适合复杂应用。3.Webpack用于模块打包,优化资源加载。

HTML5的遗产:当前了解H5HTML5的遗产:当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代码:可访问性和语义HTMLH5代码:可访问性和语义HTMLApr 09, 2025 am 12:05 AM

H5通过语义化元素和ARIA属性提升网页的可访问性和SEO效果。1.使用、、等元素组织内容结构,提高SEO。2.ARIA属性如aria-label增强可访问性,辅助技术用户可顺利使用网页。

H5与HTML5相同吗?H5与HTML5相同吗?Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多数情况下是相同的,但它们在某些特定场景下可能有不同的含义。1."HTML5"是W3C定义的标准,包含新标签和API。2."h5"通常是HTML5的简称,但在移动开发中可能指基于HTML5的框架。理解这些区别有助于在项目中准确使用这些术语。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中