From 7e9d5e519237190e171c5532b6792fa75394086f Mon Sep 17 00:00:00 2001
From: zuoguolei <zuoguolei@bobfintech.com.cn>
Date: Fri, 21 Apr 2023 16:39:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8A=A8=E6=80=81=E7=BB=98?=
 =?UTF-8?q?=E5=88=B6=E7=82=B9=E6=B3=A8=E9=87=8A=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...\346\263\250\351\207\212\347\211\210.html" | 200 ++++++++++++++++++
 1 file changed, 200 insertions(+)
 create mode 100644 "4_\345\212\250\346\200\201\347\273\230\345\210\266\347\202\271/code/\345\212\250\346\200\201\347\273\230\345\210\266\347\202\271_\346\263\250\351\207\212\347\211\210.html"
diff --git "a/4_\345\212\250\346\200\201\347\273\230\345\210\266\347\202\271/code/\345\212\250\346\200\201\347\273\230\345\210\266\347\202\271_\346\263\250\351\207\212\347\211\210.html" "b/4_\345\212\250\346\200\201\347\273\230\345\210\266\347\202\271/code/\345\212\250\346\200\201\347\273\230\345\210\266\347\202\271_\346\263\250\351\207\212\347\211\210.html"
new file mode 100644
index 0000000..250b6a1
--- /dev/null
+++ "b/4_\345\212\250\346\200\201\347\273\230\345\210\266\347\202\271/code/\345\212\250\346\200\201\347\273\230\345\210\266\347\202\271_\346\263\250\351\207\212\347\211\210.html"
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>绘制点</title>
+    <script src="./glMatrix-0.9.6.min.js"></script>
+    <script>
+      var projMat4 = mat4.create(); // 初始化一个4*4的矩阵
+      var webgl; // 声明全局变量
+      /**
+       * GLSL代码
+       * 声明一个顶点着色器
+       * vec4：四维向量 ，具有xyzw四个分量，分量是浮点数
+       * mat4: 4*4矩阵
+       * **/
+      var vertexString = `
+        attribute vec4 a_position;
+        uniform mat4 proj;
+        void main(){
+            gl_Position =a_position;
+            gl_PointSize = 60.0;
+        }
+        `;
+      var fragmentString = `
+        void main(){
+            gl_FragColor = vec4(0,0,1.0,1.0);
+        }
+        `; // 片元着色器
+
+      var POINTS = [];
+
+      // 入口函数
+      function init() {
+        initWebgl();
+        initShader();
+        initBuffer();
+      }
+      // webgl初始化函数
+      function initWebgl() {
+        // 获取canvas容器
+        let webglDiv = document.querySelector("#webglCanvas");
+        // 设置webgl上下文
+        webgl = webglDiv.getContext("webgl");
+        // 设置可视范围 https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/viewport
+        webgl.viewport(0, 0, webglDiv.width, webglDiv.height);
+        // 定义阴影范围
+        mat4.ortho(
+          0,
+          webglDiv.clientWidth,
+          webglDiv.clientHeight,
+          0,
+          -1,
+          1,
+          projMat4
+        );
+      }
+      // shder初始化函数
+      function initShader() {
+        // createShader() 用于创建一个 WebGLShader 着色器对象，该对象可以使用 shaderSource()和 compileShader() 方法配置着色器代码。
+        // 参数为gl.VERTEX_SHADER 或 gl.FRAGMENT_SHADER两者中的一个。
+        let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
+        let fssagder = webgl.createShader(webgl.FRAGMENT_SHADER);
+
+        // 用于将我们创建的 WebGLShader着色器对象和GLSL程序中定义的着色器相关联。
+        // 第一个参数为webglShader对象，第二个参数为GLSL中定义的着色器
+        webgl.shaderSource(vsshader, vertexString);
+        webgl.shaderSource(fssagder, fragmentString);
+
+        // 编译WebGLShader着色器，使其成为为二进制数据，然后就可以被WebGLProgram对象所使用。
+        // 参数为一个片元着色器或顶点着色器
+        webgl.compileShader(vsshader);
+        webgl.compileShader(fssagder);
+
+        // 创建一个webglProgram对象，该对象由两个编译过后的 WebGLShader 组成 - 顶点着色器和片段着色器（均由 GLSL 语言所写）
+        let program = webgl.createProgram();
+
+        // attachShader() 方法负责往 WebGLProgram 添加一个片段或者顶点着色器。
+        // 第一个参数为webglProgram对象，第二个参数为片段或者顶点的 WebGLShader
+        webgl.attachShader(program, vsshader);
+        webgl.attachShader(program, fssagder);
+
+        // linkProgram()方法链接给定的WebGLProgram，从而完成为程序的片元和顶点着色器准备 GPU 代码的过程。参数为一个用于链接的WebGLProgram对象
+        webgl.linkProgram(program);
+
+        // useProgram() 方法将定义好的WebGLProgram 对象添加到当前的渲染状态中。
+        webgl.useProgram(program);
+
+        webgl.program = program;
+      }
+      // 数据缓冲区初始化函数
+      function initBuffer() {
+        // getAttribLocation() 方法返回给定WebGLProgram对象中某属性的下标指向位置
+        // 第一个参数为WebGLProgram，第二个参数为需要获取下标指向位置的GLSL变量名
+        let aPosition = webgl.getAttribLocation(webgl.program, "a_position");
+
+        /**
+         * 监听鼠标点击事件
+         * 这儿需要注意的是两个坐标系之间的转换关系！
+         * **/
+        document.addEventListener("mousedown", function (e) {
+          // 做坐标系的变换！
+          let x = e.clientX;
+          let y = e.clientY;
+          let rect = e.target.getBoundingClientRect();
+          let top = rect.top;
+          let left = rect.left;
+          let pointx = (x - left - 250) / 250;
+          let pointy = -(y - top - 250) / 250;
+
+          // 将xy坐标填充进数组中
+          POINTS.push(pointx);
+          POINTS.push(pointy);
+          POINTS.push(0);
+          POINTS.push(1.0);
+
+          let pointPosition = new Float32Array(POINTS);
+
+          // createBuffer() 方法可创建并初始化一个用于储存顶点数据或着色数据的WebGLBuffer缓冲对象
+          let pointBuffer = webgl.createBuffer();
+
+          // bindBuffer() 方法将给定的WebGLBuffer绑定到目标。接收两个参数
+          // 第一个参数为：指定绑定点 (target)。可能的值：gl.ARRAY_BUFFER: 包含顶点属性的 Buffer，如顶点坐标，纹理坐标数据或顶点颜色数据。gl.ELEMENT_ARRAY_BUFFER: 用于元素索引的 Buffer。
+          // 第二个参数为要绑定的webglBuffer对象
+          webgl.bindBuffer(webgl.ARRAY_BUFFER, pointBuffer);
+
+          // bufferData() 方法创建并初始化了 Buffer 对象的数据存储区。接收6个参数
+          // 第一个参数为：指定 Buffer绑定目标，可以取如下的值：
+          // gl.ARRAY_BUFFER: 包含顶点属性的 Buffer，如顶点坐标，纹理坐标数据或顶点颜色数据。
+          // gl.ELEMENT_ARRAY_BUFFER: 用于元素索引的 Buffer。
+          // 第二个参数为：一个ArrayBuffer，SharedArrayBuffer 或者 ArrayBufferView 类型的数组对象，将被复制到 Buffer 的数据存储区。如果为null，数据存储区仍会被创建，但是不会进行初始化和定义。
+          // 第三个参数为： 指定数据存储区的使用方法，可以使用如下的值：gl.STATIC_DRAW: 缓冲区的内容可能经常使用，而不会经常更改。内容被写入缓冲区，但不被读取。 gl.DYNAMIC_DRAW: 缓冲区的内容可能经常被使用，并且经常更改。内容被写入缓冲区，但不被读取。 gl.STREAM_DRAW: 缓冲区的内容可能不会经常使用。内容被写入缓冲区，但不被读取。
+          webgl.bufferData(
+            webgl.ARRAY_BUFFER,
+            pointPosition,
+            webgl.STATIC_DRAW
+          );
+
+          // enableVertexAttribArray()方法，可以打开属性数组列表中指定索引处的通用顶点属性数组。在 WebGL 中，作用于顶点的数据会先储存在attributes。这些数据仅对 JavaScript 代码和顶点着色器可用。属性由索引号引用到 GPU 维护的属性列表中。在不同的平台或 GPU 上，某些顶点属性索引可能具有预定义的值。创建属性时，WebGL 层会分配其他属性。无论怎样，都需要你使用enableVertexAttribArray()方法，来激活每一个属性以便使用，不被激活的属性是不会被使用的。一旦激活，以下其他方法就可以获取到属性的值了，包括vertexAttribPointer()，vertexAttrib()，和 getVertexAttrib()。
+          webgl.enableVertexAttribArray(aPosition);
+
+          // vertexAttribPointer ()方法将当前绑定到 gl.ARRAY _ BUFFER 的缓冲区绑定到当前顶点缓冲区对象的通用顶点属性，并指定其布局。接收6个参数
+          // 第一个参数为：指定要修改的顶点属性的索引
+          // 第二个参数为：指定每个顶点属性需要几个维度的坐标确定，必须是1、2、3或4。
+          // 第三个参数为：指定数组中每个元素的数据类型。
+          // 第四个参数为：在转换为浮点数时是否应将整数数据值规范化为某个范围，一般为false
+          // 第五个参数为：一个维度的坐标需要几个字节
+          // 第六个参数为：绘制第一个点时的偏移量
+
+          webgl.vertexAttribPointer(
+            aPosition,
+            4,
+            webgl.FLOAT,
+            false,
+            4 * 4,
+            0 * 4
+          );
+
+          draw();
+        });
+
+        // getUniformLocation（）方法用于获取指定WebGLProgram对象中uniform变量的位置。
+        // 第一个参数为要获取uniform变量的WebGLProgram对象，第二个参数为要获取位置的uniform变量的名称。
+        let uniforproj = webgl.getUniformLocation(webgl.program, "proj");
+
+        // uniformMatrix4fv（）用于设置一个4*4的矩阵类型的uniform变量值。接收4个参数
+        // 第一个参数为 要设置值的uniform变量的地址
+        // 第二个参数为 是否将矩阵转置，默认false
+        // 第三个参数为  要设置的值，应该是一个4*4的矩阵
+        // 第四个参数为 矩阵在数组中的偏移量，默认为0
+        webgl.uniformMatrix4fv(uniforproj, false, projMat4);
+      }
+      // webgl的绘制函数
+      function draw() {
+        // clearColor ()方法指定在清除颜色缓冲区时使用的颜色值。接收的4个参数分别表示 r,g,b,a。取值均在0和1之间。
+        webgl.clearColor(0.0, 0.0, 0.0, 1.0);
+        // clear() 方法使用预设值来清空缓冲。预设值可以使用 clearColor() 、 clearDepth() 或 clearStencil() 设置。裁剪、抖动处理和缓冲写入遮罩会影响 clear() 方法。参数为一个用于指定需要清除的缓冲区的 GLbitfield (en-US) 。可能的值有：gl.COLOR_BUFFER_BIT(颜色缓冲区)；gl.DEPTH_BUFFER_BIT (深度缓冲区)       gl.STENCIL_BUFFER_BIT(模板缓冲区)  没有返回值
+        webgl.clear(webgl.COLOR_BUFFER_BIT);
+
+        // drawArrays() 方法用于从向量数组中绘制图元。接收3个参数
+        // 第一个参数为指定绘制图元的方式，可能值如下：
+        // gl.POINTS: 绘制一系列点。
+        // gl.LINE_STRIP: 绘制一个线条。即，绘制一系列线段，上一点连接下一点。
+        // gl.LINE_LOOP: 绘制一个线圈。即，绘制一系列线段，上一点连接下一点，并且最后一点与第一个点相连。
+        // gl.LINES: 绘制一系列单独线段。每两个点作为端点，线段之间不连接。
+        // gl.TRIANGLE_STRIP：绘制一个三角带。
+        // gl.TRIANGLE_FAN：绘制一个三角扇。
+        // gl.TRIANGLES: 绘制一系列三角形。每三个点作为顶点。
+        // 第二个参数为指定从哪个点开始绘制。
+        // 第三个参数为指定绘制需要使用到多少个点。
+        webgl.drawArrays(webgl.POINTS, 0, POINTS.length);
+      }
+    </script>
+  </head>
+
+  <body onload="init()">
+    <canvas id="webglCanvas" width="500" height="500"></canvas>
+  </body>
+</html>
-- 
Gitee

