多个点的绘制 三角形的绘制 矩形的绘制

README.md

@@ -3,3 +3,4 @@
 - [搭建web环境](./docs/Web环境)
 - [webgl程序结构](./docs/WebGL程序结构.md)
 - [webgl点的绘制](./docs/WebGL点的绘制.md)
+- [webgl三角形的绘制](./docs/WebGL三角形的绘制.md)

docs/WebGL三角形的绘制.md

@@ -0,0 +1,11 @@
+# 1 三角形的绘制
+
+> src/webgl/triangle.js
+
+# 2 彩色三角形的绘制
+
+> src/webgl/triangle2.js
+
+# 3 矩形的绘制
+
+> src/webgl/rectangle.js

docs/WebGL点的绘制.md

@@ -82,9 +82,29 @@ gl.drawArrays(gl.POINTS,0,1);
 
 # 4 点的位置和大小修改
 
-
 > src/webgl/point3.js
 
 # 5 鼠标点击创建点
 
-# 6 鼠标点击创建不同颜色的点
+> src/webgl/point4.js
+
+# 6 鼠标点击创建不同颜色的点
+
+> src/webgl/point5.js
+
+# 7 绘制多个点
+
+> src/webgl/point6.js
+
+
+# 8 绘制不同大小的多个点(多个缓冲区对象)
+
+> src/webgl/point7.js
+
+# 9 环志不同大小的多个点(单个缓冲区对象)
+
+> src/webgl/point8.js
+
+# 10 绘制不同颜色不同大小的多个点(单个缓冲区对象)
+
+> src/webgl/point9.js

src/index.js

@@ -4,6 +4,16 @@ import point2 from "./webgl/point2";
 import point3 from "./webgl/point3";
 import point4 from "./webgl/point4";
 import point5 from "./webgl/point5";
+import point6 from "./webgl/point6";
+import point7 from "./webgl/point7";
+import point8 from "./webgl/point8";
+import point9 from "./webgl/point9";
+
+import triangle from "./webgl/triangle";
+import triangle2 from "./webgl/triangle2";
+
+import rectangle from "./webgl/rectangle";
+
 
 // 清空canvas
 // hello();
@@ -22,4 +32,25 @@ import point5 from "./webgl/point5";
 // point4();
 
 // 鼠标点击绘制不同颜色的点
-point5();
+// point5();
+
+// 绘制多个点
+// point6();
+
+// 绘制不同大小的多个点(多个缓冲区对象)
+// point7();
+
+// 绘制不同大小的多个点(单个缓冲区对象)
+// point8();
+
+// 绘制不同颜色不同大小的多个点(单个缓冲区对象)
+// point9();
+
+// 绘制三角形
+// triangle();
+
+// 彩色三角形
+triangle2();
+
+// 绘制矩形
+// rectangle();

src/webgl/point6.js

@@ -0,0 +1,78 @@
+import {getContext,setShader} from './../lib/webgl';
+
+export default function(){
+    // 获取webgl
+    const canvas = document.getElementById('webgl');
+    const gl = getContext(canvas);
+
+
+
+    // 着色器代码
+    let v_shader_source = `
+        attribute vec4 a_Position;
+        void main() {
+            gl_Position = a_Position;
+            gl_PointSize = 10.0;
+        }
+    `;
+    let f_shader_source =`
+        void main() {
+            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
+        }
+    `;
+
+    // 初始化gl
+    setShader(gl,v_shader_source,f_shader_source);
+
+    // 设置订单位置
+    let n = initVertexBuffers(gl);
+    if (n < 0) {
+        console.error("设置顶点失败");
+        return false;
+    }
+
+    // 绘制多个点
+    gl.drawArrays(gl.POINTS,0,n);
+
+    // 绘制一个点
+    // gl.drawArrays(gl.POINTS,0,1);
+
+    // 绘制第二个点
+    // gl.drawArrays(gl.POINTS,1,1);
+}
+
+function initVertexBuffers(gl){
+    // 点的位置数据
+    let vertices = new Float32Array([
+        0.0,0.5, -0.5,-0.5, 0.5,-0.5
+    ]);
+    let n = 3;
+
+    // 点位置变量
+    let  a_Position = gl.getAttribLocation(gl.program,'a_Position');
+    if (a_Position < 0) {
+        console.error("获取a_Position失败");
+        return -1;
+    }
+
+    // 创建缓冲区对象
+    let vertexBuffer = gl.createBuffer();
+    if (!vertexBuffer) {
+        console.error("创建缓存对象失败");
+        return -1;
+    }
+
+    // 绑定缓存区对象到目标
+    gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
+
+    // 向缓冲区对象写入数据
+    gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
+
+    // 将缓冲区对象分配给a_Position
+    gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);
+
+    // 开启缓存对象到变量
+    gl.enableVertexAttribArray(a_Position);
+
+    return n;
+}

src/webgl/point7.js

@@ -0,0 +1,105 @@
+import {getContext,setShader} from './../lib/webgl';
+
+export default function(){
+    // 获取webgl
+    const canvas = document.getElementById('webgl');
+    const gl = getContext(canvas);
+
+
+
+    // 着色器代码
+    let v_shader_source = `
+        attribute vec4 a_Position;
+        attribute float a_PointSize;
+        void main() {
+            gl_Position = a_Position;
+            gl_PointSize = a_PointSize;
+        }
+    `;
+    let f_shader_source =`
+        void main() {
+            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
+        }
+    `;
+
+    // 初始化gl
+    setShader(gl,v_shader_source,f_shader_source);
+
+    // 设置订单位置
+    let n = initVertexBuffers(gl);
+    if (n < 0) {
+        console.error("设置顶点失败");
+        return false;
+    }
+
+    // 绘制多个点
+    gl.drawArrays(gl.POINTS,0,n);
+
+    // 绘制一个点
+    // gl.drawArrays(gl.POINTS,0,1);
+
+    // 绘制第二个点
+    // gl.drawArrays(gl.POINTS,1,1);
+}
+
+function initVertexBuffers(gl){
+    /***************点位置****************************/
+    // 点的位置数据
+    let vertices = new Float32Array([
+        0.0,0.5, -0.5,-0.5, 0.5,-0.5
+    ]);
+    let n = 3;
+
+    let  a_Position = gl.getAttribLocation(gl.program,'a_Position');
+    if (a_Position < 0) {
+        console.error("获取a_Position失败");
+        return -1;
+    }
+    // 创建缓冲区对象
+    let vertexBuffer = gl.createBuffer();
+    if (!vertexBuffer) {
+        console.error("创建缓存对象失败");
+        return -1;
+    }
+    // 绑定到顶顶缓冲区
+    gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
+    // 向缓冲区对象写入数据
+    gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
+    // 将缓冲区对象分配给a_Position
+    gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);
+    // 开启缓存对象到变量
+    gl.enableVertexAttribArray(a_Position);
+
+    /***************点尺寸****************************/
+    // 点的尺寸数据
+    let sizes = new Float32Array([
+        10.0,20.0,30.0
+    ]);
+    // 点位置变量
+    let a_PointSize = gl.getAttribLocation(gl.program,'a_PointSize');
+    if (a_PointSize < 0) {
+        console.error("a_PointSize获取失败");
+        return -1;
+    }
+
+    // 创建缓冲区对象
+    let sizeBuffer = gl.createBuffer();
+    if (!sizeBuffer) {
+        console.error("创建缓存对象失败");
+        return -1;
+    }
+
+    // 绑定到尺寸缓冲区
+    gl.bindBuffer(gl.ARRAY_BUFFER,sizeBuffer);
+
+    // 将数据写入到缓冲区
+    gl.bufferData(gl.ARRAY_BUFFER,sizes,gl.STATIC_DRAW);
+
+    // 将缓冲区对象分配给a_PointSize 
+    gl.vertexAttribPointer(a_PointSize,1,gl.FLOAT,false,0,0);
+
+    // 开启缓存对象到变量
+    gl.enableVertexAttribArray(a_PointSize);
+
+    return n;
+}

src/webgl/point8.js

@@ -0,0 +1,89 @@
+import {getContext,setShader} from './../lib/webgl';
+
+export default function(){
+    // 获取webgl
+    const canvas = document.getElementById('webgl');
+    const gl = getContext(canvas);
+
+
+
+    // 着色器代码
+    let v_shader_source = `
+        attribute vec4 a_Position;
+        attribute float a_PointSize;
+        void main() {
+            gl_Position = a_Position;
+            gl_PointSize = a_PointSize;
+        }
+    `;
+    let f_shader_source =`
+        void main() {
+            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
+        }
+    `;
+
+    // 初始化gl
+    setShader(gl,v_shader_source,f_shader_source);
+
+    // 设置订单位置
+    let n = initVertexBuffers(gl);
+    if (n < 0) {
+        console.error("设置顶点失败");
+        return false;
+    }
+
+    // 绘制多个点
+    gl.drawArrays(gl.POINTS,0,n);
+
+    // 绘制一个点
+    // gl.drawArrays(gl.POINTS,0,1);
+
+    // 绘制第二个点
+    // gl.drawArrays(gl.POINTS,1,1);
+}
+
+function initVertexBuffers(gl){
+
+    // 点的位置与尺寸数据
+    let verticesSizes = new Float32Array([
+         0.0,   0.5,  10.0,
+        -0.5,  -0.5,  20.0,
+         0.5,  -0.5,   30.0
+    ]);
+    let n = 3;
+    // 每个元素的大小
+    let FSIZE = verticesSizes.BYTES_PER_ELEMENT;
+
+    // 创建缓冲区对象
+    let vertexBuffer = gl.createBuffer();
+    if (!vertexBuffer) {
+        console.error("创建缓存对象失败");
+        return -1;
+    }
+    // 绑定到顶顶缓冲区
+    gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
+    // 向缓冲区对象写入数据
+    gl.bufferData(gl.ARRAY_BUFFER,verticesSizes,gl.STATIC_DRAW);
+
+    let  a_Position = gl.getAttribLocation(gl.program,'a_Position');
+    if (a_Position < 0) {
+        console.error("获取a_Position失败");
+        return -1;
+    }
+    let  a_PointSize = gl.getAttribLocation(gl.program,'a_PointSize');
+    if (a_PointSize < 0) {
+        console.error("获取a_PointSize失败");
+        return -1;
+    }
+
+    // 读取a_Position数据 每隔3个读取其中开始2个
+    gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,FSIZE * 3,0);
+    // 开启缓存对象到变量
+    gl.enableVertexAttribArray(a_Position);
+    // 读取a_PointSize数据 每隔3个读取其中末尾1个
+    gl.vertexAttribPointer(a_PointSize,1,gl.FLOAT,false,FSIZE * 3,FSIZE * 2);
+    // 开启缓存对象到变量
+    gl.enableVertexAttribArray(a_PointSize);
+
+    return n;
+}