WebGL 变量的内插过程

__易安

于 2020-08-27 20:00:35 发布

阅读量509

点赞数

CC 4.0 BY-SA版权

分类专栏： WebGL 文章标签：前端 webgl 可视化

本文链接：https://blog.youkuaiyun.com/LiJiahaoCoder/article/details/108267558

本文详细介绍了WebGL中如何通过varying变量实现顶点着色器和片元着色器之间的数据传递，特别是varying变量的内插过程。通过实例展示了如何设置顶点坐标和大小，以及如何将颜色信息从顶点着色器传入片元着色器，最终形成颜色渐变效果。文章揭示了顶点装配、光栅化和内插计算的过程，帮助理解WebGL渲染原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇文章中讲了在WebGL中使用齐次坐标对三角形进行变换，目前也可以通过gl.drawArrays方法绘制更加复杂的图形，这次让我们更进一步，给你的“女神”挑选一件漂亮的衣服吧👗挑选衣服之前，先让我们回归到最初的那三个点。

🎬又回到最初的起点

在这里插入图片描述
还记不记得这熟悉的三个点？在绘制三个点的例子中，我们在顶点着色器中使用了gl_PointSize=10.0这种方式将每个点的大小设置为10像素。但是如果我们想要3个大小不同的点呢？我们需要在顶点着色器中分别定义3个attribute变量接收不同的点的size吗🧐

不必如此，还记不记得我们将顶点坐标信息存入缓冲区对象，并写入attribute变量？定义不同大小的顶点坐标也可以使用这种方式：

const VertexShader = `
  // ...
  attribute float a_PointSize;
  void main() {
    // ...
    gl_PointSize = a_PointSize;
  }
`;

// ...

function initVertexBuffers (gl) {
   
   
  // ...
  const sizes = new Float32Array([
    10.0, 20.0, 30.0,
  ]);
  
  // 将顶点大小数据写入缓冲区
  const a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
  const sizeBuffer = gl.createBuffer();	// create -> 你来到这个世上
  gl.bindBuffer