我们可以看看对应的二维中图形的平移，其实就可以理解为对应的点的移动，我们来看看顶点着色器中的核心代码

一. 核心代码

  1. <canvas id="canvas"></canvas>
  2. <div id="uiContainer">
  3.   <div id="ui">
  4.     <div id="x"></div>
  5.     <div id="y"></div>
  6.   </div>
  7. </div>
  8. <!-- vertex shader -->
  9. <script  id="vertex-shader-2d" type="x-shader/x-vertex">
  10. attribute vec2 a_position;
  12. uniform vec2 u_resolution;
  14. void main() {
  15. // 将矩形点从像素转换为 0.0 到 1.0
  16. vec2 zeroToOne = a_position / u_resolution;
  18. // 从 0->1 转换为 0->2
  19. vec2 zeroToTwo = zeroToOne * 2.0;
  21. // 从 0->2 转换为 -1 -> 1 
  22. vec2 clipSpace = zeroToTwo - 1.0;
  24. gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
  25. }
  26. </script>
  28. <!-- fragment shader -->
  29. <script  id="fragment-shader-2d" type="x-shader/x-fragment">
  30. precision mediump float;
  32. uniform vec4 u_color;
  34. void main() {
  35. gl_FragColor = u_color;
  36. }
  37. </script>

二. 逻辑流程

首先我们来定义一些变量存储矩形的平移，宽，高和颜色。

  1. var translation = [0, 0];
  2. var width = 100;
  3. var height = 30;
  4. var color = [Math.random(), Math.random(), Math.random(), 1];

然后定义一个方法重绘所有东西，我们可以在更新变换之后调用这个方法。

  1. // 绘制场景
  2.   function drawScene() {
  3.     webglUtils.resizeCanvasToDisplaySize(gl.canvas);
  5.     // 告诉WebGL如何从裁剪空间对应到像素
  6.     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  8.     // 清空画布
  9.     gl.clear(gl.COLOR_BUFFER_BIT);
  11.     // 使用我们的程序
  12.     gl.useProgram(program);
  14.     // 启用属性
  15.     gl.enableVertexAttribArray(positionLocation);
  17.     // 绑定位置缓冲
  18.     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  20.     // 设置矩形参数
  21.     setRectangle(gl, translation[0], translation[1], width, height);
  23.     // 告诉属性怎么从positionBuffer中读取数据 (ARRAY_BUFFER)
  24.     var size = 2;          // 每次迭代运行提取两个单位数据
  25.     var type = gl.FLOAT;   // 每个单位的数据类型是32位浮点型
  26.     var normalize = false; // 不需要归一化数据
  27.     var stride = 0;        // 0 = 移动单位数量 * 每个单位占用内存（sizeof(type)）
  28.     var offset = 0;        // 从缓冲起始位置开始读取
  29.     gl.vertexAttribPointer(
  30.         positionLocation, size, type, normalize, stride, offset)
  32.     // 设置分辨率
  33.     gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height);
  35.     // 设置颜色
  36.     gl.uniform4fv(colorLocation, color);
  38.     // 绘制矩形
  39.     var primitiveType = gl.TRIANGLES;
  40.     var offset = 0;
  41.     var count = 6;
  42.     gl.drawArrays(primitiveType, offset, count);
  43.   }

但是想象一下如果对一个更复杂的图形做类似操作怎么办。
假设我们想绘制一个由六个三角形组成的 ‘F’ ，像这样
image.png
接着当前的代码我们需要修改setRectangle，像这样

  1. // 在缓冲存储构成 'F' 的值
  2. function setGeometry(gl, x, y) {
  3.   var width = 100;
  4.   var height = 150;
  5.   var thickness = 30;
  6.   gl.bufferData(
  7.       gl.ARRAY_BUFFER,
  8.       new Float32Array([
  9.           // 左竖
  10.           x, y,
  11.           x + thickness, y,
  12.           x, y + height,
  13.           x, y + height,
  14.           x + thickness, y,
  15.           x + thickness, y + height,
  17.           // 上横
  18.           x + thickness, y,
  19.           x + width, y,
  20.           x + thickness, y + thickness,
  21.           x + thickness, y + thickness,
  22.           x + width, y,
  23.           x + width, y + thickness,
  25.           // 中横
  26.           x + thickness, y + thickness * 2,
  27.           x + width * 2 / 3, y + thickness * 2,
  28.           x + thickness, y + thickness * 3,
  29.           x + thickness, y + thickness * 3,
  30.           x + width * 2 / 3, y + thickness * 2,
  31.           x + width * 2 / 3, y + thickness * 3,
  32.       ]),
  33.       gl.STATIC_DRAW);
  34. }
  36. // 在缓冲存储构成 'F' 的值，这样就不需要很多点一起集合
  37. function setGeometry(gl) {
  38.   gl.bufferData(
  39.       gl.ARRAY_BUFFER,
  40.       new Float32Array([
  41.           // 左竖
  42.           0, 0,
  43.           30, 0,
  44.           0, 150,
  45.           0, 150,
  46.           30, 0,
  47.           30, 150,
  49.           // 上横
  50.           30, 0,
  51.           100, 0,
  52.           30, 30,
  53.           30, 30,
  54.           100, 0,
  55.           100, 30,
  57.           // 中横
  58.           30, 60,
  59.           67, 60,
  60.           30, 90,
  61.           30, 90,
  62.           67, 60,
  63.           67, 90,
  64.       ]),
  65.       gl.STATIC_DRAW);
  66. }
  68. // 通过定点着色器同步移动
  71. var translationLocation = gl.getUniformLocation(
  72.              program, "u_translation");
  73.   ...
  75.   // 创建一个存放位置信息的缓冲
  76. var positionBuffer = gl.createBuffer();
  77.   // 绑定到 ARRAY_BUFFER (简单的理解为 ARRAY_BUFFER = positionBuffer)
  78.   gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  79.   // 将几何数据存到缓冲
  80.   setGeometry(gl);
  82.   ...
  84.   // 绘制场景
  85. function drawScene() {
  87.     ...
  89.     // 设置平移
  90.     gl.uniform2fv(translationLocation, translation);
  92.     // 绘制矩形
  93.     var primitiveType = gl.TRIANGLES;
  94.     var offset = 0;
  95.     var count = 18;
  96.     gl.drawArrays(primitiveType, offset, count);
  97.   }

注意到setGeometry只调用了一次，它不在drawScene内部了。

三. 全部代码

  1. "use strict";
  3. function main() {
  4.   // Get A WebGL context
  5.   /** @type {HTMLCanvasElement} */
  6.   var canvas = document.querySelector("#canvas");
  7.   var gl = canvas.getContext("webgl");
  8.   if (!gl) {
  9.     return;
  10.   }
  12.   // setup GLSL program
  13.   var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d", "fragment-shader-2d"]);
  14.   gl.useProgram(program);
  16.   // look up where the vertex data needs to go.
  17.   var positionLocation = gl.getAttribLocation(program, "a_position");
  19.   // lookup uniforms
  20.   var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
  21.   var colorLocation = gl.getUniformLocation(program, "u_color");
  22.   var translationLocation = gl.getUniformLocation(program, "u_translation");
  24.   // Create a buffer to put positions in
  25.   var positionBuffer = gl.createBuffer();
  26.   // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
  27.   gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  28.   // Put geometry data into buffer
  29.   setGeometry(gl);
  31.   var translation = [0, 0];
  32.   var color = [Math.random(), Math.random(), Math.random(), 1];
  34.   drawScene();
  36.   // Setup a ui.
  37.   webglLessonsUI.setupSlider("#x", {slide: updatePosition(0), max: gl.canvas.width });
  38.   webglLessonsUI.setupSlider("#y", {slide: updatePosition(1), max: gl.canvas.height});
  40.   function updatePosition(index) {
  41.     return function(event, ui) {
  42.       translation[index] = ui.value;
  43.       drawScene();
  44.     };
  45.   }
  47.   // Draw the scene.
  48.   function drawScene() {
  49.     webglUtils.resizeCanvasToDisplaySize(gl.canvas);
  51.     // Tell WebGL how to convert from clip space to pixels
  52.     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  54.     // Clear the canvas.
  55.     gl.clear(gl.COLOR_BUFFER_BIT);
  57.     // Tell it to use our program (pair of shaders)
  58.     gl.useProgram(program);
  60.     // Turn on the attribute
  61.     gl.enableVertexAttribArray(positionLocation);
  63.     // Bind the position buffer.
  64.     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  66.     // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
  67.     var size = 2;          // 2 components per iteration
  68.     var type = gl.FLOAT;   // the data is 32bit floats
  69.     var normalize = false; // don't normalize the data
  70.     var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
  71.     var offset = 0;        // start at the beginning of the buffer
  72.     gl.vertexAttribPointer(
  73.         positionLocation, size, type, normalize, stride, offset);
  75.     // set the resolution
  76.     gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height);
  78.     // set the color
  79.     gl.uniform4fv(colorLocation, color);
  81.     // Set the translation.
  82.     gl.uniform2fv(translationLocation, translation);
  84.     // Draw the geometry.
  85.     var primitiveType = gl.TRIANGLES;
  86.     var offset = 0;
  87.     var count = 18;  // 6 triangles in the 'F', 3 points per triangle
  88.     gl.drawArrays(primitiveType, offset, count);
  89.   }
  90. }
  92. // Fill the buffer with the values that define a letter 'F'.
  93. function setGeometry(gl) {
  94.   gl.bufferData(
  95.       gl.ARRAY_BUFFER,
  96.       new Float32Array([
  97.           // left column
  98.           0, 0,
  99.           30, 0,
  100.           0, 150,
  101.           0, 150,
  102.           30, 0,
  103.           30, 150,
  105.           // top rung
  106.           30, 0,
  107.           100, 0,
  108.           30, 30,
  109.           30, 30,
  110.           100, 0,
  111.           100, 30,
  113.           // middle rung
  114.           30, 60,
  115.           67, 60,
  116.           30, 90,
  117.           30, 90,
  118.           67, 60,
  119.           67, 90,
  120.       ]),
  121.       gl.STATIC_DRAW);
  122. }
  124. main();
  127. // html代码
  129. <canvas id="canvas"></canvas>
  130. <div id="uiContainer">
  131.   <div id="ui">
  132.     <div id="x"></div>
  133.     <div id="y"></div>
  134.   </div>
  135. </div>
  136. <!-- vertex shader -->
  137. <script  id="vertex-shader-2d" type="x-shader/x-vertex">
  138. attribute vec2 a_position;
  140. uniform vec2 u_resolution;
  141. uniform vec2 u_translation;
  143. void main() {
  144.    // Add in the translation.
  145.    vec2 position = a_position + u_translation;
  147.    // convert the position from pixels to 0.0 to 1.0
  148.    vec2 zeroToOne = position / u_resolution;
  150.    // convert from 0->1 to 0->2
  151.    vec2 zeroToTwo = zeroToOne * 2.0;
  153.    // convert from 0->2 to -1->+1 (clipspace)
  154.    vec2 clipSpace = zeroToTwo - 1.0;
  156.    gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
  157. }
  158. </script>
  159. <!-- fragment shader -->
  160. <script  id="fragment-shader-2d" type="x-shader/x-fragment">
  161. precision mediump float;
  163. uniform vec4 u_color;
  165. void main() {
  166.    gl_FragColor = u_color;
  167. }
  168. </script>
  170. <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
  172. <script src="https://webglfundamentals.org/webgl/resources/webgl-lessons-ui.js"></script>