初涉WebGL

之前一直在捣鼓Vue和React栈，对组件化架构项目有了些理解和体会。今天尝尝WebGL，当然，并不打算现在深入，只是略作了解，我知道这个坑很深。

js的图形库、3d库也有好几款比较流行的，如游戏开发方面的three.js、数据可视化的图表库echarts.js、GIS方面的百度地图、google地图等，最近打算学习下。

言归正传，以前学canvas的时候，只是简单地学习2d context的一些api写写画画，webGL显然更高级些，在MDN文档的介绍中：

WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 3D rendering in an HTML <canvas> in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

提到了WebGL可以让网页内容中的canvas元素实现3d渲染，其编程由两部分组成，一部分是由js写的控制代码，一部分是在用户设备gpu上执行的实现特定效果的代码（GLSL，注意，GLSL是一门针对GPU的编程语言）。不过WebGL只兼容IE11+

教程假设我们会一些基本的3d图像的概念。Learn WebGL for 2D and 3D graphics这篇入门教程指出，需要我们会一点html和css知识，以及较深的js功底，能理解闭包、原型链、构造函数等概念。

 

 

第一步，检测设备是否支持WebGL：

  function detectWebGLContext () {
    // Create canvas element. The canvas is not added to the
    // document itself, so it is never displayed in the
    // browser window.
    var canvas = document.createElement("canvas");
    // Get WebGLRenderingContext from canvas element.
    var gl = canvas.getContext("webgl")
      || canvas.getContext("experimental-webgl");
    // Report the result.
    if (gl && gl instanceof WebGLRenderingContext) {
      paragraph.innerHTML =
        "Congratulations! Your browser supports WebGL.";
    } else {
      paragraph.innerHTML = "Failed to get WebGL context. "
        + "Your browser or device may not support WebGL.";
    }
  }

跟一般的功能检测一样，其实就是判断  gl = canvas.getContext("webgl")|| canvas.getContext("experimental-webgl")  是不是 WebGLRenderingContext 的一个实例。一旦我们的canvas元素有这个rendering context，我们就可以使用它的api进行渲染。

 

第二步，开始简单的example

 

-----填充WebGLContext

1.获取（set up）rendering context ，就是上一步的gl。

2.然后drawing buffer（现在先理解为画布）填充颜色。这个过程分两步：

  //确定渲染的范围
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  //设定WebGL的内部状态--设定颜色
  // Set the clear color to darkish green.
  gl.clearColor(0.0, 0.5, 0.0, 1.0);
  //输出其状态--填充颜色
  // Clear the context with the newly set color. This is
  // the function call that actually does the drawing.
  gl.clear(gl.COLOR_BUFFER_BIT);

 gl.viewport()中前两个参数是相对于左下角的距离。后两个是宽，高。

在定义了drawing buffer的 范围后，我们执行了两个动作，先是设定WebGL的内部状态（颜色为绿色），然后执行语句让drawing buffer 变成WebGL内部状态所设定的样子。所以，WebGL实际上是一个状态机。我们可以回想下，在getContext(“2d”)的时候，要画一个矩形，我们也是遵循同样的操作步骤：

//定义样式（即内部状态）
cxt.fillStyle="#FF0000";
//输出图形（将样式状态输出到画布中）
cxt.fillRect(0,0,150,75);

最后，WebGL中颜色定义都是使用RGBA格式的。

 

-----开始将WebGL和用户交互结合

Clearing by clicking一例由上面的简单例子延伸而来，对canvas和button绑定了click事件，触发switchColor函数。

该函数先判断是否支持WebGL，再确定画布的范围，之后再执行三行代码：

    //产生随机颜色
    // Get a random color value using a helper function.
    var color = getRandomColor();
    //设置WebGL内部状态的颜色新值
    // Set the clear color to the random color.
    gl.clearColor(color[0], color[1], color[2], 1.0);
    //将新值输出到画布
    // Clear the context with the newly set color. This is
    // the function call that actually does the drawing.
    gl.clear(gl.COLOR_BUFFER_BIT);

----裁剪：

  //开启裁剪功能
  // Enable scissoring operation and define the position and
  // size of the scissoring area.
  gl.enable(gl.SCISSOR_TEST);
  //设定可更新的区域
  gl.scissor(60, 60, 60, 130);

  // Clear the drawing buffer solid yellow.
  gl.clearColor(1.0, 0.6, 0.0, .1);
  gl.clear(gl.COLOR_BUFFER_BIT);

getContext("2d")中也有相似的api。只有在指定的区域中画布才会被更新（显示）。

----不设置高宽会导致不符合预期的渲染结果

我们知道设置css可以改变元素的视觉高宽，canvas也一样。但如果我们只是单纯设置了css样式，不对其dom节点设置高宽，将导致诡异的渲染效果。

其实不止“webgl”的RenderingConext，“2d”的context也会有这种情况。

以前研究过canvas这个问题，因为css只是改变canvas元素呈现在页面上的视觉大小，但是其逻辑像素默认是300*150.

当我们调用api时，往api中传入表示高宽或x、y轴位置的参数时，一旦超出y轴方向的150和x轴方向的300，就会超出画布。

所以必要的时候，我们得获取canvas节点，然后js设定其逻辑高宽。canvas.height=xx;canvas.width=xx;

 

----封装WebGL 方法

function getRenderingContext() {
  var canvas = document.querySelector("canvas");
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
  var gl = canvas.getContext("webgl")
    || canvas.getContext("experimental-webgl");
  if (!gl) {
    var paragraph = document.querySelector("p");
    paragraph.innerHTML = "Failed to get WebGL context."
      + "Your browser or device may not support WebGL.";
    return null;
  }
  gl.viewport(0, 0,
    gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  return gl;
}

这一节没什么新内容，只是把几个基本的语句进行封装。函数做了两件事情，判断是否支持webgl，然后将画布填充成黑色并返回RenderingContext这个接口。

 //日后补充