webgl Archives - Donotsad where can learn any thing work project and make money

Aug 10

WebGL – Discussion

Discuss WebGL ”; Previous Next WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics. This tutorial starts with a basic introduction to WebGL, OpenGL, and the Canvas element of HTML-5, followed by a sample application. This tutorial contains dedicated chapters for all the steps required to write a basic WebGL application. It also contains chapters that explain how to use WebGL for affine transformations such as translation, rotation, and scaling. Print Page Previous Next Advertisements ”;

Aug 10

WebGL – Modes of Drawing

WebGL – Modes of Drawing ”; Previous Next In the previous chapter (Chapter 12), we discussed how to draw a triangle using WebGL. In addition to triangles, WebGL supports various other drawing modes. This chapter explains the drawing modes supported by WebGL. The mode Parameter Let’s take a look at the syntax of the methods − drawElements() and draw Arrays(). void drawElements(enum mode, long count, enum type, long offset); void drawArrays(enum mode, int first, long count); If you clearly observe, both the methods accept a parameter mode. Using this parameter, the programmers can select the drawing mode in WebGL. The drawing modes provided by WebGL are listed in the following table. Sr.No. Mode & Description 1 gl.POINTS To draw a series of points. 2 gl.LINES To draw a series of unconnected line segments (individual lines). 3 gl.LINE_STRIP To draw a series of connected line segments. 4 gl.LINE_LOOP To draw a series of connected line segments. It also joins the first and last vertices to form a loop. 5 gl.TRIANGLES To draw a series of separate triangles. 6 gl.TRIANGLE_STRIP To draw a series of connected triangles in strip fashion. 7 gl.TRIANGLE_FAN To draw a series of connected triangles sharing the first vertex in a fan-like fashion. Example – Draw Three Parallel Lines The following example shows how to draw three parallel lines using gl.LINES. Live Demo <!doctype html> <html> <body> <canvas width = “300” height = “300” id = “my_Canvas”></canvas> <script> /*======= Creating a canvas =========*/ var canvas = document.getElementById(”my_Canvas”); var gl = canvas.getContext(”experimental-webgl”); /*======= Defining and storing the geometry ======*/ var vertices = [ -0.7,-0.1,0, -0.3,0.6,0, -0.3,-0.3,0, 0.2,0.6,0, 0.3,-0.3,0, 0.7,0.6,0 ] // Create an empty buffer object 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);” + ”}”; // 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); // 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 and depth buffer gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Set the view port gl.viewport(0,0,canvas.width,canvas.height); // Draw the triangle gl.drawArrays(gl.LINES, 0, 6); // POINTS, LINE_STRIP, LINE_LOOP, LINES, // TRIANGLE_STRIP,TRIANGLE_FAN, TRIANGLES </script> </body> </html> If you run this example, it will produce the following output − Drawing Modes In the above program, if you replace the mode of drawArrays() with one of the following drawing modes, it will produce different outputs each time. Drawing Modes Outputs LINE_STRIP LINE_LOOP TRIANGLE_STRIP TRIANGLE_FAN TRIANGLES Print Page Previous Next Advertisements ”;

Aug 10

WebGL – Colors

WebGL – Colors ”; Previous Next In all our previous examples, we applied color to the object by assigning a desired color value to the gl_FragColor variable. In addition to that, we can define colors for each vertex − just like vertex coordinates and indices. This chapter takes an example to demonstrate how to apply colors to a quadrilateral using WebGL. Applying Colors To apply colors, you have to define the colors for each vertex using the RGB values, in JavaScript array. You can assign the same values to all the vertices to have a unique color to the object. After defining the colors, you have to create a color buffer and store these values in it, and associate it to the vertex shader attributes. In the vertex shader, along with the coordinates attribute (that holds the position of the vertices), we define an attribute and a varying to handle colors. The color attribute holds the color value per vertex, and varying is the variable that is passed as an input to the fragment shader. Therefore, we have to assign the color value to varying. In the fragment shader, the varying that holds the color value is assigned to gl_FragColor, which holds the final color of the object. Steps to Apply Colors The following steps are required to create a WebGL application to draw a Quad and apply colors to it. Step 1 − Prepare the Canvas and Get the WebGL Rendering Context In this step, we obtain the WebGL Rendering context object using getContext(). Step 2 − Define the Geometry and Store it in the Buffer Objects A square can be drawn using two triangles. Therefore, in this example, we provide the vertices for two triangles (with one common edge) and indices. Since we want to apply colors to it, a variable holding the color values is also defined and the color values for each (Red, Blue, Green, and Pink) are assigned to it. 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]; Step 3 − Create and Compile the Shader Programs In this step, you need to write the 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 vector attributes to store 3D coordinates (position), and the color of each vertex. A varing variable is declared to pass the color values from the vertex shader to the fragment shader. And finally, the value stored in the color attribute is assigned to varying. var vertCode = ”attribute vec3 coordinates;”+ ”attribute vec3 color;”+ ”varying vec3 vColor;”+ ”void main(void) {” + ” gl_Position = vec4(coordinates, 1.0);” + ”vColor = color;”+ ”}”; Fragment Shader − In the fragment shader, we assign the varying to the gl_FragColor variable. var fragCode = ”precision mediump float;”+ ”varying vec3 vColor;”+ ”void main(void) {”+ ”gl_FragColor = vec4(vColor, 1.);”+ ”}”; Step 4 − Associate the Shader Programs with the Buffer Objects In this step, we associate the buffer objects and the shader program. Step 5 − Drawing the Required Object Since we are drawing two triangles that will form a quad, using indices, we will use the method drawElements(). To this method, we have to pass the number of indices. The value of indices.length indicates the number of indices. gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0); Example – Applying Color The following program demonstrates how to draw a quad using WebGL application and apply colors to it. Live Demo <!doctype html> <html> <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> If you run this example, it will produce the following output −

Aug 10

WebGL – Drawing a Quad

WebGL – Drawing a Quad ”; Previous Next In the previous chapter, we discussed the different drawing modes provided by WebGL. We can also use indices to draw primitives using one of these modes. To draw models in WebGL, we have to choose one of these primitives and draw the required mesh (i.e., a model formed using one or more primitives). In this chapter, we will take an example to demonstrate how to draw a quadrilateral using WebGL. Steps to Draw a Quadrilateral The following steps are required to create a WebGL application to draw a quadrilateral. Step 1 − Prepare the Canvas and Get the WebGL Rendering Context In this step, we obtain the WebGL Rendering context object using getContext(). Step 2 − Define the Geometry and Store it in the Buffer Objects A square can be drawn using two triangles. In this example, we provide the vertices for two triangles (with one common edge) and indices. 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 ]; indices = [3,2,1,3,1,0]; Step 3 − Create and Compile the Shader Programs In this step, you need to write the 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(0.5, 0.3, 0.0, 7.5);” +”}”; Step 4 − Associate the Shader Programs to Buffer Objects In this step, we associate the buffer objects with the shader program. Step 5 − Drawing the Required Object Since we are drawing two triangles to form a quad, using indices, we will use the method drawElements(). To this method, we have to pass the number of indices. The value of indices.length gives the number of indices. gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0); Example – Draw a Quadrilateral The following program shows how to create a WebGL application to draw a quadrilateral. Live Demo <!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, 0.5,0.5,0.0 ]; indices = [3,2,1,3,1,0]; // 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 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> If you run this example, it will produce the following output − Print Page Previous Next Advertisements ”;

Aug 10

WebGL – Html5 Canvas Overview

WebGL – Html5 Canvas Overview ”; Previous Next To create graphical applications on the web, HTML-5 provides a rich set of features such as 2D Canvas, WebGL, SVG, 3D CSS transforms, and SMIL. To write WebGL applications, we use the existing canvas element of HTML-5. This chapter provides an overview of the HTML-5 2D canvas element. HTML5 Canvas HTML-5 <canvas> provides an easy and powerful option to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions, or do simple (and not so simple) animations. Here is a simple <canvas> element having only two specific attributes width and height plus all the core HTML-5 attributes like id, name, and class. Syntax The syntax of HTML canvas tag is given below. You have to mention the name of the canvas inside double quotations (“ ”). <canvas id = “mycanvas” width = “100” height = “100”></canvas> Canvas Attributes The canvas tag has three attributes namely, id, width, and height. Id − Id represents the identifier of the canvas element in the Document Object Model (DOM). Width − Width represents the width of the canvas. Height − Height represents the height of the canvas. These attributes determine the size of the canvas. If a programmer is not specifying them under the canvas tag, then browsers such as Firefox, Chrome, and Web Kit, by default, provide a canvas element of size 300 × 150. Example – Create a Canvas The following code shows how to create a canvas. We have used CSS to give a colored border to the canvas. Live Demo <html> <head> <style> #mycanvas{border:1px solid red;} </style> </head> <body> <canvas id = “mycanvas” width = “100” height = “100”></canvas> </body> </html> On executing, the above code will produce the following output − The Rendering Context The <canvas> is initially blank. To display something on the canvas element, we have to use a scripting language. This scripting language should access the rendering context and draw on it. The canvas element has a DOM method called getContext(), which is used to obtain the rendering context and its drawing functions. This method takes one parameter, the type of context 2d. The following code is to be written to get the required context. You can write this script inside the body tag as shown below. Live Demo <!DOCTYPE HTML> <html> <body> <canvas id = “mycanvas” width = “600” height = “200”></canvas> <script> var canvas = document.getElementById(”mycanvas”); var context = canvas.getContext(”2d”); context.font = ”20pt Calibri”; context.fillStyle = ”green”; context.fillText(”Welcome to Tutorialspoint”, 70, 70); </script> </body> </html> On executing, the above code will produce the following output − For more example on HTML-5 2D Canvas, check out the following link HTML-5 Canvas. WebGL Context HTML5 Canvas is also used to write WebGL applications. To create a WebGL rendering context on the canvas element, you should pass the string experimental-webgl, instead of 2d to the canvas.getContext() method. Some browsers support only ”webgl”. Live Demo <!DOCTYPE html> <html> <canvas id = ”my_canvas”></canvas> <script> var canvas = document.getElementById(”my_canvas”); var gl = canvas.getContext(”experimental-webgl”); gl.clearColor(0.9,0.9,0.8,1); gl.clear(gl.COLOR_BUFFER_BIT); </script> </html> On executing, the above code will produce the following output − Print Page Previous Next Advertisements ”;

Aug 10

WebGL – Drawing a Model

WebGL – Drawing a Model ”; Previous Next After associating the buffers with the shaders, the final step is to draw the required primitives. WebGL provides two methods namely, drawArrays() and drawElements() to draw models. drawArrays() drawArrays() is the method which is used to draw models using vertices. Here is its syntax − void drawArrays(enum mode, int first, long count) This method takes the following three parameters − mode − In WebGL, models are drawn using primitive types. Using mode, programmers have to choose one of the primitive types provided by WebGL. The possible values for this option are − gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, and gl.TRIANGLES. first − This option specifies the starting element in the enabled arrays. It cannot be a negative value. count − This option specifies the number of elements to be rendered. If you draw a model using drawArrays() method, then WebGL, while rendering the shapes, creates the geometry in the order in which the vertex coordinates are defined. Example If you want to draw a single triangle using drawArray() method, then you have to pass three vertices and call the drawArrays() method, as shown below. var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5,]; gl.drawArrays(gl.TRIANGLES, 0, 3); It will produce a triangle as shown below. Suppose you want to draw contiguous triangles, then you have to pass the next three vertices in order in the vertex buffer and mention the number of elements to be rendered as 6. var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5, 0.0,-0.5, 0.25,0.5, 0.5,-0.5,]; gl.drawArrays(gl.TRIANGLES, 0, 6); It will produce a contiguous triangle as shown below. drawElements() drawElements() is the method that is used to draw models using vertices and indices. Its syntax is as follows − void drawElements(enum mode, long count, enum type, long offset) This method takes the following four parameters − mode − WebGL models are drawn using primitive types. Using mode, programmers have to choose one of the primitive types provided by WebGL. The list of possible values for this option are − gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, and gl.TRIANGLES. count − This option specifies the number of elements to be rendered. type − This option specifies the data type of the indices which must be UNSIGNED_BYTE or UNSIGNED_SHORT. offset − This option specifies the starting point for rendering. It is usually the first element (0). If you draw a model using drawElements() method, then index buffer object should also be created along with the vertex buffer object. If you use this method, the vertex data will be processed once and used as many times as mentioned in the indices. Example If you want to draw a single triangle using indices, you need to pass the indices along with vertices and call the drawElements() method as shown below. var vertices = [ -0.5,-0.5,0.0, -0.25,0.5,0.0, 0.0,-0.5,0.0 ]; var indices = [0,1,2]; gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0); It will produce the following output − If you want to draw contagious triangles using drawElements() method, simply add the other vertices and mention the indices for the remaining vertices. var vertices = [ -0.5,-0.5,0.0, -0.25,0.5,0.0, 0.0,-0.5,0.0, 0.25,0.5,0.0, 0.5,-0.5,0.0 ]; var indices = [0,1,2,2,3,4]; gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0); It will produce the following output − Required Operations Before drawing a primitive, you need to perform a few operations, which are explained below. Clear the Canvas First of all, you should clear the canvas, using clearColor() method. You can pass the RGBA values of a desired color as parameter to this method. Then WebGL clears the canvas and fills it with the specified color. Therefore, you can use this method for setting the background color. Take a look at the following example. Here we are passing the RGBA value of gray color. gl.clearColor(0.5, 0.5, .5, 1); Enable Depth Test Enable the depth test using the enable() method, as shown below. gl.enable(gl.DEPTH_TEST); Clear the Color Buffer Bit Clear the color as well as the depth buffer by using the clear() method, as shown below. gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); Set the View Port The view port represents a rectangular viewable area that contains the rendering results of the drawing buffer. You can set the dimensions of the view port using viewport() method. In the following code, the view port dimensions are set to the canvas dimensions. gl.viewport(0,0,canvas.width,canvas.height); Print Page Previous Next Advertisements ”;

Aug 10

WebGL – Cube Rotation

WebGL – Cube Rotation ”; Previous Next In this chapter, we will take an example to demonstrate how to draw a rotating 3D cube using WebGL. Example – Draw a Rotating 3D Cube The following program shows how to draw a rotating 3D cube − Live Demo <!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 = [ -1,-1,-1, 1,-1,-1, 1, 1,-1, -1, 1,-1, -1,-1, 1, 1,-1, 1, 1, 1, 1, -1, 1, 1, -1,-1,-1, -1, 1,-1, -1, 1, 1, -1,-1, 1, 1,-1,-1, 1, 1,-1, 1, 1, 1, 1,-1, 1, -1,-1,-1, -1,-1, 1, 1,-1, 1, 1,-1,-1, -1, 1,-1, -1, 1, 1, 1, 1, 1, 1, 1,-1, ]; var colors = [ 5,3,7, 5,3,7, 5,3,7, 5,3,7, 1,1,3, 1,1,3, 1,1,3, 1,1,3, 0,0,1, 0,0,1, 0,0,1, 0,0,1, 1,0,0, 1,0,0, 1,0,0, 1,0,0, 1,1,0, 1,1,0, 1,1,0, 1,1,0, 0,1,0, 0,1,0, 0,1,0, 0,1,0 ]; var indices = [ 0,1,2, 0,2,3, 4,5,6, 4,6,7, 8,9,10, 8,10,11, 12,13,14, 12,14,15, 16,17,18, 16,18,19, 20,21,22, 20,22,23 ]; // Create and store data into vertex buffer var vertex_buffer = gl.createBuffer (); gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // Create and store data into color buffer var color_buffer = gl.createBuffer (); gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); // Create and store data into index buffer 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); /*=================== Shaders =========================*/ var vertCode = ”attribute vec3 position;”+ ”uniform mat4 Pmatrix;”+ ”uniform mat4 Vmatrix;”+ ”uniform mat4 Mmatrix;”+ ”attribute vec3 color;”+//the color of the point ”varying vec3 vColor;”+ ”void main(void) { ”+//pre-built function ”gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.);”+ ”vColor = color;”+ ”}”; var fragCode = ”precision mediump float;”+ ”varying vec3 vColor;”+ ”void main(void) {”+ ”gl_FragColor = vec4(vColor, 1.);”+ ”}”; var vertShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertShader, vertCode); gl.compileShader(vertShader); var fragShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragShader, fragCode); gl.compileShader(fragShader); var shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertShader); gl.attachShader(shaderProgram, fragShader); gl.linkProgram(shaderProgram); /* ====== Associating attributes to vertex shader =====*/ var Pmatrix = gl.getUniformLocation(shaderProgram, “Pmatrix”); var Vmatrix = gl.getUniformLocation(shaderProgram, “Vmatrix”); var Mmatrix = gl.getUniformLocation(shaderProgram, “Mmatrix”); gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); var position = gl.getAttribLocation(shaderProgram, “position”); gl.vertexAttribPointer(position, 3, gl.FLOAT, false,0,0) ; // Position gl.enableVertexAttribArray(position); gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer); var color = gl.getAttribLocation(shaderProgram, “color”); gl.vertexAttribPointer(color, 3, gl.FLOAT, false,0,0) ; // Color gl.enableVertexAttribArray(color); gl.useProgram(shaderProgram); /*==================== MATRIX =====================*/ function get_projection(angle, a, zMin, zMax) { var ang = Math.tan((angle*.5)*Math.PI/180);//angle*.5 return [ 0.5/ang, 0 , 0, 0, 0, 0.5*a/ang, 0, 0, 0, 0, -(zMax+zMin)/(zMax-zMin), -1, 0, 0, (-2*zMax*zMin)/(zMax-zMin), 0 ]; } var proj_matrix = get_projection(40, canvas.width/canvas.height, 1, 100); var mov_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; var view_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; // translating z view_matrix[14] = view_matrix[14]-6;//zoom /*==================== Rotation ====================*/ function rotateZ(m, angle) { var c = Math.cos(angle); var s = Math.sin(angle); var mv0 = m[0], mv4 = m[4], mv8 = m[8]; m[0] = c*m[0]-s*m[1]; m[4] = c*m[4]-s*m[5]; m[8] = c*m[8]-s*m[9]; m[1]=c*m[1]+s*mv0; m[5]=c*m[5]+s*mv4; m[9]=c*m[9]+s*mv8; } function rotateX(m, angle) { var c = Math.cos(angle); var s = Math.sin(angle); var mv1 = m[1], mv5 = m[5], mv9 = m[9]; m[1] = m[1]*c-m[2]*s; m[5] = m[5]*c-m[6]*s; m[9] = m[9]*c-m[10]*s; m[2] = m[2]*c+mv1*s; m[6] = m[6]*c+mv5*s; m[10] = m[10]*c+mv9*s; } function rotateY(m, angle) { var c = Math.cos(angle); var s = Math.sin(angle); var mv0 = m[0], mv4 = m[4], mv8 = m[8]; m[0] = c*m[0]+s*m[2]; m[4] = c*m[4]+s*m[6]; m[8] = c*m[8]+s*m[10]; m[2] = c*m[2]-s*mv0; m[6] = c*m[6]-s*mv4; m[10] = c*m[10]-s*mv8; } /*================= Drawing ===========================*/ var time_old = 0; var animate = function(time) { var dt = time-time_old; rotateZ(mov_matrix, dt*0.005);//time rotateY(mov_matrix, dt*0.002); rotateX(mov_matrix, dt*0.003); time_old = time; gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); gl.clearColor(0.5, 0.5, 0.5, 0.9); gl.clearDepth(1.0); gl.viewport(0.0, 0.0, canvas.width, canvas.height); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.uniformMatrix4fv(Pmatrix, false, proj_matrix); gl.uniformMatrix4fv(Vmatrix, false, view_matrix); gl.uniformMatrix4fv(Mmatrix, false, mov_matrix); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer); gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0); window.requestAnimationFrame(animate); } animate(0); </script> </body> </html> If you run this example, it will produce the following output − Print Page Previous Next Advertisements ”;

Aug 10

WebGL – Quick Guide

WebGL – Quick Guide ”; Previous Next WebGL – Introduction A few years back, Java applications – as a combination of applets and JOGL – were used to process 3D graphics on the Web by addressing the GPU (Graphical Processing Unit). As applets require a JVM to run, it became difficult to rely on Java applets. A few years later, people stopped using Java applets. The Stage3D APIs provided by Adobe (Flash, AIR) offered GPU hardware accelerated architecture. Using these technologies, programmers could develop applications with 2D and 3D capabilities on web browsers as well as on IOS and Android platforms. Since Flash was a proprietary software, it was not used as web standard. In March 2011, WebGL was released. It is an openware that can run without a JVM. It is completely controlled by the web browser. The new release of HTML 5 has several features to support 3D graphics such as 2D Canvas, WebGL, SVG, 3D CSS transforms, and SMIL. In this tutorial, we will be covering the basics of WebGL. What is OpenGL? OpenGL (Open Graphics Library) is a cross-language, cross-platform API for 2D and 3D graphics. It is a collection of commands. OpenGL4.5 is the latest version of OpenGL. The following table lists a set of technologies related to OpenGL. API Technology Used OpenGL ES It is the library for 2D and 3D graphics on embedded systems – including consoles, phones, appliances, and vehicles. OpenGL ES 3.1 is its latest version. It is maintained by the Khronos Group www.khronos.org JOGL It is the Java binding for OpenGL. JOGL 4.5 is its latest version and it is maintained by jogamp.org. WebGL It is the JavaScript binding for OpenGL. WebGL 1.0 is its latest version and it is maintained by the khronos group. OpenGLSL OpenGL Shading Language. It is a programming language which is a companion to OpenGL 2.0 and higher. It is a part of the core OpenGL 4.4 specification. It is an API specifically tailored for embedded systems such as those present on mobile phones and tablets. Note − In WebGL, we use GLSL to write shaders. What is WebGL? WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, It is designed for the purpose of rendering 2D graphics and interactive 3D graphics. It is derived from OpenGL”s ES 2.0 library which is a low-level 3D API for phones and other mobile devices. WebGL provides similar functionality of ES 2.0 (Embedded Systems) and performs well on modern 3D graphics hardware. It is a JavaScript API that can be used with HTML5. WebGL code is written within the <canvas> tag of HTML5. It is a specification that allows Internet browsers access to Graphic Processing Units (GPUs) on those computers where they were used. Who Developed WebGL An American-Serbian software engineer named Vladimir Vukicevic did the foundation work and led the creation of WebGL In 2007, Vladimir started working on an OpenGL prototype for Canvas element of the HTML document. In March 2011, Kronos Group created WebGL. Rendering Rendering is the process of generating an image from a model using computer programs. In graphics, a virtual scene is described using information like geometry, viewpoint, texture, lighting, and shading, which is passed through a render program. The output of this render program will be a digital image. There are two types of rendering − Software Rendering − All the rendering calculations are done with the help of CPU. Hardware Rendering − All the graphics computations are done by the GPU (Graphical processing unit). Rendering can be done locally or remotely. If the image to be rendered is way too complex, then rendering is done remotely on a dedicated server having enough of hardware resources required to render complex scenes. It is also called as server-based rendering. Rendering can also be done locally by the CPU. It is called as client-based rendering. WebGL follows a client-based rendering approach to render 3D scenes. All the processing required to obtain an image is performed locally using the client”s graphics hardware. GPU According to NVIDIA, a GPU is “a single chip processor with integrated transform, lighting, triangle setup/clipping, and rendering engines capable of processing a minimum of 10 million polygons per second.” Unlike multi-core processors with a few cores optimized for sequential processing, a GPU consists of thousands of smaller cores that process parallel workloads efficiently. Therefore, the GPU accelerates the creation of images in a frame buffer (a portion of ram which contains a complete frame data) intended for output to a display. GPU Accelerated Computing In GPU accelerated computing, the application is loaded into the CPU. Whenever it encounters a compute-intensive portion of the code, then that portion of code will be loaded and run on the GPU. It gives the system the ability to process graphics in an efficient way. GPU will have a separate memory and it runs multiple copies of a small portion of the code at a time. The GPU processes all the data which is in its local memory, not the central memory. Therefore, the data that is needed to be processed by the GPU should be loaded/copied to the GPU memory and then be processed. In the systems having the above architecture, the communication overhead between the CPU and GPU should be reduced to achieve faster processing of 3D programs. For this, we have to copy all the data and keep it on the GPU, instead of communicating with the GPU repeatedly. Browsers Supported The following tables show a list of browsers that support WebGL − Web Browsers Browser Name Version Support Internet Explorer 11 and above Complete support Google Chrome 39 and above Complete support Safari 8 Complete support Firefox 36 and above Partial support Opera 27 and above Partial support Mobile Browsers Browser Name Version Support Chrome for Android 42 Partial support Android browser 40 Partial support IOS Safari 8.3 Complete support Opera Mini 8 Does not support Blackberry Browser 10 Complete support IE

Aug 10

WebGL – Rotation

WebGL – Rotation ”; Previous Next In this chapter, we will take an example to demonstrate how to rotate a triangle using WebGL. Example – Rotate a Triangle The following program shows how to rotate a triangle using WebGL. Live Demo <!doctype html> <html> <body> <canvas width = “400” height = “400” 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 = [ -1,-1,-1, 1,-1,-1, 1, 1,-1 ]; var colors = [ 1,1,1, 1,1,1, 1,1,1 ]; var indices = [ 0,1,2 ]; //Create and store data into vertex buffer var vertex_buffer = gl.createBuffer (); gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); //Create and store data into color buffer var color_buffer = gl.createBuffer (); gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); //Create and store data into index buffer 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); /*==========================Shaders=========================*/ var vertCode = ”attribute vec3 position;”+ ”uniform mat4 Pmatrix;”+ ”uniform mat4 Vmatrix;”+ ”uniform mat4 Mmatrix;”+ ”attribute vec3 color;”+//the color of the point ”varying vec3 vColor;”+ ”void main(void) { ”+//pre-built function ”gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.);”+ ”vColor = color;”+ ”}”; var fragCode = ”precision mediump float;”+ ”varying vec3 vColor;”+ ”void main(void) {”+ ”gl_FragColor = vec4(vColor, 1.);”+ ”}”; var vertShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertShader, vertCode); gl.compileShader(vertShader); var fragShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragShader, fragCode); gl.compileShader(fragShader); var shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertShader); gl.attachShader(shaderProgram, fragShader); gl.linkProgram(shaderProgram); /*===========associating attributes to vertex shader ============*/ var Pmatrix = gl.getUniformLocation(shaderProgram, “Pmatrix”); var Vmatrix = gl.getUniformLocation(shaderProgram, “Vmatrix”); var Mmatrix = gl.getUniformLocation(shaderProgram, “Mmatrix”); gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); var position = gl.getAttribLocation(shaderProgram, “position”); gl.vertexAttribPointer(position, 3, gl.FLOAT, false,0,0) ; //position gl.enableVertexAttribArray(position); gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer); var color = gl.getAttribLocation(shaderProgram, “color”); gl.vertexAttribPointer(color, 3, gl.FLOAT, false,0,0) ; //color gl.enableVertexAttribArray(color); gl.useProgram(shaderProgram); /*========================= MATRIX ========================= */ function get_projection(angle, a, zMin, zMax) { var ang = Math.tan((angle*.5)*Math.PI/180);//angle*.5 return [ 0.5/ang, 0 , 0, 0, 0, 0.5*a/ang, 0, 0, 0, 0, -(zMax+zMin)/(zMax-zMin), -1, 0, 0, (-2*zMax*zMin)/(zMax-zMin), 0 ]; } var proj_matrix = get_projection(40, canvas.width/canvas.height, 1, 100); var mov_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; var view_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; //translating z view_matrix[14] = view_matrix[14]-6; //zoom /*=======================rotation========================*/ function rotateZ(m, angle) { var c = Math.cos(angle); var s = Math.sin(angle); var mv0 = m[0], mv4 = m[4], mv8 = m[8]; m[0] = c*m[0]-s*m[1]; m[4] = c*m[4]-s*m[5]; m[8] = c*m[8]-s*m[9]; m[1] = c*m[1]+s*mv0; m[5] = c*m[5]+s*mv4; m[9] = c*m[9]+s*mv8; } /*=================Drawing===========================*/ var time_old = 0; var animate = function(time) { var dt = time-time_old; rotateZ(mov_matrix, dt*0.002); time_old = time; gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); gl.clearColor(0.5, 0.5, 0.5, 0.9); gl.clearDepth(1.0); gl.viewport(0.0, 0.0, canvas.width, canvas.height); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.uniformMatrix4fv(Pmatrix, false, proj_matrix); gl.uniformMatrix4fv(Vmatrix, false, view_matrix); gl.uniformMatrix4fv(Mmatrix, false, mov_matrix); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer); gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0); window.requestAnimationFrame(animate); } animate(0); </script> </body> </html> If you run this example, it will produce the following output − Print Page Previous Next Advertisements ”;

Aug 10

WebGL – Drawing Points

WebGL – Drawing Points ”; Previous Next 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. 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 Objects 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. gl.drawArrays(gl.POINTS, 0, 3) Example – Draw Three Points using WebGL Here is the complete WebGL program to draw three points − Live Demo <!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 − Print Page Previous Next Advertisements ”;