WebGL简易教程(四)：颜色

目录

  • 1. 概述
  • 2. 示例：绘制三角形
    • 1) 数据的组织
    • 2) varying变量
  • 3. 结果
  • 4. 理解
    • 1) 图形装配和光栅化
    • 2) 内插过程
  • 5. 参考

1. 概述

在上一篇教程《WebGL简易教程(三)：绘制一个三角形(缓冲区对象)》中，通过使用缓冲区对象(buffer object)来向顶点着色器传送数据。那么，如果这些数据（与顶点相关的数据，如法向量、颜色等）需要继续传送到片元着色器该怎么办呢？

例如这里给三角形的每个顶点赋予不同的颜色，绘制一个彩色的三角形。这个时候就需要用到之前（《WebGL简易教程(二)：向着色器传输数据》）介绍过的varying变量了。

2. 示例：绘制三角形

改进上一篇中绘制三角形（HelloTriangle.js）的代码：

// 顶点着色器程序
var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' + // attribute variable
  'attribute vec4 a_Color;\n' +
  'varying vec4 v_Color;\n' +
  'void main() {\n' +
  '  gl_Position = a_Position;\n' + // Set the vertex coordinates of the point
  '  v_Color = a_Color;\n' +
  '}\n';

// 片元着色器程序
var FSHADER_SOURCE =
  'precision mediump float;\n' +
  'varying vec4 v_Color;\n' +
  'void main() {\n' +
  '  gl_FragColor = v_Color;\n' +
  '}\n';

function main() {
  // 获取 <canvas> 元素
  var canvas = document.getElementById('webgl');

  // 获取WebGL渲染上下文
  var gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  // 初始化着色器
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }

  // 设置顶点位置
  var n = initVertexBuffers(gl);
  if (n < 0) {
    console.log('Failed to set the positions of the vertices');
    return;
  }

  // 指定清空<canvas>的颜色
  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  // 清空<canvas>
  gl.clear(gl.COLOR_BUFFER_BIT);

  // 绘制三角形
  gl.drawArrays(gl.TRIANGLES, 0, n);
}

function initVertexBuffers(gl) {
  // 顶点坐标和颜色
  var 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,
  ]);

  //
  var n = 3; // 点的个数
  var FSIZE = verticesColors.BYTES_PER_ELEMENT;   //数组中每个元素的字节数

  // 创建缓冲区对象
  var vertexBuffer = gl.createBuffer();
  if (!vertexBuffer) {
    console.log('Failed to create the buffer object');
    return -1;
  }

  // 将缓冲区对象绑定到目标
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  // 向缓冲区对象写入数据
  gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);

  //获取着色器中attribute变量a_Position的地址
  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  if (a_Position < 0) {
    console.log('Failed to get the storage location of a_Position');
    return -1;
  }
  // 将缓冲区对象分配给a_Position变量
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 5*FSIZE, 0);

  // 连接a_Position变量与分配给它的缓冲区对象
  gl.enableVertexAttribArray(a_Position);

  //获取着色器中attribute变量a_Color的地址
  var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  if(a_Color < 0) {
    console.log('Failed to get the storage location of a_Color');
    return -1;
  }
  // 将缓冲区对象分配给a_Color变量
  gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
  // 连接a_Color变量与分配给它的缓冲区对象
  gl.enableVertexAttribArray(a_Color);  

  // 解除绑定
  gl.bindBuffer(gl.ARRAY_BUFFER, null);

  return n;
}

1) 数据的组织

与之前的例子相似，数据仍然通过缓冲区传递到顶点着色器。在顶点着色器中，定义了两个attribute变量，分别代表位置和颜色信息：

// 顶点着色器程序
var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' + // attribute variable
  'attribute vec4 a_Color;\n' +
…
  '}\n';

这意味着需要向顶点着色器传递两次数据。这里采取的做法仍然是一次性向缓冲区写入位置和颜色等所有的数据，然后分批次传入顶点着色器：

  // 创建缓冲区对象
  var vertexBuffer = gl.createBuffer();
  if (!vertexBuffer) {
    console.log('Failed to create the buffer object');
    return -1;
  }

// 将缓冲区对象绑定到目标
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  // 向缓冲区对象写入数据
  gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);

  //获取着色器中attribute变量a_Position的地址
  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  if (a_Position < 0) {
    console.log('Failed to get the storage location of a_Position');
    return -1;
  }
  // 将缓冲区对象分配给a_Position变量
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 5*FSIZE, 0);

  // 连接a_Position变量与分配给它的缓冲区对象
  gl.enableVertexAttribArray(a_Position);

  //获取着色器中attribute变量a_Color的地址
  var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  if(a_Color < 0) {
    console.log('Failed to get the storage location of a_Color');
    return -1;
  }
  // 将缓冲区对象分配给a_Color变量
  gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
  // 连接a_Color变量与分配给它的缓冲区对象
  gl.enableVertexAttribArray(a_Color);

可以看到创建缓冲区对象、将缓冲区对象绑定到目标、向缓冲区对象写入数据这三个步骤都是一致的。但分配attribute变量和连接attribute变量这两个步骤分别进行了两次。其中的关键点就在于gl.vertexAttribPointer()这个函数。之前使用这个函数都是使用的默认值，这里通过设置步进和偏移值，分别访问了缓冲区中不同的数据。

通过gl.vertexAttribPointer()函数定义可以知道，传送到缓冲区的数据是2(size)的位置数据和3(size)的颜色数据，所以步进参数stride都是5(size)。第一次传送位置数据的时候是从初始位置开始的，所以offset是0；而第二次传送颜色数据的时候需要偏移第一个位置数据，所以offfset是2(size)。

2) varying变量

在之前的教程（《WebGL简易教程(二)：向着色器传输数据》）中提到，可以传送数据给片元着色器，来给绘制场景赋予颜色。但是这里却通过缓冲区把数据传递给了顶点着色器。因此，在这里给顶点着色器和片元着色器，分别定义了一个相同的varying变量：

// 顶点着色器程序
var VSHADER_SOURCE =
  …
  'varying vec4 v_Color;\n' +
  'void main() {\n' +
  …
  '  v_Color = a_Color;\n' +
  '}\n';

// 片元着色器程序
var FSHADER_SOURCE =
  …
  'varying vec4 v_Color;\n' +
  'void main() {\n' +
  '  gl_FragColor = v_Color;\n' +
  '}\n';

varying变量表达的正是一种可变的变量，它的作用就是从顶点着色器向片元着色器传输数据。在顶点着色器的main函数中，将从缓冲区对象中获取的attribute变量a_Color赋值给预先定义的varying变量v_Color；同时在片元着色器中又定义了一个同类型同名的varying变量v_Color，那么顶点着色器中该变量的值就会自动传入到片元着色器中。最后在片元着色器的main函数中将该值传入到gl_FragColor中，就得到最终的结果了。其示意图如下：

3. 结果

最后的运行结果如下，最后会发现得到了一个颜色平滑过渡的，三个角各是红、绿、蓝颜色的三角形：

4. 理解

1) 图形装配和光栅化

更进一步思考下，这里虽然给每个顶点赋予的颜色值，但是为什么三角形的表面都赋予了颜色，并且是平滑过渡的效果呢？其实这里省略了顶点着色器与片元着色器之间数据传输细节——图形装配和光栅化。

点组成线，线组成面，将孤立的点组成基本图形（图元）的过程就是图形装配。图形装配的输入数据就是顶点着色器中gl_Position得到的值，由gl.drawArrays()中第一个参数值来确定装配成什么样的图元。在这个例子中，顶点着色器告诉WebGL系统，准备了三个点，WebGL通过图像装配，将其装配成三角形。

知道装配的图形还是不够的，理论上的三角形是连续不断的图形，而一般的图形显示设备都是离散的片元（像素）。图像转换成片元，就是光栅化的过程。

图形装配和光栅化的示意图如下：

2) 内插过程

在第二节详解示例中的代码时，提到了顶点着色器和片元着色都定义了相同的varying变量v_Color，数据就会从顶点着色器传入到片元着色器。但其实两者虽然同名，但并不是一回事。在顶点着色器中，这个varying变量是与顶点相关的值，而经过图形装配和光栅化后，片元着色器的varying变量就是与片元相关的值了。并且，这个值是经过内插过程得到的。

在这个例子中，给三个顶点赋予了三个不同的颜色值。WebGL就根据三个顶点的颜色值内插了三角形中每个片元（像素）的颜色值，并传递给片元着色器。所谓内插过程，可以想象成一条渐变色带，知道确定了起止颜色，就能获取中间任意位置的颜色。

5. 参考

本来部分代码和插图来自《WebGL编程指南》，源代码链接：https://share.weiyun.com/5VjlUKo ，密码：sw0x2x。会在此共享目录中持续更新后续的内容。

原文地址：https://www.cnblogs.com/charlee44/p/11519697.html

时间： 2024-10-21 23:28:45

WebGL简易教程(四)：颜色的相关文章

WebGL简易教程(十)：光照

目录 1. 概述 2. 原理 2.1. 光源类型 2.2. 反射类型 2.2.1. 环境反射(enviroment/ambient reflection) 2.2.2. 漫反射(diffuse reflection) 2.2.3. 综合 3. 实例 3.1. 具体代码 3.2. 改动详解 3.2.1. 设置日照 3.2.2. 着色器光照设置 4. 结果 5. 参考 1. 概述 在上一篇教程<WebGL简易教程(九):综合实例:地形的绘制>中,实现了对一个地形场景的渲染.在这篇教程中,就给这个地

WebGL简易教程(二)：向着色器传输数据

目录 1. 概述 2. 示例:绘制一个点(改进版) 1) attribute变量 2) uniform变量 3) varying变量 3. 结果 4. 参考 1. 概述 在上一篇教程<WebGL简易教程(一):第一个简单示例>中,通过一个绘制点的例子,对WebGL中的可编程渲染管线有了个基本的认识.在之前绘制点的例子中,点的位置,点的大小,点的颜色,都是固定写在着色器中的,这样的程序是缺乏可扩展性的. 比如我想绘制一张地形(DEM),平时地形数据是保存在地形文件之中的.被程序加载之后,数据信息

WebGL简易教程(六)：第一个三维示例(使用模型视图投影变换)

目录 1. 概述 2. 示例:绘制多个三角形 2.1. Triangle_MVPMatrix.html 2.2. Triangle_MVPMatrix.js 2.2.1. 数据加入Z值 2.2.2. 加入深度测试 2.2.3. MVP矩阵设置 3. 结果 4. 参考 1. 概述 在上一篇教程<WebGL简易教程(五):图形变换(模型.视图.投影变换)>中,详细讲解了OpenGL\WebGL关于绘制场景的模型变换.视图变换以及投影变换的过程.不过那篇教程是纯理论知识,这里就具体结合一个实际的例子

WebGL简易教程(十一)：纹理

目录 1. 概述 2. 实例 2.1. 准备纹理 2.2. 配置纹理 2.3. 使用纹理 3. 结果 4. 参考 1. 概述 在之前的之前的教程<WebGL简易教程(九):综合实例:地形的绘制>中,绘制了一个带颜色的地形场景.地形的颜色是根据高程赋予的RGB值,通过不同的颜色来表示地形的起伏,这是表达地形渲染的一种方式.除此之外,还可以将拍摄得到的数字影像,贴到地形上面,得到更逼真的地形效果.这就要用到我们这一章的新知识--纹理了. 这里用到的纹理图像,是一张从GoogleEarth上下载的卫

WebGL简易教程(十二)：包围球与投影

目录 1. 概述 2. 实现详解 3. 具体代码 4. 参考 1. 概述 在之前的教程中,都是通过物体的包围盒来设置模型视图投影矩阵(MVP矩阵),来确定物体合适的位置的.但是在很多情况下,使用包围盒并不方便计算,可以利用包围盒再生成一个包围球,利用包围球来设置MVP矩阵. 在<WebGL简易教程(十):光照>中,给地形赋予了固定方向的平行光.这篇教程的例子就是想模拟在平行光的视角下地形的情况.对于点光源光,可以用透视投影来实现渲染的效果:而平行光就需要通过正射投影来模拟.并且,这种正射并不是

WebGL入门教程(四)-webgl颜色

前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canvas 2.获取画布 canvas 的 ID 3.获取WebGL 4.编译着色器 5.使用缓冲区对象向顶点传入多个顶点数据 6.绘制图像 以上1~3参考:http://www.cnblogs.com/bsman/p/6128447.html 4.编译着色器 改顶点着色器,片着色器 //顶点着色器程序 v

WebGL简易教程(五)：图形变换(模型、视图、投影变换)

目录 1. 概述 2. 详论 1) 模型变换 (1) 平移变换 (2) 缩放变换 (3) 旋转变换 (4) 组合变换 2) 视图变换 (1) 原理 (2) 推导 3) 投影变换 (1) 透视投影 (2) 正射投影 3. 综合运用 4. 参考 1. 概述 通过之前的教程,对WebGL中可编程渲染管线的流程有了一定的认识.但是只有前面的知识还不足以绘制真正的三维场景,可以发现之前我们绘制的点.三角形的坐标都是[-1,1]之间,Z值的坐标都是采用的默认0值,而一般的三维场景都是很复杂的三维坐标.为了在

Android实战简易教程-第四十枪（窃听风云之短信监听）

近期在做监听验证码短信自己主动填入的功能,无意间想到了一个短信监听的办法. 免责声明:短信监听本身是一种违法行为,这里仅仅是技术描写叙述.请大家学习技术就可以.(哈哈) 本实例是基于bmob提供的后台服务,将监听到的短信自己主动上传到bmob数据库中. 一.代码实现: 1.首先实现javabean对象. package com.example.messagecut; import cn.bmob.v3.BmobObject; public class MsgContent extends Bmo

WebGL入门教程(二)-webgl绘制三角形

前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用webgl画出一个三角形. 效果图: 在WebGL入门教程(一)-初识webgl中,知道如何绘制一个点 //绘制一个点 gl.drawArrays(gl.POINTS, 0, 1); 但是图形是有多个点组成,那么就应该考虑如何绘制多个点,WebGL提供了一种很方便的机制,缓冲区对象(buffer obje