From 5a477c018d1e2bf2c383ab6e1a3fe02afd1997f4 Mon Sep 17 00:00:00 2001 From: zmw Date: Wed, 23 May 2018 20:30:40 +0800 Subject: [PATCH] =?UTF-8?q?=E7=82=B9=E7=9A=84=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...71\347\232\204\347\273\230\345\210\266.md" | 13 +-- src/index.js | 11 ++- src/webgl/point4.js | 38 +++++++-- src/webgl/point5.js | 83 +++++++++++++++++++ 4 files changed, 129 insertions(+), 16 deletions(-) create mode 100644 src/webgl/point5.js diff --git "a/docs/WebGL\347\202\271\347\232\204\347\273\230\345\210\266.md" "b/docs/WebGL\347\202\271\347\232\204\347\273\230\345\210\266.md" index a1b315d..816bacc 100644 --- "a/docs/WebGL\347\202\271\347\232\204\347\273\230\345\210\266.md" +++ "b/docs/WebGL\347\202\271\347\232\204\347\273\230\345\210\266.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 \ No newline at end of file + +> src/webgl/point3.js + +# 5 鼠标点击创建点 + +# 6 鼠标点击创建不同颜色的点 \ No newline at end of file diff --git a/src/index.js b/src/index.js index 9065cb0..e1d1a6d 100644 --- a/src/index.js +++ b/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(); \ No newline at end of file diff --git a/src/webgl/point4.js b/src/webgl/point4.js index aca4776..568460a 100644 --- a/src/webgl/point4.js +++ b/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); -} \ No newline at end of file + 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); + } +} diff --git a/src/webgl/point5.js b/src/webgl/point5.js new file mode 100644 index 0000000..b4a8a9f --- /dev/null +++ b/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); + } +}