点的颜色

docs/WebGL点的绘制.md

@@ -1,7 +1,5 @@
 # 1 设置背景色
 
-## 主要代码文件
-
 >src/index.html
 >
 >src/webgl/hello.js
@@ -25,7 +23,6 @@ gl.clear(gl.COLOR_BUFFER_BIT);
 
 # 2 绘制点
 
->主要代码
 
 >src/index.html
 >
@@ -78,12 +75,16 @@ gl.drawArrays(gl.POINTS,0,1);
 
 # 3 webgl函数封装
 
-主要代码
+
 > src/lib/webgl.js
 >
 > src/webgl/point2.js
 
 # 4 点的位置和大小修改
 
-主要代码
-> src/webgl/point3.js
+
+> src/webgl/point3.js
+
+# 5 鼠标点击创建点
+
+# 6 鼠标点击创建不同颜色的点

src/index.js

@@ -2,6 +2,8 @@ import hello from "./webgl/hello";
 import point from "./webgl/point";
 import point2 from "./webgl/point2";
 import point3 from "./webgl/point3";
+import point4 from "./webgl/point4";
+import point5 from "./webgl/point5";
 
 // 清空canvas
 // hello();
@@ -13,4 +15,11 @@ import point3 from "./webgl/point3";
 // point2();
 
 // 点的位置修改
-point3();
+// point3();
+
+
+// 鼠标点击绘制点
+// point4();
+
+// 鼠标点击绘制不同颜色的点
+point5();

src/webgl/point4.js

@@ -34,15 +34,35 @@ export default function(){
     if (a_PointSize < 0) {
         console.error("获取点位置信息失败");
     }
-    // 设置点的位置    
-    // gl.vertexAttrib3f(a_Position,0.5,0.0,0.0);
-    // gl.vertexAttrib1f(a_Position,-0.5);
-    // gl.vertexAttrib2f(a_Position,0.5,0.0);
-    gl.vertexAttrib4f(a_Position,-0.5,0.0,0.0,1.0);
-
     // 设置点的大小
     gl.vertexAttrib1f(a_PointSize,20.0);
+    // 注册点击事件
+    canvas.onmousedown = function(ev){
+        click(ev,gl,canvas,a_Position);
+    }  
+}
+
+// 所有已点击的点位置
+let g_points = [];
+
+function click(ev,gl,canvas,a_Position){
+    let x = ev.clientX;
+    let y = ev.clientY;
+    let rect = ev.target.getBoundingClientRect();
+
+    x = ((x-rect.left) - canvas.width/2)/(canvas.width/2);
+    y = (canvas.height/2 - (y - rect.top))/(canvas.height/2);
 
-    // 绘制点
-    gl.drawArrays(gl.POINTS,0,1);
-}
+    g_points.push([x,y]);
+
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    let len = g_points.length;
+
+    for (let i = 0; i < len; i = i + 1) {
+        let xy = g_points[i];
+        gl.vertexAttrib3f(a_Position,xy[0],xy[1],0.0);
+
+        gl.drawArrays(gl.POINTS,0,1);
+    }
+}

src/webgl/point5.js

@@ -0,0 +1,83 @@
+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 =`
+        precision mediump float;
+        uniform vec4 u_FragColor;
+        void main() {
+            gl_FragColor = u_FragColor;
+        }
+    `;
+
+    // 初始化gl
+    setShader(gl,v_shader_source,f_shader_source);
+
+    // 获取OpenGL ES点位置变量地址
+    let a_Position = gl.getAttribLocation(gl.program,'a_Position');
+    if (a_Position < 0) {
+        console.error("获取点位置信息失败");
+    }
+    let a_PointSize = gl.getAttribLocation(gl.program,'a_PointSize');
+    if (a_PointSize < 0) {
+        console.error("获取点位置信息失败");
+    }
+    let u_FragColor = gl.getUniformLocation(gl.program,'u_FragColor');
+    // 设置点的大小
+    gl.vertexAttrib1f(a_PointSize,20.0);
+    // 注册点击事件
+    canvas.onmousedown = function(ev){
+        click(ev,gl,canvas,a_Position,u_FragColor);
+    }  
+}
+
+// 所有已点击的点位置
+let g_points = [];
+let g_colors = [];
+
+function click(ev,gl,canvas,a_Position,u_FragColor){
+    let x = ev.clientX;
+    let y = ev.clientY;
+    let rect = ev.target.getBoundingClientRect();
+
+    x = ((x-rect.left) - canvas.width/2)/(canvas.width/2);
+    y = (canvas.height/2 - (y - rect.top))/(canvas.height/2);
+
+    g_points.push([x,y]);
+
+    // 点的颜色
+    if (x >= 0.0 && y>= 0.0) {
+        g_colors.push([1.0,0.0,0.0,1.0]);//红色
+    } else if( x < 0.0 && y < 0.0) {
+        g_colors.push([0.0,1.0,0.0,1.0]);//绿色
+    } else {
+        g_colors.push([1.0,1.0,1.0,1.0]);//白色
+    }
+
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    let len = g_points.length;
+
+    for (let i = 0; i < len; i = i + 1) {
+        let xy = g_points[i];
+        let rgba = g_colors[i];
+
+        gl.vertexAttrib3f(a_Position,xy[0],xy[1],0.0);
+        gl.uniform4f(u_FragColor,rgba[0],rgba[1],rgba[2],rgba[3]);
+        gl.drawArrays(gl.POINTS,0,1);
+    }
+}