Nicander知识小站

Appearance

image.png ​

webgl （全写Web Graphics Library）是一种3D绘图协议，可以直接通过浏览器创建3D场景。

一、从最简单的WebGL程序来学习 ​

javascript
//HelloPoint1.js
//顶点着色器程序
var VSHADER_SOURCE =
  'void main() {\n' +
  'gl_Position = vec4(0.5, 0.0, 0.0, 1.0);\n' + //设置坐标
  'gl_PointSize = 50.0;\n' + //设置尺寸
  '}\n';

//片元着色器程序
var FSHADER_SOURCE=
  'void main(){\n'+
  'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n'+ //设置颜色
  '}\n';

function main() {
  var canvas = document.getElementById('webgl');

  var gl = getWebGLContext(canvas);
  if(!gl)
  {
    console.log('Failed to get the rendering context for WebGL');
    return ;
  }

  //初始化着色器
  if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){
    console.log('Failed to initialize shaders.');
    return ;
  }

  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  gl.drawArrays(gl.POINTS, 0, 1);
}

先来补充一些前置知识：

上述代码中出现了着色器程序，着色器是**WebGL**必须的存在，着色器程序是以字符串形式嵌入在JS代码中的。

在三维场景中，仅仅用线条和颜色把图形画出来是远远不够的。比如：在有光照情况下，或者在不同视角观察时，对场景会有什么影响。

着色器分为：

  • **顶点着色器**(vertex shader)：顶点着色器是用来描述顶点特性（位置、颜色）的程序。顶点是指二维或三维空间中的一个点。
  • **片元着色器**(Fragment shader)：进行逐片元处理过程如光照的程序。片元是一个WebGL术语，可以理解为像素

**上述代码中执行流程大概是：**首先执行JavaScript程序，调用WebGL的相关方法，然后顶点着色器和片元着色器就会执行，在颜色缓冲区内进行绘制，这时就清空了绘图区，最后颜色缓冲区的内容就在canvas中显示出来。

image.png

重要：**WebGL**程序包括运行在浏览器中的JavaScript和运行在WebGL系统的着色器程序这两部分。

三、GLSL中数据类型 ​

  • float 浮点数
  • vec4 表示由四个浮点数组成的矢量

四、齐次坐标： ​

齐次坐标使用如下符号描述：（X,Y,Z,W），等价于三维坐标(x/w,y/w,z/w)。在三维图形系统中，通常使用齐次坐标来表示顶点三维坐标。

五、WebGL坐标系统 ​

WebGL采用三维坐标系统，面向屏幕时，如下图所示： image.png 而canvas绘图区坐标与WebGL坐标系是不同的，需要将WebGL坐标系映射到canvas绘图区坐标，默认情况下,如下图所示，WebGL坐标与canvas坐标的对应关系如下：（没有搞懂这里的对应关系，看起来是两者坐标系一样的）

  • canvas中心点：(0.0,0.0,0.0)
  • canvas的上边缘和下边缘：(-1.0, 0.0, 0.0)和(1.0, 0.0, 0.0)
  • canvas的左
  • 边缘和右边缘： (0.0, -1.0, 0.0) 和 (0.0, 1.0, 0.0)

image.png

  • attribute 变量传输的是与顶点相关的变量
  • uniform变量传输的是与顶点无关的变量

缓冲区对象(buffer object) ​

WebGL提供了一种很方便的机制**缓冲区对象**，他可以一次性向着色器传入多个顶点的数据。缓冲区对象是WebGL系统的一块内存区域，我们可以一次性向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。

颜色缓冲区 ​

** ****颜色缓冲区**就是最终在显示屏硬件上显示颜色的GPU显存区域了，这个缓冲区储存了每帧更新后的最终颜色值，图形流水线经过一系列测试，包括片段丢弃、颜色混合等，最终生成的像素颜色值就储存在这里，然后提交给显示硬件显示。

这个缓冲区实时更新储存颜色数据，然后GPU通过图形输出口（vga/dvi/hdmi/dp）输出这些数据，不管显示硬件是什么品牌，亦或者什么设备（CRT/液晶/VR），输出画面颜色数据就行了。