WebGL应用-颜色

在前面的所有示例中,我们通过将所需的颜色值分配给gl_FragColor变量,将颜色应用于对象。除此之外,我们可以为每个顶点定义颜色-就像顶点坐标和索引一样。本章以示例为例,说明如何使用WebGL将颜色应用于四边形。

应用颜色

要应用颜色,必须在JavaScript数组中使用RGB值为每个顶点定义颜色。您可以为所有顶点分配相同的值,以使对象具有唯一的颜色。定义颜色后,必须创建颜色缓冲区并将这些值存储在其中,并将其与顶点着色器属性关联。

在顶点着色器中,连同坐标属性(用于保存顶点的位置)一起,我们定义了一个属性和一个用于处理颜色的变量。

color属性保存每个顶点的颜色值,而variable是作为输入传递给片段着色器的变量。 因此,我们必须将颜色值分配给变化。

在片段着色器中,将保留颜色值的变量分配给gl_FragColor,后者保留对象的最终颜色。

应用颜色的步骤

创建WebGL应用程序以绘制Quad并为其应用颜色需要执行以下步骤。

步骤1-准备画布并获取WebGL渲染上下文

在此步骤中,我们使用getContext()获得WebGL Rendering上下文对象。

第2步-定义几何并将其存储在缓冲区对象中

可以使用两个三角形绘制一个正方形。因此,在此示例中,我们提供了两个三角形(具有一个公共边)和索引的顶点。由于我们要对其应用颜色,因此还定义了一个保留颜色值的变量,并为每个变量(红色,蓝色,绿色和粉红色)分配了颜色值。

var vertices = [
   -0.5,0.5,0.0,
   -0.5,-0.5,0.0, 
   0.5,-0.5,0.0,
   0.5,0.5,0.0 
];

var colors = [ 0,0,1, 1,0,0, 0,1,0, 1,0,1,];
indices = [3,2,1,3,1,0]; 

步骤3-创建和编译着色器程序

在此步骤中,您需要编写顶点着色器和片段着色器程序,对其进行编译,并通过链接这两个程序来创建组合程序。

  • 顶点着色器-在程序的顶点着色器中,我们定义矢量属性以存储3D坐标(位置)以及每个顶点的颜色。甲varing变量声明为从顶点着色器对片段着色器传递的颜色值。最后,将存储在color属性中的值分配给variant
var vertCode = 'attribute vec3 coordinates;'+
   'attribute vec3 color;'+
   'varying vec3 vColor;'+
	
   'void main(void) {' +
      ' gl_Position = vec4(coordinates, 1.0);' +
      'vColor = color;'+
   '}';
  • 片段着色器-在片段着色器,我们的分配gl_FragColor变量。
var fragCode = 'precision mediump float;'+
   'varying vec3 vColor;'+
   'void main(void) {'+
      'gl_FragColor = vec4(vColor, 1.);'+
   '}';

步骤4-将着色器程序与缓冲区对象相关联

在此步骤中,我们将缓冲区对象与着色器程序关联。

第5步-绘制所需的对象

由于我们使用索引绘制将形成一个四边形的两个三角形,因此我们将使用drawElements()方法。对于此方法,我们必须传递索引数。index.length的值表示索引数。

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

示例–应用颜色

以下程序演示了如何使用WebGL应用程序绘制四边形并为其应用颜色。

HTML
阅读剩余 86%

作者:terry,如若转载,请注明出处:https://www.web176.com/webgl/798.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2020年10月30日 下午1:59
下一篇 2020年10月30日 下午2:10

相关推荐

发表回复

登录后才能评论