[WebGL Primer] Seven, context initialization

Note: The article is translated from http://wgld.org/, the original author Sambonja 広 (doxas), the article if there is my additional instructions, I will add [Lufy:], in addition, The WEBGL research is not deep enough, some professional words, if the translation is wrong, you are welcome to correct.

very important to initialize

From this time onwards, we started to deal with WebGL. The first is the initialization of WebGL, which completes all preparation before rendering.
The previous article also gave the embryonic form of HTML, remember, like the following code.

this time, starting with this code, this HTML code simply places a canvas on the page, gets the context from the canvas, and then initializes the WebGL. 

Get Context
Just now the code, in the head tag refers to the external JS file script.js, then look at the code in this file. First, use getElementById to get canvas.
var c = document.getElementById (' canvas ');
In this way, C represents the canvas object, and next defines the size of the canvas.
C.width = 500;c.height = 300;
This will set the size of the canvas to a width of 500px, 300px high. Of course, the size of this canvas can be set according to your needs freely. I set it casually here, nothing special.
Next, to get the context of WEBGL, you need to use the GetContext function, the GetContext function is to get the context object from the canvas, the argument is a string, specify the name of the context you want to get.
When this article was written (February 2012), the context of WEBGL is not yet available through the official name WebGL, and the context object must be obtained using EXPERIMENTAL-WEBGL.
However, it is possible to obtain the context through a formal name in the future, so when you get the context object, use or operation (| | ) to execute in the order of the names.
var gl = c.getcontext (' WebGL ') | | C.getcontext (' Experimental-webgl ');
If the browser supports this, then GL is the context of the WEBGL you acquired, and the next step is to use GL to manipulate WebGL.

initialization of the screen
The context of WebGL and the previous context (before starting WebGL) are all about the various processing objects involved in drawing, with a very large number of functions, constants, and attributes.
In these functions, one is used to clear the screen, the function name is clear, actually look at the name to know it ...
This function clears the screen and returns to a completely new state. Parameters are objects to be emptied, or constants defined in WebGL. This time, just erase the color on the screen, so use the constant of color_buffer_bit, which is defined to use the color specified in the canvas to clear the screen.
Gl.clear (GL. Color_buffer_bit);
If you want to clear the color of the screen, you have to define it separately. This function is Clearcolor. Clearcolor function parameters have four, is simple rgba, very intuitive bar, the use of the following methods.
Gl.clearcolor (0.0, 0.0, 0.0, 1.0);
As shown above, when the clear method executes, it uses black to initially initialize the screen. The specified range of values for the parameter is between 0 and 1, and note that you cannot use the 16-in color as in normal HTML.
The above processing, is the following script.js code, because the page to execute after loading, so write the code in onload.
onload = function () {    //Canvasエレメントを get    var c = document.getElementById (' canvas ');    C.width = $;    C.height = +;    Webglコンテキストを obtained    var gl = c.getcontext (' WebGL ') | | | c.getcontext (' EXPERIMENTAL-WEBGL ');        Canvasを Black でクリア (initial) able    gl.clearcolor (0.0, 0.0, 0.0, 1.0);    Gl.clear (GL. Color_buffer_bit);};
Click on the link below to see the actual demo.
Get the context of WEBGL and then perform an initial demo
This example simply gets the context of WEBGL and then uses black to empty the canvas, so the picture is only black. However, if the screen can be run out, the preparation of WebGL is basically done.

Summary
This time, just grab the WEBGL context and then use black to clear the screen. But in fact, it's possible to start using WEBGL.
Next, it will be more specific and detailed about WEBGL-related processing, but whatever you do, the basics are important, and this time it needs to be thoroughly understood.

Next time, introduce the basics of shader-related.

reprint Please specify: transfer from Lufy_legend's blog Http://blog.csdn.net/lufy_legend