Overview of WebGL 3D in HTML5 (Part 1)—WebGL native development opens a new era of web page 3D rendering_html5 tutorial skills

WebGL opens a new era of 3D rendering on web pages, which allows 3D content to be rendered directly in canvas without any plug-ins. WebGL is the same as the canvas 2D API. It manipulates objects through scripts, so the steps are basically similar: prepare the work context, prepare data, draw the object in the canvas and render it. The difference from 2D is that 3D involves more knowledge, such as world, light, texture, camera, matrix and other professional knowledge. There is a good Chinese tutorial on WebGL, which is the first link in the usage reference below, so I won’t do anything about it here. The following content is just a brief summary of the learning content.

Browser support
Since Microsoft has its own graphics development plan and has not supported WebGL, IE is currently unable to run WebGL except for installing plug-ins. For other mainstream browsers such as Chrome, FireFox, Safari, Opera, etc., just install the latest version. In addition to installing the latest browser, you also need to ensure that the graphics card driver is also up to date.
After installing these, you can open the browser and enter the following URL to verify the browser's support for WebGL: http://webglreport.sourceforge.net/.

If you still cannot run WebGL after installing the above browsers normally, you can try to force WebGL support to be turned on. The opening method is as follows:
Chrome browser
We need to add some startup parameters to Chrome. The following specific steps take the Windows operating system as an example: Find the shortcut of the Chrome browser, right-click the shortcut Method, select properties; in the target box, after the quotation marks behind chrome.exe, add the following content:

--enable-webgl--ignore-gpu-blacklist--allow-file-access-from-files

Close Chrome after clicking OK, and then use this shortcut to launch the Chrome browser.
The meanings of several parameters are as follows:
--enable-webgl means to enable WebGL support;
--ignore-gpu-blacklist means to ignore the GPU blacklist, which means that there are some graphics cards and GPUs Because it is too old and other reasons, it is not recommended to run WebGL. This parameter allows the browser to ignore this blacklist and force WebGL to run;
--allow-file-access-from-files means to allow resources to be loaded locally. If you are not a WebGL developer and do not need to develop and debug WebGL, but just want to take a look at the WebGL Demo, then you do not need to add this parameter.

Firefox browser
Firefox users please enter "about:config" in the address bar of the browser, press Enter, and then search for "webgl" in the filter (filter) and replace webgl Set .force-enabled to true; set webgl.disabled to false; search for "security.fileuri.strict_origin_policy" in the filter and set security.fileuri.strict_origin_policy to false; then close all currently open Firefox windows , restart Firefox.
The first two settings are to force WebGL support to be turned on, and the last security.fileuri.strict_origin_policy setting is to allow resources to be loaded from local sources. If you are not a WebGL developer, you do not need to develop and debug WebGL, but just want to take a look at WebGL. Demo, then you don’t need to set this item.

Safari browser
Find "Properties" → "Advanced" in the menu, select "Show Development Menu", then go to the "Develop" menu and select "Turn on WebGL".

Development Steps

The following code simply summarizes the relevant concepts. It comes from the Chinese tutorial in the reference and involves more 3D knowledge. Interested students can jump directly to the Chinese tutorials in the Practical Reference, which are much more detailed and accurate than what I explain here. Students who join in the fun can simply take a look at it without delving into the meaning of each line of code.

Preparation
Needless to say, this is to add a canvas element to the page as a rendering container. For example:

Copy code

The code is as follows:

Yourbrowserdoesn'tappeartosupporttheHTML5canvaselement.

It’s time to officially start writing the script. First, take a look at the program entry and overall structure:

Copy the code

The code is as follows:

functionstart(){
varcanvas=document.getElementById("glcanvas");
initGL(canvas);
initShaders() ;
initBuffers();
gl.clearColor(0.0,0.0,0.0,1.0);
gl.enable(gl.DEPTH_TEST);
drawScene();
}

The several methods here represent typical WebGL drawing steps:

Step 1: Initialize the WebGL working environment - initGL
The code for this method is as follows:

Copy code

The code is as follows:

vargl;
functioninitGL(canvas){
gl=null;
try{
//Trytograbthestandardcontext.Ifitfails,fallbacktoexperimental.
gl=canvas.getContext("webgl")||canvas.getContext("experimental-webgl");
}
catch(e){} //Ifwedon'thaveaGLcontext,giveupnow
if(!gl){
alert("UnabletoinitializeWebGL.Yourbrowsermaynotsupportit.");
}
}

This method is very simple. It is to obtain the WebGL drawing environment. You need to pass the parameter "webgl" to the canvas.getContext method. However, since the current WebGL standard has not been finalized, the parameters used in the experimental stage are all is "experimental-webgl". Of course, you can also call canvas.getContext("experimental-webgl") directly. After the standard is set, you can modify another code.

Step 2: Initialize Shaders - initShaders
The concept of shader is relatively simple. To put it bluntly, it is a graphics card operation instruction. Constructing a 3D scene requires a large amount of calculations of color, position, and other information. If these calculations are performed by software, the speed will be very slow. Therefore, letting the graphics card calculate these operations is very fast; how to perform these calculations is specified by the shader. The shader code is written in a shader language called GLSL, which we will not describe here.
Shaders can be defined in html and used in code. Of course, the same applies if you use a string to define a shader in your program.
Let’s look at the definition part first:

Copy the code

The code is as follows:

precisionmediumpfloat;
varyingvec4vColor;
voidmain(void){
gl_FragColor=vColor;
}


attributevec3aVertexPosition;
attributevec4aVertexColor;
uniformmat4uMVMatrix;
uniformmat4uPMatrix;
varyingvec4vColor;
voidmain(void){
gl_Position=uPMatrix*uMVMatrix*vec4(aVertexPosition,1.0);
vColor=aVertexColor;
}
< /script>

There are two shaders here: face shader and vertex shader.
Regarding these two shaders, it is necessary to explain here that 3D models in computers are basically described by points combined with triangular patches. The vertex shader is to process the data of these points, and the surface shader is Through interpolation, the data of points on the triangular patch are processed.
The vertex shader defined above defines the position and color calculation method of the vertex; while the surface shader defines the color calculation method of the interpolation point. In actual application scenarios, effects such as processing light in the shader will also be involved.
Defines shaders, you can find them in the program and use them:

Copy code

The code is as follows:

varshaderProgram;
functioninitShaders(){
varfragmentShader=getShader(gl,"shader-fs");
varvertexShader=getShader(gl,"shader-vs ");
shaderProgram=gl.createProgram();
gl.attachShader(shaderProgram,vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)){
alert("Couldnotinitialiseshaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute=gl.getAttribLocation (shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.vertexColorAttribute=gl.getAttribLocation(shaderProgram, "aVertexColor");
shaderProgram.pMatrixUniform=gl.getUniformLocation(shaderProgram,"uPMatrix");
shaderProgram.mvMatrixUniform=gl.getUniformLocation(shaderProgram,"uMVMatrix");
}


The shader is there, but how do you let the graphics card execute it? Program is this kind of bridge. It is the native binary code of WebGL. Its function is basically to let the graphics card run the shader code to render the specified model data.
An auxiliary method getShader is also used here. This method is to traverse the HTML document, find the definition of the shader, and create the shader after getting the definition. I won’t go into details here:

Copy code

The code is as follows:

functiongetShader(gl,id){
varshaderScript,theSource,currentChild,shader;
shaderScript=document.getElementById(id);
if(!shaderScript){
returnnull;
}
theSource="";
currentChild=shaderScript.firstChild;
while (currentChild){
if(currentChild.nodeType==currentChild.TEXT_NODE){
theSource =currentChild.textContent;
}
currentChild=currentChild.nextSibling;
}
if( shaderScript.type=="x-shader/x-fragment"){
shader=gl.createShader(gl.FRAGMENT_SHADER);
}elseif(shaderScript.type=="x-shader/x-vertex" ){
shader=gl.createShader(gl.VERTEX_SHADER);
}else{
//Unknownshadertype
returnnull;
}
gl.shaderSource(shader,theSource);
//Compiletheshaderprogram
gl.compileShader(shader);
//Seeifitcompiledsuccessfully
if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)){
alert("Anerroroccurredcompilingtheshaders:" gl. getShaderInfoLog(shader));
returnnull;
}
returnshader;
}

Step 3: Create/load model data - initBuffers
In these small examples, the model data is basically generated directly. In the actual program, these data should be loaded from the model:

Copy the code

The code is as follows:

vartriangleVertexPositionBuffer;
vartriangleVertexColorBuffer;
functioninitBuffers(){
triangleVertexPositionBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);
varvertices=[
0.0,1.0,0.0,
-1.0,-1.0,0.0,
1.0,-1.0,0.0
];
gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(vertices),gl.STATIC_DRAW);
triangleVertexPositionBuffer.itemSize=3;
triangleVertexPositionBuffer.numItems=3;
triangleVertexColorBuffer=gl.createBuffer( );
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);
varcolors=[
1.0,0.0,0.0,1.0,
0.0,1.0,0.0,1.0,
0.0,0.0 ,1.0,1.0
];
gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(colors),gl.STATIC_DRAW);
triangleVertexColorBuffer.itemSize=4;
triangleVertexColorBuffer.numItems=3;
}

The above code creates the vertices of the triangle and the color data of the vertices and places them in the buffer.

Step 4: Rendering - drawScene
After preparing the data, just hand it over to WebGL for rendering. The gl.drawArrays method is called here. Look at the code:

Copy the code

The code is as follows:

functiondrawScene(){
gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
pMatrix=okMat4Proj(45.0,gl.viewportWidth/gl.viewportHeight ,0.1,100.0);
mvMatrix=okMat4Trans(-1.5,0.0,-7.0);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.ite mSize ,gl.FLOAT,false,0,0);
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,triangleVertexColorBuffer.itemSize,gl.FLOAT,false,0,0 );
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES,0,triangleVertexPositionBuffer.numItems);
}

This function first sets the background of the 3D world to black, then sets the projection matrix, sets the position of the object to be drawn, and then draws the object based on the vertex and color data in the buffer. There are also some auxiliary methods for generating projection matrices and model view rectangles (using the matrix auxiliary methods in the Oak3D graphics library) that have little to do with the topic and will not be explained in detail here.
Basically, that’s all the process. More complex textures, lights, etc. are all implemented by adding some WegGL features on these basis. Please refer to the following Chinese tutorial for detailed examples.

How about it? What is it like to develop using native WebGL? Not only do you need to have deep 3D knowledge, you also need to know various implementation details. WebGL does this to flexibly adapt to various application scenarios, but for most non-professionals like me, many details don't need to be known. This has given rise to various class libraries that assist development, such as the Oak3D library used in this section (in order to demonstrate WebGL development, only the matrix auxiliary method is used in the example). The next section will introduce a commonly used Three.js graphics library.

Practical reference:
Chinese tutorial: http://www.hiwebgl.com/?p=42

Development Center: https://developer.mozilla.org/en/WebGL