Webgl-getting started

one, the difference between WebGL and traditional web pages:

Common Web page composition: HTML, JavaScript;

WebGL Web page composition: HTML5, javascript, and GLSL es (shader language OpenGL es);

WebGL uses the <canvas> element in H5 to define the drawing area and then draws three-dimensional graphics in the canvas through JavaScript embedded GLSL es.

Canvas can support both two-dimensional and three-dimensional graphics, it does not directly provide a drawing method, but instead provides a context mechanism to draw the graph,

2.1 Using canvas to draw a two-dimensional space step:

2.1.1 Creating HTML5 Canvas

<id= "canvas"  width= "200px"  height= "200px" ></ Canvas >

2.1.2 Get the Canvas's ID and canvas context

// get the canvas element var canvas = document.getElementById (' canvas '); // get draw Two-dimensional context var ctx = Canvas.getcontext (' 2d ');

2.1.3 is drawn using the method provided by the Context.

Properties and Methods Reference: http://www.w3school.com.cn/tags/html_ref_canvas.asp

For example:

Ctx.fillstyle = ' Rgba (255,0,0,1.0) '; // set the fill color to red ctx.fillrect (0,0,200,200); // fill a rectangle with fill color

2.2 Using canvas to draw WebGL Steps:

2.2.1 Creating HTML5 Canvas (ibid.)

2.2.2 Get the Canvas's ID (ibid.)

2.2.3 Get WebGL

// get the WebGL context var gl = canvas.getcontext (' WebGL ');

Explanation: in order to get the Webglrenderingcontext object (or the graphical WebGL context object or only in the case of webgl), call the current htmlcanvaselement getcontext () method. The syntax for GetContext () is as Follows:

Canvas.getcontext (contexttype, contextattributes);

The

is  contenttype with the "webgl" string or "experimental-webgl". The ContextAttributes parameter is Optional.   (although in this step, make sure that your browser implements the WEBGL 1.0 version (opengl es 2.0)). The parameter contextattributes of WebGL is not mandatory. This parameter provides the accept Boolean value, as listed below for various options  

alpha	If its value is  true, it provides an alpha buffer to the Canvas. By default, its value is  true                            &NBS P
depth	if If its value is true, it will get a drawing buffer that contains at least 16 bits of depth buffer. By default, its value is true
stencil	If its value is true, it gets a drawing buffer that contains at least 8 bits of the template Cache. By default, its value is False
antialias	If its value is true, it gets a drawing buffer that performs antialiasing. By default, its value is true
premultipliedalpha	If its value is true, it gets a drawing buffer that contains the color associated with the pre-multiply Alpha. By default, its value is true
preservedrawingbuffer	If its value is true, the buffers will not be zeroed until they are purged or overwritten by the author to retain their values. By default, its value is False

For example:

// WebGL Context with parameters var false true });

2.2.4 Compiling shaders

Shader Reference: http://www.yiibai.com/webgl/webgl_shaders.html

2.2.4.1 storage shader (vertex shader and fragment shader) with vertex shader as an example

var vshader_source =        "void main () {" +        //set coordinates        "gl_position = vec4 (0.0, 0.0, 0.0, 1.0); "+        //set size        " gl_pointsize = 10.0; " +        "} ";

2.2.4.2 compiler shader, There are three steps

(1) Create a Shader object

Object Createshader (enum Type)

As observed in the syntax, the method accepts predefined enumeration values as Parameters. We have two options for This: GL. Vertex_shader Create a vertex shader, GL. Fragment_shader Create a fragment Shader.

// example: Creating a fixed-point shader var vertshader = Gl.createshader (gl. vertex_shader);

(2) attaching a well-written shader to the shader

OID Shadersource (Object shader, string Source)

Which: shader? You must create a shader object to pass as a parameter, Source? You must pass in the shader program code in string format.

(3) Compile the program

Compileshader (Object Shader)

This method accepts the shader program object as a Parameter. After creating the shader program object, attach the source code and pass the object to the method

2.2.5 Merge Program

(1) Create a Program object

Createprogram ();

(2) Additional Shaders

Attachshader (object program, Object shader);

Which: program? By creating an empty program object as a parameter, Shader? One of the passed shader compilers (vertex shader, fragment Shader)

(3) Chain Color Filter

Linkprogram (shaderprogram);

(4) use of the program

Useprogram (shaderprogram);

Case:

var shaderprogram =

2.2.6 Drawing Images

Gl.drawarrays (gl. POINTS, 0, 1);

three, The complete code

HTML code

<!DOCTYPE HTML><HTML><Head>    <MetaLang= "en">    <MetaCharSet= "UTF-8">    <title>WebGL Study</title>    <Linkhref= "style/style.css">    <Scripttype= "text/javascript"src= "js/js.js"></Script></Head><Body><CanvasID= "canvas"width= "200px"Height= "200px"></Canvas></Body></HTML>

JavaScript code:

/** * Created by Houbingshuai on 2016/12/3. */window.onload = function () {///vertex shader program var vshader_source = "void main () {" +//set coordinates "GL _position = vec4 (0.0, 0.0, 0.0, 1.0);    "+//set size" gl_pointsize = 10.0; "+"} "; Element shader var Fshader_source = "void main () {" +//set color "gl_fragcolor = vec4 (1.0, 0.0, 0.0, 1.0)    ;" +        "}";    Get the canvas element var canvas = document.getElementById (' Canvas ');    Get draw two-dimensional context var gl = canvas.getcontext (' WebGL ');        If (!gl) {console.log ("Failed");    Return }//compile shader var vertshader = Gl.createshader (gl.    vertex_shader);    Gl.shadersource (vertshader, vshader_source);    Gl.compileshader (vertshader); var fragshader = Gl.createshader (gl.    fragment_shader);    Gl.shadersource (fragshader, fshader_source);    Gl.compileshader (fragshader);    Merge program var shaderprogram = Gl.createprogram ();    Gl.attachshader (shaderprogram, vertshader); Gl.attachshaDer (shaderprogram, fragshader);    Gl.linkprogram (shaderprogram);    Gl.useprogram (shaderprogram); Draw a point gl.drawarrays (gl. POINTS, 0, 1);}

Summary: the initial knowledge of webgl, feel good, try it young

Webgl-getting started