原生webgl学习（四） WebGL绘制矩形（一）

本专栏所有文章示例代码均可在我的gitee码云上获取，读者可自行下载：https://gitee.com/babyogl/learnWebGL；本节代码在文件夹chapter-02里面的color-triangle-02.html。

上节课笔者绘制了一个颜色随顶点位置变化的三角形，实现平移、旋转和缩放变换的矩阵计算，并提供了一个可供交互的菜单栏工具：原生webgl学习（三） WebGL中的矩阵运算：平移、旋转和缩放；

在前面我们已经画了两次三角形了，这次，改变一些套路，我们画矩形。画矩形的代码跟上一节大同小异，代码解释可以参考上一节：原生webgl学习（三） WebGL中的矩阵运算：平移、旋转和缩放，唯一不同的是顶点坐标发生了改变，利用两个三角形构成一个矩形，只需要将代码中的顶点稍作修改即可：

let positions = [-150, -100,150, -100,-150,  100,150, -100,-150,  100,150,  100];

在画图的时候gl.drawArrays的参数稍作修改即可，由于顶点数组长度增加，由原来的3个顶点变为6个顶点，故count应变为6，在这里提供一种更加友好的方法，可以根据数组的长度画图：

 //这样一来对所有数组都适用，三维的为positions.length / 3let primitiveType = gl.TRIANGLES;let offset3 = 0;let count = positions.length / 2;gl.drawArrays(primitiveType, offset3, count);//画图

这个demo的代码在你们下载的文件夹下的chapter-02里面的color-triangle-02.html，运行效果如下：

大家要注意，这个demo的矩形的颜色并不会随着顶点的位置的变化而变化，那是由于在JavaScript代码里面，已经提前设置好顶点的颜色，所以着色器代码也要稍微修改一下：

<script id="vertex-shader" type="x-shader/x-vertex">attribute vec2 a_position;attribute vec4 a_color;uniform mat3 u_matrix;varying vec4 v_color;void main() {vec4 offset = vec4(0.1, 0.1, 0, 1);gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1) + offset;v_color = a_color;}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">precision mediump float;varying vec4 v_color;void main() {gl_FragColor = v_color;}
</script>

顶点着色器里面定义了一个用于接收来自JavaScript代码颜色信息的attribute变量：a_color，在JavaScript代码中，需要获取到这个变量的位置：

 let colorAttributeLocation = gl.getAttribLocation(program, 'a_color');

为其创建缓冲区，并写入数据：

 gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);setColor(gl, 1);//设置颜色，alpha为透明度function setColor(gl, alpha = 1) {gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([Math.random(), Math.random(), Math.random(), alpha,Math.random(), Math.random(), Math.random(), alpha,Math.random(), Math.random(), Math.random(), alpha,Math.random(), Math.random(), Math.random(), alpha,Math.random(), Math.random(), Math.random(), alpha,Math.random(), Math.random(), Math.random(), alpha]), gl.STATIC_DRAW);}

接下来要建立着色器中的a_color与上述缓冲区之间的链接，并取出缓冲区的数据：

 //建立着色器中attribute颜色变量与缓冲区之间的连接gl.enableVertexAttribArray(colorAttributeLocation);gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);const size2 = 4;//2维坐标：每次迭代运行提取两个单位数据const type2 = gl.FLOAT;//每个单位的数据类型是32位浮点型;如果为Uint8Array的8位数组，要设置为gl.UNSIGNED_BYTEconst normalize2 = false;//不需要归一化数据const stride2 = 0;//每次迭代前进大小* sizeof（类型）以获得下一个位置const offset2 = 0;//从缓冲起始位置开始读取//到指定的缓冲区取出数据gl.vertexAttribPointer(colorAttributeLocation, size2, type2, normalize2, stride2, offset2);

更多的细节请读者自行看代码，里面有详细的注释。这里有一个问题，我们要画矩形和干嘛，有什么用？这里笔者想到了一个比较有趣的应用，利用三角形和矩形构建中文简体字，在后面的文章将带领读者一起实现这个骚操作！但在这之前，还存在一个问题，笔者之前是为了更直观的向大家展示WebGL代码的使用方式，但那样看起来代码似乎很凌乱，用的代码量也很多，也不符合实际开发的要求，下一节，同样是实现一个矩形，但会将相关的功能封装，是代码看起来更加简洁易用。

原生webgl学习（四） WebGL绘制矩形（一）相关推荐

html5--5-4 绘制矩形
html5--5-4 绘制矩形学习要点掌握绘制矩形的方法:strkeRect()/fillRect() 掌握绘制路径的 beginPath()和closePath() 矩形的绘制方法 rect(x ...
HTML画4个矩形,html5--5-4 绘制矩形
html5--5-4 绘制矩形学习要点掌握绘制矩形的方法:strkeRect()/fillRect() 掌握绘制路径的 beginPath()和closePath() 矩形的绘制方法 rect(x ...
WebGL学习(1) - 三角形
原文地址:WebGL学习(1) - 三角形还记得第一次看到canvas的粒子特效的时候,真的把我给惊艳到了,原来在浏览器也能做出这么棒的效果.结合<HTML5 Canvas核心技术>和网 ...
WebGL学习之纹理盒
原文地址:WebGL学习之纹理盒我们之前已经学习过二维纹理 gl.TEXTURE_2D,而且还使用它实现了各种效果.但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP,它包含了6个纹理代表 ...
WebGL（四）—— 第一个WEBGL程序
WebGL(四)-- 第一个WEBGL程序 <!DOCTYPE html> <html lang="en"> <head><meta ch ...
OpenCV与图像处理学习三——线段、矩形、圆、椭圆、多边形的绘制以及文字的添加
OpenCV与图像处理学习三--线段.矩形.圆.椭圆.多边形的绘制以及文字的添加一.OpenCV中的绘图函数 1.1 线段绘制 1.2 矩形绘制 1.3 圆绘制 1.4 椭圆的绘制 1.5 多边形绘 ...
我的webgl学习之路（一）
我的webgl学习之路 (一) 做项目中偶然需要移动端3d展示,所以学习了threejs;但是有着各种限制,还有就是项目要达到好的效果肯定是需要后期处理等等,所以展开了我学习webgl之路,我刚开始毫 ...
webgl渲染管线、缓冲区绘制三角形
文章目录前言一.WebGL是什么二.WebGL渲染管线 1 获取坐标元素 2 顶点着色器 3 图元装配 4 光栅化阶段 5 片元着色器三. 绘制一个三角形 1 初始化一个HTML 2 创建画布 ...
opencv进阶学习笔记6：使用鼠标在图像上绘制矩形框或者多边形框
基础版笔记传送门: python3+opencv学习笔记汇总目录(适合基础入门学习) 进阶版笔记目录: python+opencv进阶版学习笔记目录(适合有一定基础) 感兴趣区域传统绘制: openc ...

原生webgl学习（四） WebGL绘制矩形（一）

原生webgl学习（四） WebGL绘制矩形（一）相关推荐

最新文章

热门文章