From f095d0f4eacfedcf7689214e2c4b77a8d40272ac Mon Sep 17 00:00:00 2001 From: zmw Date: Thu, 24 May 2018 21:55:09 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E4=B8=AA=E7=82=B9=E7=9A=84=E7=BB=98?= =?UTF-8?q?=E5=88=B6=20=E4=B8=89=E8=A7=92=E5=BD=A2=E7=9A=84=E7=BB=98?= =?UTF-8?q?=E5=88=B6=20=E7=9F=A9=E5=BD=A2=E7=9A=84=E7=BB=98=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + ...42\347\232\204\347\273\230\345\210\266.md" | 11 ++ ...71\347\232\204\347\273\230\345\210\266.md" | 24 +++- src/index.js | 33 +++++- src/webgl/point6.js | 78 +++++++++++++ src/webgl/point7.js | 105 +++++++++++++++++ src/webgl/point8.js | 89 +++++++++++++++ src/webgl/point9.js | 98 ++++++++++++++++ src/webgl/rectangle.js | 108 ++++++++++++++++++ src/webgl/triangle.js | 81 +++++++++++++ src/webgl/triangle2.js | 96 ++++++++++++++++ 11 files changed, 721 insertions(+), 3 deletions(-) create mode 100644 "docs/WebGL\344\270\211\350\247\222\345\275\242\347\232\204\347\273\230\345\210\266.md" create mode 100644 src/webgl/point6.js create mode 100644 src/webgl/point7.js create mode 100644 src/webgl/point8.js create mode 100644 src/webgl/point9.js create mode 100644 src/webgl/rectangle.js create mode 100644 src/webgl/triangle.js create mode 100644 src/webgl/triangle2.js diff --git a/README.md b/README.md index e89a4a3..3e2bfd7 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,4 @@ - [搭建web环境](./docs/Web环境) - [webgl程序结构](./docs/WebGL程序结构.md) - [webgl点的绘制](./docs/WebGL点的绘制.md) +- [webgl三角形的绘制](./docs/WebGL三角形的绘制.md) diff --git "a/docs/WebGL\344\270\211\350\247\222\345\275\242\347\232\204\347\273\230\345\210\266.md" "b/docs/WebGL\344\270\211\350\247\222\345\275\242\347\232\204\347\273\230\345\210\266.md" new file mode 100644 index 0000000..ad92c16 --- /dev/null +++ "b/docs/WebGL\344\270\211\350\247\222\345\275\242\347\232\204\347\273\230\345\210\266.md" @@ -0,0 +1,11 @@ +# 1 三角形的绘制 + +> src/webgl/triangle.js + +# 2 彩色三角形的绘制 + +> src/webgl/triangle2.js + +# 3 矩形的绘制 + +> src/webgl/rectangle.js \ No newline at end of file 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 816bacc..4f9b4c8 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" @@ -82,9 +82,29 @@ gl.drawArrays(gl.POINTS,0,1); # 4 点的位置和大小修改 - > src/webgl/point3.js # 5 鼠标点击创建点 -# 6 鼠标点击创建不同颜色的点 \ No newline at end of file +> 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 \ No newline at end of file diff --git a/src/index.js b/src/index.js index e1d1a6d..db93934 100644 --- a/src/index.js +++ b/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(); \ No newline at end of file +// point5(); + +// 绘制多个点 +// point6(); + +// 绘制不同大小的多个点(多个缓冲区对象) +// point7(); + +// 绘制不同大小的多个点(单个缓冲区对象) +// point8(); + +// 绘制不同颜色不同大小的多个点(单个缓冲区对象) +// point9(); + +// 绘制三角形 +// triangle(); + +// 彩色三角形 +triangle2(); + +// 绘制矩形 +// rectangle(); \ No newline at end of file diff --git a/src/webgl/point6.js b/src/webgl/point6.js new file mode 100644 index 0000000..58ee8c6 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/webgl/point7.js b/src/webgl/point7.js new file mode 100644 index 0000000..2964952 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/webgl/point8.js b/src/webgl/point8.js new file mode 100644 index 0000000..1e5a04b --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/webgl/point9.js b/src/webgl/point9.js new file mode 100644 index 0000000..a004f62 --- /dev/null +++ b/src/webgl/point9.js @@ -0,0 +1,98 @@ +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; + // 接受js数据 + attribute vec4 a_Color; + // 传递到片元数据 + varying vec4 v_Color; + + void main() { + gl_Position = a_Position; + gl_PointSize = 10.0; + v_Color = a_Color; + } + `; + let f_shader_source =` + + precision mediump float; + // 读取顶点数据 + varying vec4 v_Color; + + void main() { + // 设置片元数据 + gl_FragColor = v_Color; + } + `; + + // 初始化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.TRIANGLES,0,n); +} + +function initVertexBuffers(gl){ + + // 点的位置与颜色数据 + let verticesColors = new Float32Array([ + 0.0, 0.5, 1.0, 0.0, 0.0, + -0.5, -0.5, 0.0, 1.0, 0.0, + 0.5, -0.5, 0.0, 0.0, 1.0 + ]); + let n = 3; + // 每个元素的大小 + let FSIZE = verticesColors.BYTES_PER_ELEMENT; + + // 创建缓冲区对象 + let vertexBuffer = gl.createBuffer(); + if (!vertexBuffer) { + console.error("创建缓存对象失败"); + return -1; + } + // 绑定到顶顶缓冲区 + gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer); + // 向缓冲区对象写入数据 + gl.bufferData(gl.ARRAY_BUFFER,verticesColors,gl.STATIC_DRAW); + + let a_Position = gl.getAttribLocation(gl.program,'a_Position'); + if (a_Position < 0) { + console.error("获取a_Position失败"); + return -1; + } + let a_Color = gl.getAttribLocation(gl.program,'a_Color'); + if (a_Color < 0) { + console.error("获取a_Color失败"); + return -1; + } + + // 读取a_Position数据 每隔5个读取其中开始2个 + gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,FSIZE * 5,0); + // 开启缓存对象到变量 + gl.enableVertexAttribArray(a_Position); + + // 读取a_PointSize数据 每隔3个读取其中末尾3个 + gl.vertexAttribPointer(a_Color,3,gl.FLOAT,false,FSIZE * 5,FSIZE * 2); + // 开启缓存对象到变量 + gl.enableVertexAttribArray(a_Color); + + return n; +} \ No newline at end of file diff --git a/src/webgl/rectangle.js b/src/webgl/rectangle.js new file mode 100644 index 0000000..927ab18 --- /dev/null +++ b/src/webgl/rectangle.js @@ -0,0 +1,108 @@ +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; + } + `; + 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.LINES,0,n); + + // 绘制多个连续线段 + // gl.drawArrays(gl.LINE_STRIP,0,n); + + // 绘制连续的线段 + // gl.drawArrays(gl.LINE_LOOP,0,n); + + // 绘制三角形 + // gl.drawArrays(gl.TRIANGLES,0,n); + + // 绘制连续的三角形 + /** + * (v0 v1 v2) + * (v2 v1 v3) + */ + gl.drawArrays(gl.TRIANGLE_STRIP,0,n); + + // 绘制带状三角形 + /** + * (v0 v1 v2) + * (v0 v2 v3) + */ + // gl.drawArrays(gl.TRIANGLE_FAN,0,n); + +} + +function initVertexBuffers(gl){ + // 点的位置数据 + /** + * v0 v2 + * -0.5 0.5 0.5 0.5 + * + * + * v1 v3 + * -0.5 -0.5 0.5 -0.5 + * + */ + + let vertices = new Float32Array([ + -0.5, 0.5, + -0.5,-0.5, + 0.5, 0.5, + 0.5,-0.5 + ]); + let n = 4; + + // 点位置变量 + 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; +} \ No newline at end of file diff --git a/src/webgl/triangle.js b/src/webgl/triangle.js new file mode 100644 index 0000000..cc6e4df --- /dev/null +++ b/src/webgl/triangle.js @@ -0,0 +1,81 @@ +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; + } + `; + 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.LINES,0,n); + + // 绘制多个连续线段 + // gl.drawArrays(gl.LINE_STRIP,0,n); + + // 绘制连续的线段 + // gl.drawArrays(gl.LINE_LOOP,0,n); + + // 绘制三角形 + gl.drawArrays(gl.TRIANGLES,0,n); + +} + +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; +} \ No newline at end of file diff --git a/src/webgl/triangle2.js b/src/webgl/triangle2.js new file mode 100644 index 0000000..c58454a --- /dev/null +++ b/src/webgl/triangle2.js @@ -0,0 +1,96 @@ +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; + } + `; + let f_shader_source =` + precision mediump float; + uniform float u_Width; + uniform float u_Height; + + void main() { + // 设置片元数据 + gl_FragColor = vec4( + gl_FragCoord.x/u_Width,0.0, + gl_FragCoord.y/u_Height,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.TRIANGLES,0,n); +} + +function initVertexBuffers(gl){ + + // 点的位置与颜色数据 + let vertices = new Float32Array([ + 0.0, 0.5, + -0.5, -0.5, + 0.5, -0.5, + ]); + let n = 3; + + // 创建缓冲区对象 + 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); + + let a_Position = gl.getAttribLocation(gl.program,'a_Position'); + if (a_Position < 0) { + console.error("获取a_Position失败"); + return -1; + } + // 读取a_Position数据 每隔5个读取其中开始2个 + gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0); + // 开启缓存对象到变量 + gl.enableVertexAttribArray(a_Position); + + // 读取位置信息 + + let u_Width = gl.getUniformLocation(gl.program,'u_Width'); + if (u_Width < 0) { + console.error("获取u_Width失败"); + return -1; + } + let u_Height = gl.getUniformLocation(gl.program,'u_Height'); + if (u_Height < 0) { + console.error("获取u_Height失败"); + return -1; + } + + gl.uniform1f(u_Width,gl.drawingBufferWidth); + gl.uniform1f(u_Height,gl.drawingBufferHeight); + + + + return n; +} \ No newline at end of file