原生webgl学习（五） WebGL绘制矩形（二）：更简洁的代码

最新推荐文章于 2024-09-11 11:05:29 发布

coder_路远

最新推荐文章于 2024-09-11 11:05:29 发布

阅读量1.4k

点赞数

分类专栏：原生WebGL基础学习原生webgl学习文章标签： WebGL画矩形 WebGL接口封装

本文链接：https://blog.csdn.net/qq_37338983/article/details/83045821

版权

本文介绍如何在WebGL中以更简洁的方式绘制矩形，通过封装着色器变量、缓冲区和画图函数，降低代码复杂度。提供了一个完整的矩形绘制示例，并预告了下节将讲解使用WebGL写字的技术。

摘要由CSDN通过智能技术生成

本专栏所有文章示例代码均可在我的gitee码云上获取，读者可自行下载：https://gitee.com/babyogl/learnWebGL；本文demo代码在chapter-03下的rectangle-01.html，读者可以自行下载查看；

前面三节笔者分别实现了：用WebGL绘制一个三角形，WebGL中的矩阵运算：平移、旋转和缩放， WebGL绘制矩形等几个demo，也许细心的读者会发现代码很凌乱，而且实现一个例子往往需要很多行代码，那有没有更简洁的代码表达方式？当然有，我们可以把复用多次的代码封装起来。

步骤一：

我们将寻找着色器变量的位置和创建的缓冲区作为着色器项目的一个属性，这样做可以方便参数的传递：

 //创建着色器程序
 let program = initShader(gl, vShaderSource, fShaderSource);
 program.pLocation = getAttribute(gl, program, 'a_position');
 program.rLocation = getUniform(gl, program, 'u_resolution');
 program.cLocation = getUniform(gl, program, 'u_color');
 //创建缓冲区
 program.pBuffer = gl.createBuffer();

步骤二：

我们将菜单栏编写为一个函数initGui接受gl和program两个参数，从这里就可以看出步骤1的好处：

 function initGui(gl, program) {
     let gui = new dat.GUI();
     gui.add(guiField, 'x', 0, gl.canvas.width-200).onChange(function(e) {
           translate[0] = e;
           drawScene(gl, program);
     });
     gui.add(guiField, 'y', 0, gl.canvas.height-200).onChange(function(e) {
           translate[1] = e;
           drawScene(gl, program);
     });

     let ui = document.getElementById('ui');
     ui.appendChild(gui.domElement);
  }