찾다
웹 프론트엔드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

웹 표준과 기술은 현재까지 HTML4, CSS2 및 간단한 JavaScript에서 발전했으며 중대한 개발을 거쳤습니다. 1) HTML5는 캔버스 및 웹 스토리지와 같은 API를 도입하여 웹 응용 프로그램의 복잡성과 상호 작용을 향상시킵니다. 2) CSS3은 애니메이션 및 전환 기능을 추가하여 페이지를보다 효과적으로 만듭니다. 3) JavaScript는 화살표 기능 및 클래스와 같은 Node.js 및 ES6의 최신 구문을 통해 개발 효율 및 코드 가독성을 향상시킵니다. 이러한 변경으로 인해 웹 애플리케이션의 성능 최적화 및 모범 사례의 개발이 촉진되었습니다.

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) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo

H5 : 도구, 프레임 워크 및 모범 사례H5 : 도구, 프레임 워크 및 모범 사례Apr 11, 2025 am 12:11 AM

H5 개발에서 마스터 해야하는 도구 및 프레임 워크에는 vue.js, React 및 Webpack이 포함됩니다. 1.vue.js는 사용자 인터페이스를 구축하고 구성 요소 개발을 지원하는 데 적합합니다. 2. 복잡한 응용 프로그램에 적합한 가상 DOM을 통해 페이지 렌더링을 최적화합니다. 3. Webpack은 모듈 포장에 사용되며 리소스로드를 최적화합니다.

HTML5의 유산 : 현재 H5 이해HTML5의 유산 : 현재 H5 이해Apr 10, 2025 am 09:28 AM

html5hassignificallytransformedwebdevelopmentbyintranticalticlementements, 향상 Multimediasupport 및 Improvingperformance.1) itmadewebsitessmoreaccessibleadseo 친환경적 인 요소, 및 .2) Html5intagnatee

H5 코드 : 접근성 및 시맨틱 HTMLH5 코드 : 접근성 및 시맨틱 HTMLApr 09, 2025 am 12:05 AM

H5는 시맨틱 요소 및 ARIA 속성을 통해 웹 페이지 접근성 및 SEO 효과를 향상시킵니다. 1. 컨텐츠 구조를 구성하고 SEO를 개선하기 위해 사용합니다. 2. Aria-Label과 같은 ARIA 속성은 접근성을 향상시키고 보조 기술 사용자는 웹 페이지를 원활하게 사용할 수 있습니다.

H5는 html5와 동일합니까?H5는 html5와 동일합니까?Apr 08, 2025 am 12:16 AM

"H5"와 "HTML5"는 대부분의 경우 동일하지만 특정 시나리오에서는 다른 의미를 가질 수 있습니다. "HTML5"는 새로운 태그와 API를 포함하는 W3C 정의 표준입니다. "H5"는 일반적으로 HTML5의 약어이지만 모바일 개발에서는 HTML5를 기반으로 한 프레임 워크를 참조 할 수 있습니다. 이러한 차이를 이해하면 프로젝트 에서이 용어를 정확하게 사용하는 데 도움이됩니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.