WebGL入门

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 坐标系

右手坐标系

注意：WebGL 坐标系与 canvas 绘图区的坐标系不同，需要将前者映射到后者。

具体转换步骤：

（1）将坐标从浏览器客户区转换到

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：

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。

四、参考

WebGL 教程
WebGL Fundamentals
Three.js 现学现卖
threejs 概览
How to get started with WebVR?
Diving in: Three.js
p5.js vs A-Frame
Four Adventures In React VR — Part I
11 Tools for VR Developers
Bring Virtual Reality to Your Browser with React VR