We discussed earlier (in Chapter 5) how to follow a step-by-step
process to draw a primitive. We have explained the process in five
steps. You need to repeat these steps every time you draw a new shape.
This chapter explains how to draw points with 3D coordinates in WebGL.
Before moving further, let us take a relook at the five steps.
Step 1 − Prepare the Canvas and Get the WebGL Rendering Context
In this step, we obtain the WebGL Rendering context object using the method getContext().
Step 2 − Define the Geometry and Store it in the Buffer Objects
Since we are drawing three points, we define three vertices with 3D coordinates and store them in 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 with the shader program.
Step 5 − Drawing the Required Object
We use the method drawArrays() to draw points. Since the number of points we want to draw are is three, the count value is 3.
Required Steps
The following steps are required to create a WebGL application to draw points.Step 1 − Prepare the Canvas and Get the WebGL Rendering Context
In this step, we obtain the WebGL Rendering context object using the method getContext().
Step 2 − Define the Geometry and Store it in the Buffer Objects
Since we are drawing three points, we define three vertices with 3D coordinates and store them in buffers.
var vertices = [ -0.5,0.5,0.0, 0.0,0.5,0.0, -0.25,0.25,0.0, ];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 given example, we define a vector attribute to store 3D coordinates, and assign it to the gl_position variable.
- gl_pointsize is the variable used to assign a size to the point. We assign the point size as 10.
var vertCode = 'attribute vec3 coordinates;' +
'void main(void) {' +
' gl_Position = vec4(coordinates, 1.0);' +
'gl_PointSize = 10.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 Buffer ObjectsIn this step, we associate the buffer objects with the shader program.
Step 5 − Drawing the Required Object
We use the method drawArrays() to draw points. Since the number of points we want to draw are is three, the count value is 3.
gl.drawArrays(gl.POINTS, 0, 3)
Example – Draw Three Points using WebGL
Here is the complete WebGL program to draw three points −<!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.0,0.5,0.0, -0.25,0.25,0.0, ]; // Create an empty buffer object to store the 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); /*=========================Shaders========================*/ // vertex shader source code var vertCode = 'attribute vec3 coordinates;' + 'void main(void) {' + ' gl_Position = vec4(coordinates, 1.0);' + 'gl_PointSize = 10.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 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); // 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 primitive ===============*/ // 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.drawArrays(gl.POINTS, 0, 3); </script> </body> </html>It will produce the following result −
No comments:
Post a Comment