一. 逻辑部分

缩放和平移一样简单。
让我们将位置乘以期望的缩放值，这是前例中的变化部分。

  1. // 这是一段关于缩放区域的一段的代码；
  3. <script id="vertex-shader-2d" type="x-shader/x-vertex">
  4. attribute vec2 a_position;
  6. uniform vec2 u_resolution;
  7. uniform vec2 u_translation;
  8. uniform vec2 u_rotation;
  9. uniform vec2 u_scale;
  11. void main() {
  12.   // 缩放
  13.   vec2 scaledPosition = a_position * u_scale;
  15.   // 旋转
  16.   vec2 rotatedPosition = vec2(
  17.      scaledPosition.x * u_rotation.y + scaledPosition.y * u_rotation.x,
  18.      scaledPosition.y * u_rotation.y - scaledPosition.x * u_rotation.x);
  20.   // 平移
  21.   vec2 position = rotatedPosition + u_translation;
  24.  // 然后需要在JavaScript中绘制的地方设置缩放量。
  26.   ...
  28.   var scaleLocation = gl.getUniformLocation(program, "u_scale");
  30.   ...
  32.   var scale = [1, 1];
  34.   ...
  36.   // 绘制场景
  37.   function drawScene() {
  39.     ...
  41.     // 设置平移
  42.     gl.uniform2fv(translationLocation, translation);
  44.     // 设置旋转
  45.     gl.uniform2fv(rotationLocation, rotation);
  47.     // 设置缩放
  48.     gl.uniform2fv(scaleLocation, scale);
  50.     // 绘制几何体
  51.     var primitiveType = gl.TRIANGLES;
  52.     var offset = 0;
  53.     var count = 18;  // 6 个三角形组成 'F', 每个三角形 3 个点
  54.     gl.drawArrays(primitiveType, offset, count);
  55.   }

二. 全部代码

  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"]);
  15.   // look up where the vertex data needs to go.
  16.   var positionLocation = gl.getAttribLocation(program, "a_position");
  18.   // lookup uniforms
  19.   var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
  20.   var colorLocation = gl.getUniformLocation(program, "u_color");
  21.   var translationLocation = gl.getUniformLocation(program, "u_translation");
  22.   var rotationLocation = gl.getUniformLocation(program, "u_rotation");
  23.   var scaleLocation = gl.getUniformLocation(program, "u_scale");
  25.   // Create a buffer to put positions in
  26.   var positionBuffer = gl.createBuffer();
  27.   // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
  28.   gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  29.   // Put geometry data into buffer
  30.   setGeometry(gl);
  32.   var translation = [100, 150];
  33.   var rotation = [0, 1];
  34.   var scale = [1, 1];
  35.   var color = [Math.random(), Math.random(), Math.random(), 1];
  37.   drawScene();
  39.   // Setup a ui.
  40.   webglLessonsUI.setupSlider("#x", {value: translation[0], slide: updatePosition(0), max: gl.canvas.width });
  41.   webglLessonsUI.setupSlider("#y", {value: translation[1], slide: updatePosition(1), max: gl.canvas.height});
  42.   webglLessonsUI.setupSlider("#angle", {slide: updateAngle, max: 360});
  43.   webglLessonsUI.setupSlider("#scaleX", {value: scale[0], slide: updateScale(0), min: -5, max: 5, step: 0.01, precision: 2});
  44.   webglLessonsUI.setupSlider("#scaleY", {value: scale[1], slide: updateScale(1), min: -5, max: 5, step: 0.01, precision: 2});
  46.   function updatePosition(index) {
  47.     return function(event, ui) {
  48.       translation[index] = ui.value;
  49.       drawScene();
  50.     };
  51.   }
  53.   function updateAngle(event, ui) {
  54.     var angleInDegrees = 360 - ui.value;
  55.     var angleInRadians = angleInDegrees * Math.PI / 180;
  56.     rotation[0] = Math.sin(angleInRadians);
  57.     rotation[1] = Math.cos(angleInRadians);
  58.     drawScene();
  59.   }
  61.   function updateScale(index) {
  62.     return function(event, ui) {
  63.       scale[index] = ui.value;
  64.       drawScene();
  65.     };
  66.   }
  68.   // Draw the scene.
  69.   function drawScene() {
  70.     webglUtils.resizeCanvasToDisplaySize(gl.canvas);
  72.     // Tell WebGL how to convert from clip space to pixels
  73.     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  75.     // Clear the canvas.
  76.     gl.clear(gl.COLOR_BUFFER_BIT);
  78.     // Tell it to use our program (pair of shaders)
  79.     gl.useProgram(program);
  81.     // Turn on the attribute
  82.     gl.enableVertexAttribArray(positionLocation);
  84.     // Bind the position buffer.
  85.     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  87.     // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
  88.     var size = 2;          // 2 components per iteration
  89.     var type = gl.FLOAT;   // the data is 32bit floats
  90.     var normalize = false; // don't normalize the data
  91.     var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
  92.     var offset = 0;        // start at the beginning of the buffer
  93.     gl.vertexAttribPointer(
  94.         positionLocation, size, type, normalize, stride, offset);
  96.     // set the resolution
  97.     gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height);
  99.     // set the color
  100.     gl.uniform4fv(colorLocation, color);
  102.     // Set the translation.
  103.     gl.uniform2fv(translationLocation, translation);
  105.     // Set the rotation.
  106.     gl.uniform2fv(rotationLocation, rotation);
  108.     // Set the scale.
  109.     gl.uniform2fv(scaleLocation, scale);
  111.     // Draw the geometry.
  112.     var primitiveType = gl.TRIANGLES;
  113.     var offset = 0;
  114.     var count = 18;  // 6 triangles in the 'F', 3 points per triangle
  115.     gl.drawArrays(primitiveType, offset, count);
  116.   }
  117. }
  119. // Fill the buffer with the values that define a letter 'F'.
  120. function setGeometry(gl) {
  121.   gl.bufferData(
  122.       gl.ARRAY_BUFFER,
  123.       new Float32Array([
  124.           // left column
  125.           0, 0,
  126.           30, 0,
  127.           0, 150,
  128.           0, 150,
  129.           30, 0,
  130.           30, 150,
  132.           // top rung
  133.           30, 0,
  134.           100, 0,
  135.           30, 30,
  136.           30, 30,
  137.           100, 0,
  138.           100, 30,
  140.           // middle rung
  141.           30, 60,
  142.           67, 60,
  143.           30, 90,
  144.           30, 90,
  145.           67, 60,
  146.           67, 90,
  147.       ]),
  148.       gl.STATIC_DRAW);
  149. }
  151. main();
  154. // html
  156. <canvas id="canvas"></canvas>
  157. <div id="uiContainer">
  158.   <div id="ui">
  159.     <div id="x"></div>
  160.     <div id="y"></div>
  161.     <div id="angle"></div>
  162.     <div id="scaleX"></div>
  163.     <div id="scaleY"></div>
  164.   </div>
  165. </div>
  166. <!-- vertex shader -->
  167. <script  id="vertex-shader-2d" type="x-shader/x-vertex">
  168. attribute vec2 a_position;
  170. uniform vec2 u_resolution;
  171. uniform vec2 u_translation;
  172. uniform vec2 u_rotation;
  173. uniform vec2 u_scale;
  175. void main() {
  176.   // Scale the position
  177.   vec2 scaledPosition = a_position * u_scale;
  179.   // Rotate the position
  180.   vec2 rotatedPosition = vec2(
  181.      scaledPosition.x * u_rotation.y + scaledPosition.y * u_rotation.x,
  182.      scaledPosition.y * u_rotation.y - scaledPosition.x * u_rotation.x);
  184.   // Add in the translation.
  185.   vec2 position = rotatedPosition + u_translation;
  187.   // convert the position from pixels to 0.0 to 1.0
  188.   vec2 zeroToOne = position / u_resolution;
  190.   // convert from 0->1 to 0->2
  191.   vec2 zeroToTwo = zeroToOne * 2.0;
  193.   // convert from 0->2 to -1->+1 (clipspace)
  194.   vec2 clipSpace = zeroToTwo - 1.0;
  196.   gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
  197. }
  198. </script>
  199. <!-- fragment shader -->
  200. <script  id="fragment-shader-2d" type="x-shader/x-fragment">
  201. precision mediump float;
  203. uniform vec4 u_color;
  205. void main() {
  206.    gl_FragColor = u_color;
  207. }
  208. </script>https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
  210. <script src="https://webglfundamentals.org/webgl/resources/webgl-lessons-ui.js"></script>