WebGL 编程指南
一、WebGL 基本认识
WebGL（Web Graphics Library）是一个光栅化引擎，它可以根据你的代码绘制出点，线和三角形。它来源于 OpenGL，OpenGL 是使用硬件加速的 GPU 来进行图形处理的计算机图形处理库，而 WebGL 则派生自 OpenGL 的其中一个版本，使其在 Web 中渲染3D图形成为可能。
传统网页和 WebGL 网页的软件结构
GLSL ES：OpenGL ES 着色器语言（shading language），是一种运行在 GPU 上的和C或C++类似的强类型语言。WebGL 语言使用三种语言进行开发：HTML、JavaScript 和 GLSL ES。
1. 两个实现要点：
（1）Canvas：定义网页上的绘图区域。
（2）着色器：绘制图形的基石。
要使用 WebGL 进行绘图，就必须使用着色器，WebGL 需要两种着色器来实现图形的各种渲染效果：
- 顶点着色器：用来描述顶点特性（如位置、颜色等）等程序。
- 片元着色器：进行逐片元处理过程如光照的程序。可以将片元理解为像素（图像的单元）。
从执行 JavaScript 程序到在浏览器中显示结果的过程
在代码中，着色器程序是以字符串的形式“嵌入”在 JavaScript 文件中的，在程序真正开始运行前它就已经设置好了。
大部分 WebGL 程序遵循的流程
WebGL 程序包括运行在浏览器中的 JavaScript 和运行在 WebGL 系统的着色器程序这两个部分。
2. WebGL 坐标系
右手坐标系
<canvas>坐标系统和 WebGL 在<canvas>上的坐标系统
注意：WebGL 坐标系与 canvas 绘图区的坐标系不同，需要将前者映射到后者。
具体转换步骤：
（1）将坐标从浏览器客户区转换到 <canvas> 坐标系下，通过 e.target.getBoundingClientRect() 可以获取 <canvas> 在客户区中的坐标；
（2）将 <canvas> 坐标系下的坐标转换到 WebGL 坐标系统中。
var x = e.clientX;
var y = e.clientY;
var rect = e.target.getBoundingClientRect();
x = ((x - rect.left) - canvas.width / 2) / (canvas.width / 2);
y = (canvas.height / 2 - (y - rect.top)) / (canvas.height / 2);
3. 着色器变量类型
attribute 变量：属性，传输与顶点相关的数据；
uniform 变量：全局变量，传输与所有顶点都相同（或与顶点无关）的数据；
varying 变量：可变量，从顶点着色器向片元着色器传输数据。
向顶点着色器传输数据的两种方式
向片元着色器传输数据的两种方式
只有顶点着色器才能使用 attribute 变量，使用片元着色器时，就需要使用 uniform 变量和 varying 变量。
// Vertex shader program
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'void main() {\n' +
' gl_Position = a_Position;\n' +
' gl_PointSize = 10.0;\n' +
'}\n';
// Fragment shader program
var FSHADER_SOURCE =
'uniform vec4 u_FragColor;\n' +
'void main() {\n' +
' gl_FragColor = u_FragColor;\n' +
'}\n';
function main() {
//...
// Get the storage location of a_Position
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return;
}
// Get the storage location of u_FragColor
var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
if (!u_FragColor) {
console.log('Failed to get the storage location of u_FragColor');
return;
}
//...
// Pass the position of a point to a_Position variable
gl.vertexAttrib3f(a_Position, xy[0], xy[1], 0.0);
// Pass the color of a point to u_FragColor variable
gl.uniform4f(u_FragColor, rgba[0], rgba[1], rgba[2], rgba[3]);
//...
}
4. 缓冲区
缓冲区
二、 场景渲染基本内容
Three.JS Walking Map
1. 3D 几何图形（3D geometry）：点、线、面
2. 相机（camera）+ 视角（perspective）：正交相机、透视相机、全景相机、3D相机
（相机的类型）
透视摄像机
3. 纹理（texture）
纹理是一个数据序列，可以在着色程序运行中随意读取其中的数据。 大多数情况存放的是图像数据，但是纹理仅仅是数据序列， 你也可以随意存放除了颜色数据以外的其它数据。
4. 材质（material）
材质与图形表示方法是相关的，用点表示使用PointsMaterial，用线表示使用LineXXXMaterial，用面表示使用MeshXXXMaterial，用精灵表示使用SpriteMaterial等等。
这样划分是因为不同的表示方式所要求的材质有很大不同。比如用线来表示，由于线没有光照模型，所以，LineXXXMaterial也没有关照类的属性。只有面表示的模型才有光照模型。光照模型有lambert模型和phong模型，对这两种光线模型，我们只需要知道，Lambert模型一般用来表示只有漫反射的物体，如塑料，而phong模型用来表示有镜面反射的物体，如镜子。
- MeshBasicMaterial、MeshNormalMaterial、MeshLambertMaterial、MeshPhongMaterial、MeshStandardMaterial、MeshDepthMaterial
- LineBasicMaterial、LineDashedMaterial
- PontsMaterial
- SpritMaterial
5. 光照（light）
（1）基本光源类型：
平行光（directional light） ：平行光的光线是相互平行的，具有方向。平行光可以看作是无限远处的光源发出的光，类似于自然中的太阳光。因为太阳距离地球很远，所以阳光到达地球时可以认为是平行的。平行光可以用一个方向和一个颜色来定义；
点光源光（point light）：点光源光是从一个点向周围的所有方向发出的光，类似于人造灯泡的光。我们需要指定点光源的位置和颜色。光线的方向将根据点光源的位置和被照射之处的位置计算出来，因为点光源的光线的方向在场景内的不同位置是不同的。
环境光（ambient light）：又叫间接光，是指那些经光源（点光源或平行光源）发出后，被墙壁多次反射，然后找到物体表面上的光，用于模拟真实世界中的非直射光。环境光从各个角度照射物体，其强度都是一致的。它不用指定位置和方向，只需要指定颜色即可。
平行光、点光源光和环境光
（2）反射类型：
漫反射：漫反射针对平行光或点光源而言，其反射光在各个方向是均匀的。如果物体表面像镜子一样光滑，那么光线就会以特定的角度反射出去；但是现实中的大部分材质，比如纸张、岩石、塑料等，其表面都是粗糙的，在这种情况下反射光就会以不固定的角度反射出去。漫反射就是针对后一种情况而建立的理想反射模型。
环境反射：环境反射针对环境光而言的，其方向可以认为就是入射光的反方向。由于环境光照射物体的方式就是个方向均匀、强度相等的，所以反射光也是个方向均匀的。
Three.js
三、WebVR Tools
Three.js：基于 WebGL，拥有底层API，能更深层次地了解 3D 渲染和 WebGL，☆ star 42808；
A-Frame：基于 Three.js，开始 WebVR 最简单的库，社区很活跃完善，☆ star 8303；
ReactVR：基于 Three.js，受众为 React 开发人员，API 类似于 React Native，☆ star 6147；
Babylon.js：类似于 Three.js，为游戏而生，☆ star 7024。
网友评论