如何学习WebGL和Three.js - 郭隆邦
文章推薦指數: 80 %
刚开始入门的时候,主要是理解GPU渲染管线的渲染流程,WebGl代码是如何执行的。
有一定基础后,可以选择一些图形学的书籍,深入学习图形学相关的算法。
如何学习Three.js.
郭隆邦_技术博客
首页
Three.js中文文档
3D案例
Three.js教程
WebGL教程
工具资源
如何学习WebGL和Three.js
当你开始思考你应该如何学习WebGL和Three.js的时候,相信你至少对相关的关键词了解过了,希望通过WebGL或Three.js实现你想要的Web3D功能,也许你也会去思考通过WebGL或Three.js能不能实现你想要的功能,也许你是因为领导临时分配任务,还不太清楚WebGL和Three.js是什么,个人建议是不要做过多思考,先看看相关的具体技术教程,随着时间的推移你自然会明白Canvas、WebGl、Three.js等关键词指什么。
当前看到这篇文章的时候,建议先阅读一遍,然后学习到一定程度,再来看一次,也许会有新的收获。
要不要学习WebGl?
Three.js是基于原生WebGlAPI和着色器封装得到的3D引擎,也就是一个.js库。
通过原生WebGL直接编写程序,会比较麻烦,一般开发项目直接使用Three.js引擎。
简单的项目一般也用不到底层WebGL知识,不过学习WebGl有助于深入理解Three.js,如果使用Three.js开发项目需要自定义着色器的时候,肯定也是要学习底层WebGL和着色器GLSL知识。
总而言之,如果你想成为Web3D应用开发的大牛,学习WebGL肯定是必须的。
WebGL和Three.js学习顺序?
如果你急于要实现一个Web3D功能,时间有限,也没有图形学基础,个人建议直接学习先Three.js即可,以后想深入掌握,可以学习原生WebGL和图形学相关知识。
如果时间比较充足,又希望有更大的成长空间,学习底层原生WebGL肯定是必要的,可以WebGL和Threejs结合着学习,顺序也不是非常重要。
如何学习WebGL
可以选择《WebGL编程指南》这本书,也可以选择本站提供的WebGL视频教程,作为入门学习资料
刚开始入门的时候,主要是理解GPU渲染管线的渲染流程,WebGl代码是如何执行的。
有一定基础后,可以选择一些图形学的书籍,深入学习图形学相关的算法。
如何学习Three.js
可以选择《Three.js开发指南》书籍,不过书的的案例源码使用的是几年前的Three.js版本,注意使用新版本Three.js开发项目的时候,不要随意复制书中的源码,以免不必要的报错。
如果基础不是太好,选择Threejs视频教程也是一种好的方案,可以查看本站的Three.js视频教程。
学习Three.js,可以先学习一些基础知识,然后根据项目需要选择性的学习,有些用不到的可以暂时不深入学习。
如果一定的WebGl基础,可以尝试Three.js-master文件src目录下的源码,这样可以深入理解Three.js,Three.js是如何封装的WebGLAPI和着色器代码,同时也可以
前端工程师
如果你是前端工程师,突然接触到Web3D应用开发,对于你来说,前端的生态肯定是非常熟悉了,如果不了解WebGL和3D应用开发这一块,这种情况下,需要学习的自然是底层WebGL知识和Three.js基础知识,还有实战中不同Web3D应用项目,如何去开发,程序员和3D美术之间又应该如何配合,需要去学习实战项目的开发流程。
没有编程基础
如果你首次接触WebGL或Three.js,没有任何编程基础,只要学习能力强,学习是没有问题的,很多时候学习能力比你的基础更为重要,过去选择本站3000一对一课程的学员来看,有大约三分之一没有编程基础,不过相同点是学习能力比较强,基于实现自己领域的Web3D应用,对于这些初学者,简单指引下,基本上都很快都可以很快入门。
没有编程基础首先要做的是建立编程的感觉,WebGL开发使用的是JavaScript语言,自然需要找一些基础的JavaScript语言教程学习一下,然后简单补充下HTML和CSS知识,再去学习Three.js课程。
有编程基础-不了解前端
部分初学者,有编程基础,但是不了解前端,这种情况下你肯定首先需要补充的是HTML、CSS、JavaScript等前端知识,然后在学习Threejs和WebGL。
刚开始学习Threejs和WebGL对前端要求不高,稍微有点基础即可,但是如果是为了开发项目,对前端的要求和普通前端一样,需要掌握JavaScript、HTML、CSS、http、vuejs、nodejs等知识。
OpenGL基础
如果你有OpenGL基础,学习WebGL基本没有什么障碍,着色器语言、WebGLAPI和GPU渲染管线的原理你肯定是非常了解的,这种情况下,补充点前端知识即可。
相比大多数初学者,你的基础更定是很深厚的,学习WebGL,不过是换个生态环境罢了,需要打交道对象变成了浏览器。
unity3D或UE4
如果你使用过unity3D或UE4,因为项目需要,需要切换为Three.js,相比较大多数初学者,你是不缺少3D应用开发经验的,对3D应用开发流程比普通前端肯定是非常熟悉的,你学习的时候,自然不需要像普通前端一样,需要学习3D应用的开发流程,程序和美术是如何配合工作的,这种情况下,你需要学习的自然是先补充前端知识,然后熟悉Three.js细节即可,学习能力比较强的话,直接查看Three.js文档也可以。
本站版权所有,本站任何内容未经允许不得转载 备案号:豫ICP备16004767号
QQ群:187740169(WebGL-Three.js教程) 邮箱:[email protected]
延伸文章資訊
- 1如何学习WebGL和Three.js - 郭隆邦
刚开始入门的时候,主要是理解GPU渲染管线的渲染流程,WebGl代码是如何执行的。 有一定基础后,可以选择一些图形学的书籍,深入学习图形学相关的算法。 如何学习Three.js.
- 2原生webgl学习(一) 原生WebGL学习和入门引言 - CSDN博客
笔者自述 对于原生WebGL的学习,相信对于很多搞前端图形开发的小伙伴的 ... 不知道怎么学,学了一段时间Three.js,又觉得必须把原生的WebGL学一下, ...
- 3现在为什么很少用webgl - 头条搜索
Canvas、 SVG 和WebGL三者之间的区别- 游侠舒迟- 博客园 · WebGL 3D位图,是基于Canvas 的3D 框架。 · WebGL 入门必看(一)_凯小默的博客-CSDN博客...
- 4WebGL基礎(一): 從一個滑鼠畫點開始瞭解原生webGL | IT人
面向web前端的WebGL教程,網路上的教程均是假設有計算機圖形學基礎,對web開發者來說不是很 ... webGL如何展示一個點首先得知道webGL如何展示出一個點?
- 5WebGL 理论基础
从基础理论开始学习WebGL,稳! 这有一系列教程,从WebGL的基本理论讲起。 它们不像大多数其他教程那样改编自旧的OpenGL文章。 它们去旧迎新,丢弃一些过时的思想,让 ...