00 - webgl 笔记 - webgl 概述

three.js笔记系列告一段落,往后遇到一些新加入的知识点,仍然会不断的更新。
个人认为比较好的学习方法是由浅入深,由会使用一个框架,到了解这个框架的实现原理,
然后学习更加深层次的内容,进而达到可以修改框架的能力,这是一个漫长的过程,
通过上一段时间对three.js框架的学习,基本上可以使用它来应对一般的项目需求。
然而,仅仅停留在会用的基础之上,并不了解其内部实现的原理,
虽然会修改框架的边边角角,以及一些对象的属性和方法,但也仅此而已。
因此,不得不向底层去窥探。
下面谈一下个人对WebGL的理解

什么是WebGL?

WebGL其实就是一项在页面上绘制和渲染三维图形,并且可以与之进行交互的技术。
它结合了HTML5,JavaScript,允许开发者以编程的形式在页面上渲染出三维图形。
WebGL的出现是随着HTML5的出现而出现的,因为H5作为最新的HTML标准,使浏览器可以发挥它极致的性能
渲染出漂亮的图形。

传统上,如果要显示三维图形,开发者需要使用C/C++语言,然后在加上专门的计算机图形库,例如OpenGL,来开发一个独立
的应用程序,但是有了WebGL就不再需要那么麻烦,仅仅需要写一些脚本语言,加上支持WebGL浏览器就可以开发出
出炫酷的应用程序,WebGL不依赖任何插件,仅仅需要一个可以兼容它的浏览器即可,无论是PC端开始移动端。

WebGL的优势

1、不需要配置复杂的开发环境。
2、仅需要HTMl5JavaScript等技术。
3、运行在浏览器之中,无需插件。
4、有大量学习资料。

WebGL的起源

WebGL起源于OpenGL,准确来说WebGL 1.0规范来自于OpenGL ES 2.0
那什么是OpenGL有计算机图形学相关知识的肯定对它非常熟悉。
百度百科:OpenGL(英语:Open Graphics Library,译名:开放图形库或者“开放式图形库”)是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口(API)。
在这里插入图片描述
上图显示了,OpenGLopenGL ESWebGL之间的关系。
OpenGL现在已经是4.3版本,OpenGL ESOpenGL的子集。
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页面则需要三种语言HTMLJavaScriptGLSL ES,
GLSL ES是以字符串的的形式在JavaScript中编写的。

猜你喜欢

转载自blog.csdn.net/ithanmang/article/details/84246025