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.