three.js
笔记系列告一段落,往后遇到一些新加入的知识点,仍然会不断的更新。
个人认为比较好的学习方法是由浅入深,由会使用一个框架,到了解这个框架的实现原理,
然后学习更加深层次的内容,进而达到可以修改框架的能力,这是一个漫长的过程,
通过上一段时间对three.js
框架的学习,基本上可以使用它来应对一般的项目需求。
然而,仅仅停留在会用的基础之上,并不了解其内部实现的原理,
虽然会修改框架的边边角角,以及一些对象的属性和方法,但也仅此而已。
因此,不得不向底层去窥探。
下面谈一下个人对WebGL
的理解
什么是WebGL?
WebGL
其实就是一项在页面上绘制和渲染三维图形,并且可以与之进行交互的技术。
它结合了HTML5
,JavaScript
,允许开发者以编程的形式在页面上渲染出三维图形。
WebGL
的出现是随着HTML5
的出现而出现的,因为H5
作为最新的HTML
标准,使浏览器可以发挥它极致的性能
渲染出漂亮的图形。
传统上,如果要显示三维图形,开发者需要使用C/C++
语言,然后在加上专门的计算机图形库,例如OpenGL
,来开发一个独立
的应用程序,但是有了WebGL
就不再需要那么麻烦,仅仅需要写一些脚本语言,加上支持WebGL
浏览器就可以开发出
出炫酷的应用程序,WebGL
不依赖任何插件,仅仅需要一个可以兼容它的浏览器即可,无论是PC
端开始移动端。
WebGL的优势
1、不需要配置复杂的开发环境。
2、仅需要HTMl5
和JavaScript
等技术。
3、运行在浏览器之中,无需插件。
4、有大量学习资料。
WebGL的起源
WebGL
起源于OpenGL
,准确来说WebGL 1.0
规范来自于OpenGL ES 2.0
。
那什么是OpenGL
有计算机图形学相关知识的肯定对它非常熟悉。
百度百科:OpenGL
(英语:Open Graphics Library
,译名:开放图形库或者“开放式图形库”)是用于渲染2D、3D
矢量图形的跨语言、跨平台的应用程序编程接口(API
)。
上图显示了,OpenGL
、openGL ES
和WebGL
之间的关系。
OpenGL
现在已经是4.3
版本,OpenGL ES
是OpenGL
的子集。
OpenGL
从2.0版本开始支持可编程着色器方法,该特性被OpenGL ES 2.0
继承,并成为WebGL 1.0
的核心部分。
着色器语言是一种类似C
的语言,OpenGL ES 2.0
基于OpenGL
着色器编程语言GLSL
,因此后者被称为OpenGL ES
着色器语言(GLSL ES)
。
WebGL
基于OpenGL ES 2.0
因此,也是用GLSL ES
编写着色器。
页面程序结构
左侧是传统页面,右侧是WebGL
页面。
一般页面仅仅需要两种语言即可渲染,WebGL
页面则需要三种语言HTML
,JavaScript
,GLSL ES
,
GLSL ES
是以字符串的的形式在JavaScript
中编写的。