What is a WebGL
What can do
WebGL is a technology for drawing and rendering complex 3D models on web pages and allowing users to interact with them.
WebGL technology combines HTML5 and JavaScript to allow developers to create and render 3D graphics on web pages.
Traditionally, in order to display three-dimensional graphics, developers need to develop a stand-alone application using C or C++, complemented by professional computer graphics libraries such as OpenGL and Direct3D. Now with WebGL, you just need to add some extra 3D graphics code to your already familiar HTML and JavaScript to display 3D graphics on a web page.
WebGL is embedded in the browser, you don’t need to install plug-ins and libraries to use it directly, and because it’s browser-based, you can run WebGL applications on multiple platforms.
The origin of
The two most widely used 3d graphics rendering technologies on personal computers are Direct3D and OpenGL.
Direct3D is a part of Microsoft DirectX technology, is a set of programming interface API controlled by Microsoft, mainly used in Windows platform; OpenGL is widely used on many platforms due to its open and free nature.
OpenGL was originally developed by SGI and released as an open source standard in 1992. Over the years, OpenGL has developed several versions. Although WebGL is rooted in OpenGL, it is actually derived from a particular version of OpenGL. OpenGL ES has gone through two versions and WebGL is based on OpenGL ES 2.0. While adding new features, it removes a lot of old and useless features, which allows it to remain lightweight but still capable of rendering beautiful 3D graphics.
Since OpenGL version 2.0, OpenGL has supported a very important feature, the ability to program shader methods. The shader method, also known as shader, uses a PROGRAMMING language similar to C to achieve beautiful visual effects. OpenGL ES 2.0 is based on the OpenGL shader language, so the latter is also known as the OpenGL ES shader language, abbreviated GLSL ES. WebGL is based on OpenGL ES 2.0 and also uses GLSL ES to write shaders.
The structure of WebGL applications
WebGL pages are available in three languages, HTML5 Hypertext, JavaScript and GLSL ES. However, because GLSL ES is usually written in JavaScript as a string, WebGL programs actually only need to use HTML files and JavaScript files.
Introduction to WebGL
WebGL and Canvas
HTML5 introduces the Canvas tag, which allows JavaScript to draw graphics dynamically. The Canvas tag provides some simple drawing functions for drawing points, lines, rectangles, etc.
Simple use of the Canvas tag
Draw a red rectangle on canvas.
<html>
<head></head>
<body onload = "main()">
<canvas id = "example" width = "400" height = "400"></canvas>
<script src= "draw.js"></script>
</body>
</html>
Copy the code// draw.js
/* Draw 2D graphics data: 1. Get the
function main(){
// Get the canvas element
var canvas = document.getElementById('example');
if(! canvas) {console.log('fail to getCanvas');
return
}
// Get the drawing context to draw the 2d graph
// Get 2d drawing context must specify type '2d'
var ctx = canvas.getContext('2d');
// Set the fill color
ctx.fillStyle = 'rgba (255,0,0,1.0)';
// Fill the rectangle with the fill color
// The arguments are in x,y,w,h order
ctx.fillRect(120.10.150.150);
}
Copy the codeCanvas coordinate system
The coordinate system of canvas has the X-axis and the positive direction to the right, and the Y-axis and the positive direction to the down.
The origin of the axes falls to the upper left.
Browser coordinate and Canvas coordinate system conversion:
var rect = canvas.getBoundingRect(); // Get the position and range of the canvas rectangle
Rect. left is the offset of the rectangle relative to the left side of the browser
Rect. top is the offset of the rectangle relative to the top of the browser
// Assume that the browser coordinates are x1,y1 and the canvas coordinates are x2, y2
var x1,y1,x2,y2;
x1 = rect.left + x2;
y1 = rect.top + y2
Copy the codeShortest WebGL program
Start writing the shortest WebGL program that clears the canvas tag drawing area with background color.
<html>
<head></head>
<body onload = "main()">
<canvas id = "example" width = "400" height = "400"></canvas>
<script src=".. /lib/webgl-utils.js"></script>
<script src=".. /lib/webgl-debug.js"></script>
<script src=".. /lib/cuon-utils.js"></script>
<script src= "helloWebGL.js"></script>
</body>
</html>
Copy the code// helloWebGL.js
// In addition to the hellowebgl.js file, it also introduces the wrapped library functions. For now, we only need to know what each function is used for, and we will learn more about these in the future.
function main(){
// Get the canvas element
var canvas = document.getElementById('example');
// Get the WebGL context. GetWebGLContext is one of the library functions that addresses some of the compatibility issues associated with obtaining webGL context. Normally, we would use the canvas.getContext() function.
var gl = getWebGLContext(canvas);
if(! gl) {console.log('fail')
return
}
// Set the empty background color, refer to canvas.fillcolor ()
// Once the background color is set, it will remain in the WebGL system until the next call to the gl.clearcolor () method. This means that if you want to empty the drawing area again with the same color at any time in the future, you do not need to specify the background color again.
gl.clearColor(0.0.0.1)
Clear the canvas area with the preset clear background color
gl.clear(gl.COLOR_BUFFER_BIT);
}
Copy the codeGl.clearcolor ()
-
Function: Specifies the background color of a drawing area
-
parameter
- Red Specifies a red value of 0.0-1.0
- Green Specifies the green value 0.0-1.0
- Blue Specifies a blue value of 0.0-1.0
- Opacity: 0.0 to 1.0
If any value is less than 0 or greater than 1.0 then it is truncated to 0.0 or 1.0
Why 0.0 to 1.0?
Because WebGL inherits from OpenGL, it follows the range of OpenGL color components.
**gl.clear() **
-
Function: Sets the specified buffer to a predetermined value, or if the color buffer is cleared, the value of the argument specified by gl.clearcolor () is used
-
Default values of parameters:
-
Gl.color_buffer_bit Specifies the color cache
-
Gl.depth_buffer_bit Specifies the depth buffer
-
Gl.stencil_buffer_bit Specifies the template buffer
-
-
Returned value: None
-
Error: INVALID_VALUE buffer is not of the above three types
Draw a point
In the previous section, we learned how to build a WebGL application and how to use some simple WebGL functions. In this section, we will learn how to draw a point: draw a red point 10 pixels large at the origin (0.0,0.0,0.0).
<html>
<head>
<title>HelloPoint1</title>
</head>
<body onload = 'main()'>
<canvas id = 'example' width = "400" height="400"></canvas>
<script src=".. /lib/webgl-utils.js"></script>
<script src=".. /lib/webgl-debug.js"></script>
<script src=".. /lib/cuon-utils.js"></script>
<script src="HelloPoint1.js"></script>
</body>
</html>
Copy the code// HelloPoint1.js
// Vertex shader program
var VSHADER_SOURCE =
'void main() {\n' +
'gl_Position = vec4(0.0, 0.0, 0.0, 1.0); \n' + // Set the coordinates
'gl_PointSize = 10.0; \n' + // Set the size
'}\n';
// Chip shader program
var FSHADER_SOURCE=
'void main(){\n'+
'gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0); \n'+ // Set the color
'}\n';
function main() {
// Vertex shader program
var canvas = document.getElementById('example');
// Get the WebGL drawing context
var gl = getWebGLContext(canvas);
// Initialize the shader
if(! initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)) {console.log('fail To initialize')}// Set the background color
gl.clearColor(0.0.0.0.0.0.1.0);
/ / empty canvas
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS,0.1);
}
Copy the codeNext, let’s examine this code in detail.
shader
When drawing 2d or 3D graphics, WebGL relies on a new drawing mechanism called shaders. All WebGL applications must use it. The shader is not only powerful, but also complex, and cannot be manipulated by a simple drawing command.
WebGL requires two types of shaders, vertex shaders and slice shaders.
The shader is written using OpenGL ES (GLSL ES) shader language similar to C. Because shader program code must be preprocessed into a single character, the + sign is used to concatenate multiple lines of strings into one long string.
Vertex shaders:
Vertex shaders are programs that describe vertex specific (such as position, color, etc.). A vertex is an endpoint or vertex of a two-dimensional or three-dimensional image. The following is the vertex shader code, using GLSL ES language to write.
The vertex shader specifies the position and size of a point.
Slice shader:
A slice shader is a program that performs a slice – by – slice processing such as lighting. A slice is a WebGL term that can be understood as a pixel.
The slice shader specifies the color of the point.
Initialize the shader
Most WebGL applications follow the following process to render 2d or 3D graphics:
- Gets the CANVAS tag DOM element
- Gets the WebGL drawing context
- Initialize the shader
- Sets the canvas background color
- Removal of canvas
- drawing
Here we initialize the shader. We use the helper function initShaders to initialize the shader as a string.
// Initialize the shader
if(! initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)) {console.log('fail To initialize')}Copy the code**initShaders (gl,vshader,fshader)
-
Parameters:
- Gl specifies the rendering context
- Vshader specifies the vertex shader program code string
- Fshader specifies the chip shader program code string
-
The return value
- True The initialization succeeds
- False Initialization fails
Most importantly, WebGL applications include JavaScript that runs in the browser and shader programs that run in the WebGL system.
Vertex shader
The code for the vertex shader is as follows. The vertex shader specifies the position and size of a point.
// Vertex shader program
var VSHADER_SOURCE =
'void main() {\n' +
'gl_Position = vec4(0.0, 0.0, 0.0, 1.0); \n' + // Set the coordinates
'gl_PointSize = 10.0; \n' + // Set the size
'}\n';
Copy the codeAs with C programs, you must include a main function. Void means that this function has no return value.
The point position is first assigned to the gl_Position variable, and the size is then assigned to gl_PointSize.
The gl_Position and gl_PointSize variables are built into the vertex shader and have special meanings:
Gl_Position indicates the position of the vertex, and gl_PointSize indicates the size of the point.
The gl_Position variable must be assigned or the shader will not work properly. Gl_PointSize is not required and the default is 1.0.
GLSL ES data types:
-
Float indicates a floating point number
-
Vec4 represents a vector composed of four floating point numbers
Shaders provide built-in functions to convert X,Y, and Z coordinates into vec4 variables.
The vec4 function vec(v0,v1,v2,v3) returns a VEC4 object consisting of v0,v1,v2,v3.
Homogeneous coordinates:
A vector consisting of four components is called a homogeneous coordinate.
The homogeneous coordinates of (x,y,z,w) are equivalent to the three-dimensional coordinates of (x/w,y/w,z/w)
The value of w has to be greater than 0, and if it goes to 0, it’s going to go to infinity.
Homogeneous coordinates are usually used to represent the three-dimensional coordinates of vertices in 3d graphics system recalculation.
Chip shader
The code for the slice shader is as follows. The role of the slice shader is to process the slice to display on the screen.
// Chip shader program
var FSHADER_SOURCE=
'void main(){\n'+
'gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0); \n'+ // Set the color
'}\n';
Copy the codeStart with the main function.
The chip shader assigns the color of the point to the gl_FragColor variable, which is a built-in variable of the chip shader that controls the final color of the pixel on the screen.
The gl_FragColor color value is also of type VEC4 and contains four floating point components, one representing the RGBA value.
Drawing operations
The code for the draw operation is as follows.
gl.drawArrays(gl.POINTS,0.1);
Copy the codeBefore doing this, you also do the clearColor and clear operations, which were explained earlier.
Gl.drawarrays is a powerful function that can be used to draw various graphs.
**gl.drawArrays(mode,first,count)
-
parameter
- Mode specifies drawing way Receive the following constants symbols to gl. POINTS, gl. LINES, gl. LINE_STRIP, gl. LINE_LOOP, gl. TRIANGLES, gl. TRIANGLE, gl. TRIANGLE_FAN
- First specifies the vertex from which to draw the integer (starting at 0)
- Count specifies how many vertex integers to draw
-
The return value is no
-
Error INVALID_ENUM The passed mode parameter is not one of the preceding parameters
When the program calls gl.drawarrays (), the vertex shader is executed count times, one vertex at a time.
In the sample code, the shader executes only once, calling and executing the internal main function line by line, assigning the position and size of the point.
Once the vertex shader is specified, the fragment shader starts executing, calling main to give the color value to gl_FragColor.
The final red point of 10 pixels is drawn at (0.0,0.0, 0.0,1.0).
WebGL coordinate system
In general, in WebGL, the X-axis is horizontal and positive to the right when facing the computer screen, the Y-axis is vertical and positive to the down, and the Z-axis is vertical and positive to the outside of the screen. Usually WebGL uses a right-handed coordinate system.
The coordinate system of WebGL is different from the coordinate system of Canvas drawing area, and the former needs to be mapped to the latter.
By default:
-
Canvas center point (0.0,0.0,0.0)
-
Canvas top and Bottom edges (1.0,0.0,0.0) (-1.0,0.0,0.0)
-
Canvas left and right edges (0.0,1.0,0.0) (0.0,-1.0,0.0)
Draw a point version 2
In previous WebGL programs, the vertex position information was written in the vertex shader program. In this section, we will learn how to pass the vertex position information from a JavaScript program to the vertex shader.
Let’s look at the complete program code first.
// Vertex shader
var VSHADER_SOURCE =
' attribute vec4 a_Position; \n' +
' attribute float a_PointSize; \n' +
'void main() { \n ' +
'gl_Position = a_Position; \n' +
'gl_PointSize = a_PointSize; \n' +
'}\n';
var FSHADER_SOURCE=
'void main(){\n'+
'gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0); \n'+ // Set the color
'}\n';
function main() {
var canvas = document.getElementById('example');
var gl = getWebGLContext(canvas);
if(! initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)) { }// Get the location of the attribute variable
var a_Position = gl.getAttribLocation(gl.program,'a_Position');
var a_PointSize = gl.getAttribLocation(gl.program,'a_PointSize');
if(a_Position < 0) {
console.log('fail to get a_postion');
return
}
if(a_PointSize < 0) {
console.log('fail to get a_PointSize');
return
}
// Pass the vertex position to the attribute variable
gl.vertexAttrib3f(a_Position,0.0.0.0.0.0);
gl.vertexAttrib1f(a_PointSize,50);
// Set the canvas background color
gl.clearColor(0.0.0.0.0.0.1.0);
/ / empty canvas
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw a point
gl.drawArrays(gl.POINT,0.1);
}
Copy the codeThere are two ways to pass information such as location to a vertex shader from a JavaScript program. By using the attribute variable or using the Uniform variable. Which variable to use depends on the data being transferred.
Attribute variables transport data that is related to vertices, while uniform variables transport data that is the same for all vertices.
The attribute variables
Let’s first look at the vertex shader program code, as follows.
var VSHADER_SOURCE =
' attribute vec4 a_Position; \n' +
' attribute float a_PointSize; \n' +
'void main() { \n ' +
'gl_Position = a_Position; \n' +
'gl_PointSize = a_PointSize; \n' +
'}\n';
Copy the codeThe Attribute variable is a GLSL ES variable that is used to pass data from outside to inside the vertex shader, and only the vertex shader can use it.
Attribute variable declaration
// Format < store qualifier > < type > < variable name >
attribute vec4 a_Position;
Copy the codeThe keyword attribute, called a storage qualifier, indicates that the next variable is an Attribute variable, which must be declared as a global variable to which data will be passed from outside the shader.
We agree that all attribute variables start with a_ to identify the type of the variable.
After the declaration we assign the a_Position variable to gl_Position.
Obtain the attribute variable storage address
To pass data from a JavaScript program to a shader, you need to ask the WebGL system for the storage address of the variable. We use gl.getattribLocation () to get the storage address of the variable.
Gl.getattriblocation () function description
Parameters:
- Is a program object that contains a vertex shader and a fragment shader. We’ll talk more about that later. But you must access this object after initShaders.
- Is the name of the attribute variable to get the stored address.
The return value:
Attribute Specifies the storage address of the variable. If the value is greater than 0 to 1, the specified attribute variable does not exist, or its name is prefixed with gl_ or webgl_.
Error: The INVALID_OPERATION program object failed to be linked. The length of the INVALID_VALUE name parameter is larger than the maximum length of the attribute variable name, which is 256 bytes by default.
The code for this step is as follows:
// Get the location of the attribute variable
var a_Position = gl.getAttribLocation(gl.program,'a_Position');
var a_PointSize = gl.getAttribLocation(gl.program,'a_PointSize');
if(a_Position < 0) {
console.log('fail to get a_postion');
return
}
if(a_PointSize < 0) {
console.log('fail to get a_PointSize');
return
}
Copy the codeAssign a value to the attribute variable
Once we have the variable’s storage address, we need to use that variable to pass a value into the shader, which we do using the gl.vertexattrib3f () function.
Gl. vertexAttrib3f(v0,v1,v2) function description
Pass data v0, v1,v2 to the attribute variable specified by the location argument
The arguments v0,v1, and v2 are the three floating-point coordinates of x,y, and z.
Returned value: None
Error INVALID_OPERATION has no current program object; INVALID_VALUE location Maximum number of attribute variables greater than or equal to the default value is 8.
After the function is called, three values are passed to the vertex shader’s a_Position variable.
Conclusion:
The shader part does two things: **
- Globally, the attribute variable is declared in the format of attribute + variable type VEC4 + variable name a_Position
- Assign the declared variable to gl_Position
Things to do in JavaScript programs:
- Obtain the storage address of the attribute variable gl.getattribLocation (gl.program,a_Position)
- After obtaining the storage address, pass the value to the vertex shader attribute variable gl.vertexattrib3f (location,v0,v1,v2)
Note:
The a_Position variable is of type VEC4, and gl.vertexattrib3f only passes three arguments. In fact, if the fourth parameter is omitted, the method defaults the fourth component to 1.0.
The fourth component of the homogeneous coordinate, 1.0, corresponds the homogeneous coordinate to the three-dimensional coordinate, so 1.0 is a safe fourth component.
Gl.vertexattrib3f (location,v0,v1,v2) family function
Gl.vertexattrib1f passes a precision argument that will be assigned to v0,v1,v2 will be set to 0.0, v3 to 1.0
Gl.vertexattrib2f passes 2 precision
Gl.vertexattrib3f delivers 3 precision
Gl.vertexattrib4f passes four accuracies
Naming conventions for WebGL related functions:
Basic function name Parameter Number Parameter type
Gl.vertexattrib base function name
3 Parameter Number
F Parameter type F indicates a floating point number and I indicates an integer
Draw a point version 3
In previous WebGL programs, the point color information was written in the vertex shader program. In this section, we will learn how to pass color from a JavaScript program to a chip shader.
Let’s take a look at the complete program code.
var VSHADER_SOURCE =
'attribute vec4 a_Position; \n' +
'void main() {\n' +
'gl_Position = a_Position; \n' +
'gl_PointSize = 10.0 ;\n' +
'}\n';
// Chip shader program
var FSHADER_SOURCE=
'precision mediump float; \n'+
'uniform vec4 u_FragColor; \n' +
'void main(){\n'+
'gl_FragColor = u_FragColor; \n'+ // Set the color
'}\n';
function main(){
// Get the canvas element
var canvas = document.getElementById('example');
// Get the WebGL context
var gl = getWebGLContext(canvas);
console.log(gl);
// Initialize the shader
if(! initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)) {console.log('fail');
}
// Get the location of the a_Position variable
var a_Position = gl.getAttribLocation(gl.program,'a_Position');
// Get the location where the u_FragColor variable is stored
var u_FragColor = gl.getUniformLocation(gl.program,'u_FragColor');
//
gl.clearColor(0.0.0.0.0.0.1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
canvas.onmousedown = function(ev) {
click(ev,gl,canvas,a_Position);
}
var g_points = []; // Array of mouse click positions
var g_colors =[]; // Store the values of the color array
function click(ev,gl,canvas,a_Position) {
var x = ev.clientX;
var y = ev.clientY;
var rect = ev.target.getBoundingClientRect();
x = ((x-rect.left) - canvas.height/2)/(canvas.height/2);
y = (canvas.width/2 - (y-rect.top))/(canvas.width/2);
g_points.push([x,y]);
if(x> 0.0 && y>= 0.0) {
g_colors.push([1.0.0.0.0.0.1.0])}if(x< 0.0 && y< 0.0) {
g_colors.push([1.0.1.0.0.0.1.0])}else {
g_colors.push([1.0.1.0.1.0.1.0]) / / white
}
gl.clear(gl.COLOR_BUFFER_BIT);
var len = g_points.length;
for(var i = 0; i< len; i++) {// Pass the attribute variable to the variable
var rgba = g_colors[i];
var xy = g_points[i];
gl.vertexAttrib3f(a_Position,xy[0],xy[1].0);
// Transfer the color of the point to u_FragColor
gl.uniform4f(u_FragColor,rgba[0],rgba[1],rgba[2],rgba[3])
/ / draw point
gl.drawArrays(gl.POINTS,0.1); }}}Copy the codeThe effect to be achieved in this example is to draw points according to the position of the mouse click, and set different colors according to the position of the points.
There are two problems involved, one is to get the coordinates of the mouse click position in webGL, and the other is how to dynamically change the color of the point.
Coordinate transformation
The location of the mouse click is saved in the event object EV, which is passed to the click function. Location coordinates can be obtained by accessing ev.clientX and ev.clientY.
These two coordinate values cannot be used directly for two reasons:
-
The mouse click position coordinates are in the browser client area, not in the Canvas.
-
Canvas coordinate system and WebGL coordinate system have different origin direction and positive Y axis. In canvas coordinate system, the normal Y axis is down, and the positive Y axis is up in WebGL.
Browser coordinates => Canvas coordinates
Get the coordinates of the browser from the event object
var x = ev.clientX;
var y = ev.clientY;
var rect = ev.target.getBoundingClientRect();
// Rect. left represents the canvas area offset relative to the left side of the browser
// Rect. top represents the canvas area offset from the top of the browser
// Suppose canvas coordinates are x1,y1 and client coordinates are x,y
x1+ rect.left = x
y1+ rect.top = y
// x-rect.x, y-rect.y can convert client coordinates to Canvas coordinates x1,y1.
Copy the codeCanvas coordinates => WebGL coordinates
Two characteristics of WebGL coordinates:
-
The origin of WebGL coordinates is in Canvas coordinates (Canvas.width /2, Canvas.height /2)
-
WebGL coordinates range from -1.0 to 1.0
Canvas. Width / 2 = x1/x2 => x2 = x1/ (canvas. Width / 2) => x2 = (x-rect.x)/ (canvas. Width / 2) // The Y transformation is similar.Copy the codeUniform variable
Attribute variables can only be used by vertex shaders, and uniform variables are required when using slice shaders.
Let’s look at the fragment shader code first.
// Chip shader program
var FSHADER_SOURCE=
// precision mdiump float; Medium precision is used here. More on that later.
'precision mediump float; \n'+
'uniform vec4 u_FragColor; \n' +
'void main(){\n'+
'gl_FragColor = u_FragColor; \n'+ // Set the color
'}\n';
Copy the codeThe statement
// Store the qualifier type variable name
uniform vec4 u_FragColor;
Copy the codeGets the uniform variable storage address
Here we use gl.getUniformLocation(program,name) to get the storage address of the variable.
var u_FragColor = gl.getUniformLocation(gl.program,'u_FragColor');
Copy the codeGl. getUniformLocation(program,name)
Parameters:
- Program specifies a program object that contains a vertex shader and a slice shader
- Name specifies the location where you want to retrieve the stored location variable
The return value:
- no-null
- The UNIFORM variable specified by NULL does not exist, or its name has a GL_ or webgl_ prefix. (Note: Unlike the gl.getattribLocation () method, -1 is returned if it is not found.)
Error: INVALID_OPERATION program failed to link; The length of the INVALID_VALUE name parameter is greater than the maximum length of a UNIFORM variable name. The default length is 256 bytes.
Assign to uniform variables
This is done using the gl.Uniform4f () function, which is similar to gl.vertexattrib3f ().
gl.uniform4f(u_FragColor,rgba[0],rgba[1],rgba[2],rgba[3])
Copy the codeUniform4f () :
-
gl.unifrom1f()
-
gl.unifrom2f()
-
gl.unifrom3f()
-
gl.unifrom4f()