在前面的所有示例中,我们通过将所需的颜色值分配给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应用程序绘制四边形并为其应用颜色。
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>示例–应用颜色 - web176教程网|web176.com</title> </head> <body> <canvas width = "300" height = "300" id = "my_Canvas"></canvas> <script> /*============= Creating a canvas ==================*/ var canvas = document.getElementById('my_Canvas'); gl = canvas.getContext('experimental-webgl'); /*========== Defining and storing the geometry ==========*/ 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]; // Create an empty buffer object and store vertex data var vertex_buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); // Create an empty buffer object and store Index data var Index_Buffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); // Create an empty buffer object and store color data var color_buffer = gl.createBuffer (); gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); /*======================= Shaders =======================*/ // vertex shader source code var vertCode = 'attribute vec3 coordinates;'+ 'attribute vec3 color;'+ 'varying vec3 vColor;'+ 'void main(void) {' + ' gl_Position = vec4(coordinates, 1.0);' + 'vColor = color;'+ '}'; // Create a vertex shader object var vertShader = gl.createShader(gl.VERTEX_SHADER); // Attach vertex shader source code gl.shaderSource(vertShader, vertCode); // Compile the vertex shader gl.compileShader(vertShader); // fragment shader source code var fragCode = 'precision mediump float;'+ 'varying vec3 vColor;'+ 'void main(void) {'+ 'gl_FragColor = vec4(vColor, 1.);'+ '}'; // Create fragment shader object var fragShader = gl.createShader(gl.FRAGMENT_SHADER); // Attach fragment shader source code gl.shaderSource(fragShader, fragCode); // Compile the fragmentt shader gl.compileShader(fragShader); // Create a shader program object to // store the combined shader program var shaderProgram = gl.createProgram(); // Attach a vertex shader gl.attachShader(shaderProgram, vertShader); // Attach a fragment shader gl.attachShader(shaderProgram, fragShader); // Link both the programs gl.linkProgram(shaderProgram); // Use the combined shader program object gl.useProgram(shaderProgram); /* ======== Associating shaders to buffer objects =======*/ // Bind vertex buffer object gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); // Bind index buffer object gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer); // Get the attribute location var coord = gl.getAttribLocation(shaderProgram, "coordinates"); // point an attribute to the currently bound VBO gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0); // Enable the attribute gl.enableVertexAttribArray(coord); // bind the color buffer gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer); // get the attribute location var color = gl.getAttribLocation(shaderProgram, "color"); // point attribute to the volor buffer object gl.vertexAttribPointer(color, 3, gl.FLOAT, false,0,0) ; // enable the color attribute gl.enableVertexAttribArray(color); /*============Drawing the Quad====================*/ // Clear the canvas gl.clearColor(0.5, 0.5, 0.5, 0.9); // Enable the depth test gl.enable(gl.DEPTH_TEST); // Clear the color buffer bit gl.clear(gl.COLOR_BUFFER_BIT); // Set the view port gl.viewport(0,0,canvas.width,canvas.height); //Draw the triangle gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0); </script> </body> </html>
作者:terry,如若转载,请注明出处:https://www.web176.com/webgl/798.html