From 3389a617eb91821a5ea99cfbc2028725100e8c87 Mon Sep 17 00:00:00 2001
From: zuoguolei <zuoguolei@bobfintech.com.cn>
Date: Fri, 21 Apr 2023 11:27:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=BB=98=E5=88=B6=E7=82=B9?=
 =?UTF-8?q?=E7=9A=84=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" | 141 ++++++++++++++++++
 1 file changed, 141 insertions(+)
 create mode 100644 "3_\347\273\230\345\210\266\345\215\225\344\270\252\347\202\271/code/\347\273\230\345\210\266\347\202\271_\346\263\250\351\207\212\347\211\210.html"
diff --git "a/3_\347\273\230\345\210\266\345\215\225\344\270\252\347\202\271/code/\347\273\230\345\210\266\347\202\271_\346\263\250\351\207\212\347\211\210.html" "b/3_\347\273\230\345\210\266\345\215\225\344\270\252\347\202\271/code/\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..35e65b0
--- /dev/null
+++ "b/3_\347\273\230\345\210\266\345\215\225\344\270\252\347\202\271/code/\347\273\230\345\210\266\347\202\271_\346\263\250\351\207\212\347\211\210.html"
@@ -0,0 +1,141 @@
+<!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 =proj * a_position;
+            gl_PointSize = 60.0;
+        }
+        `;
+      var fragmentString = `
+        void main(){
+            gl_FragColor = vec4(0,0,1.0,1.0);
+        }
+        `; // 片元着色器
+
+      // 入口函数
+      function init() {
+        initWebgl();
+        initShader();
+        initBuffer();
+        draw();
+      }
+      // 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() {
+        //Float32Array 类型数组代表的是平JS内置的标准对象，为 32 位的浮点数型数组，其内容初始化为 0。一旦建立起来，你可以使用这个对象的方法对其元素进行操作，或者使用标准数组索引语法 (使用方括号)。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Float32Array
+        let pointPosition = new Float32Array([100.0, 100.0, 0.0, 1.0]);
+
+        // getAttribLocation() 方法返回给定WebGLProgram对象中某属性的下标指向位置
+        // 第一个参数为WebGLProgram，第二个参数为需要获取下标指向位置的GLSL变量名
+        let aPosition = webgl.getAttribLocation(webgl.program, "a_position");
+
+        // vertexAttrib4fv（）方法可以为顶点 attibute 变量赋值。
+        // 第一个参数为指定了待修改顶点 attribute 变量的存储位置。第二个参数为用于设置顶点 attibute 变量的向量值。
+        webgl.vertexAttrib4fv(aPosition, pointPosition);
+
+        // 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, 1);
+      }
+    </script>
+  </head>
+
+  <body onload="init()">
+    <canvas id="webglCanvas" width="500" height="500"></canvas>
+  </body>
+</html>
-- 
Gitee

