webgl基础：绘制多边形

最新推荐文章于 2023-04-11 14:50:08 发布

YancyCathy

最新推荐文章于 2023-04-11 14:50:08 发布

阅读量636

点赞数

文章标签： javascript webgl 可视化 3d 图形学

本文链接：https://blog.csdn.net/YancyCathy/article/details/113121540

版权

本文介绍如何在WebGL中通过JavaScript动态控制图形信息，讲解了绘制多边形的相关概念和步骤，包括缓冲区对象、类型化数组的使用，以及创建、绑定缓冲区对象，将数据写入缓冲区并分配给着色器变量的过程。

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

hi~ everybody. 又到了愉快的分享时刻了。

在前面两节内容中给大家分享了如何通过 webgl 来绘制一个点，并且介绍了着色器的一些基础知识。

当然了，仅仅只有文字的描述是不能勾起大家学习 webgl 的欲望的，还需要自己动手实现下。观察自己写的代码是如何运作的。

好了，之前的内容仅仅是绘制一个点，可能内容上略显简单了，今天就来介绍下如何绘制多边形。

本节内容中涉及到较多的方法介绍，可先忽略。待有需要的时候查阅。

1.通过`js`控制图形

学习绘制多边形之前，我们先来看一个问题 – 如何通过js来控制图形的大小、颜色……等内容

在之前的代码中，都是将这些信息固定的写在了着色器的源码中。类似于以下内容：

// 顶点着色器源代码
const VERTEX_SHADER_SOURCE = '' +
      'void main() {' +
      ' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);' +
      ' gl_PointSize = 10.0;' +
      '}'

// 片元着色器源代码
const FRAGMENT_SHADER_SOURCE = '' +
      'void main() {' +
      ' gl_FragColor = vec4(1.0,0.0,0.0,1.0);' +
      '}'

那如何用js来控制这些信息呢？字符串模板吗？nonono，当然是不行的，因为webgl有自己的渲染管线，之前也给大家介绍过，所以通过字符串模板的形式肯定是不可以的。

接下来就来看下，如何通过js来控制图形信息。

1.1 动态传入信息

动态传入图形信息总共分以下四步进行：

定义一个着色器变量。变量类型与引用位置相同
获取变量信息
传入数据
绘制图形

实例演示：

1. 定义一个着色器变量，

// 这里我们需要定义一个着色器变量 a_PointSize 
// 变量的类型是 float 因为变量的引用是在 gl_PointSize 中引用的，gl_Position 的类型是 float
// 其他的信息固定
const VERTEX_SHADER_SOURCE = '' +
      'attribute float a_PointSize;' + 
      'void main() {' +
      ' gl_Position = vec4(0.0,0.0,0.0,1.0);' +
      ' gl_PointSize = a_PointSize;' +
      '}'

const FRAGMENT_SHADER_SOURCE = '' +
      'void main() {' +
      ' gl_FragColor = vec4(1.0,0.0,0.0,1.0);' +
      '}'

2. 获取变量信息

// 初始化着色器，并获取程序对象
const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);
// 获取着色器变量
const a_Position = gl.getAttribLocation(program, 'a_Position')

// 初始化着色器方法
function initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
   
  const vertexShader = gl.createShader(gl.VERTEX_SHADER)
  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)

  gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE)
  gl.shaderSour