In the previous chapter (Chapter 11), we discussed how to draw three
points using WebGL. In Chapter 5, we took sample application to
demonstrate how to draw a triangle. In both the examples, we have drawn
the primitives using only vertices.
To draw more complex shapes/meshes, we pass the indices of a geometry too, along with the vertices, to the shaders. In this chapter, we will see how to draw a triangle using indices.
Step 1 − Prepare the Canvas and Get WebGL Rendering Context
In this step, we obtain the WebGL Rendering context object using getContext().
Step 2 − Define the Geometry and Store it in Buffer Objects
Since we are drawing a triangle using indices, we have to pass the three vertices of the triangle, including the indices, and store them in the buffers.
In this step, you need to write vertex shader and fragment shader programs, compile them, and create a combined program by linking these two programs.
In this step, we associate the buffer objects and the shader program.
Step 5 − Drawing the Required Object
Since we are drawing a triangle using indices, we will use
To draw more complex shapes/meshes, we pass the indices of a geometry too, along with the vertices, to the shaders. In this chapter, we will see how to draw a triangle using indices.
Steps Required to Draw a Triangle
The following steps are required to create a WebGL application to draw a triangle.Step 1 − Prepare the Canvas and Get WebGL Rendering Context
In this step, we obtain the WebGL Rendering context object using getContext().
Step 2 − Define the Geometry and Store it in Buffer Objects
Since we are drawing a triangle using indices, we have to pass the three vertices of the triangle, including the indices, and store them in the buffers.
var vertices = [ -0.5,0.5,0.0, -0.5,-0.5,0.0, 0.5,-0.5,0.0, ]; indices = [0,1,2];Step 3 − Create and Compile the Shader Programs
In this step, you need to write vertex shader and fragment shader programs, compile them, and create a combined program by linking these two programs.
- Vertex Shader − In the vertex shader of the program, we define the vector attribute to store 3D coordinates and assign it to gl_position.
var vertCode =
'attribute vec3 coordinates;' +
'void main(void) {' +
' gl_Position = vec4(coordinates, 1.0);' +
'}';
- Fragment Shader − In the fragment shader, we simply assign the fragment color to the gl_FragColor variable.
var fragCode = 'void main(void) {' +
' gl_FragColor = vec4(1, 0.5, 0.0, 1);' +
'}';
Step 4 − Associate the Shader Programs to the Buffer ObjectsIn this step, we associate the buffer objects and the shader program.
Step 5 − Drawing the Required Object
Since we are drawing a triangle using indices, we will use
drawElements(). To this method, we have to pass the number of indices. The value of the indices.length signifies the number of indices.gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);
Example – Drawing a Triangle
The following program code shows how to draw a triangle in WebGL using indices −<!doctype html> <html> <body> <canvas width = "570" height = "570" 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, ]; indices = [0,1,2]; // Create an empty buffer object to store vertex buffer var vertex_buffer = gl.createBuffer(); // Bind appropriate array buffer to it gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); // Pass the vertex data to the buffer gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // Unbind the buffer gl.bindBuffer(gl.ARRAY_BUFFER, null); // Create an empty buffer object to store Index buffer var Index_Buffer = gl.createBuffer(); // Bind appropriate array buffer to it gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer); // Pass the vertex data to the buffer gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); // Unbind the buffer gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); /*================ Shaders ====================*/ // Vertex shader source code var vertCode = 'attribute vec3 coordinates;' + 'void main(void) {' + ' gl_Position = vec4(coordinates, 1.0);' + '}'; // 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 = 'void main(void) {' + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 0.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); /*=========Drawing the triangle===========*/ // 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>It will produce the following result −
No comments:
Post a Comment