[WebGL Primer] four, rendering ready

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.

something that must be prepared

The basics of 3D drawing were last introduced. The two coordinate systems that are determined by different z-coordinates, and the kinds of coordinate transformations. This time, say something that must be prepared for the actual WebGL drawing.

First, the basic knowledge of html,javascript is not explained. If there are words or concepts that you don't understand, please check them yourself. I think you have a certain HTML and JavaScript based on the premise of the explanation.

Preparation of HTML

As I said earlier (two, before you start WebGL, see Canvas), WebGL leverages the canvas's drawing area. In other words, using WebGL's Web page, the HTML must contain a canvas tag.

Adding an id attribute to this canvas tag makes it easy to get to this canvas object using functions such as getElementById in JavaScript, and then using JavaScript to do all the work.

A minimal HTML template, just like the following.

In the code above, Script.js is prepared to include various processing JavaScriptfile. The size of the canvas can be set in HTML, but it can also be dynamically developed using JavaScript. 
In addition, all scripts are written in HTML, of course, and it is not necessary for individuals to think that it is better to separate the JavaScript code into separate files.

about Shaders
In WebGL, the so-called fixed pipeline does not exist. It is estimated that some people will ask, what is a fixed pipeline? Let's start with a brief explanation.
Fixed pipelines, in short, are a series of computational processes performed by 3d rendering, just like pipelining. (That's a little too simple.) ）
Fixed pipeline, the last said model, view, projection of the coordinate transformation will be done for us. No need to understand the details, just know that all of these coordinate transformations are contained inside, will help us to calculate well.
If you have a fixed pipeline, it is easier to write the program because all the transformations are done by a fixed pipeline, but the disadvantage is the low degree of freedom. Fixed pipelines can only do some of the most basic operations, if you want to do some special processing, it is more troublesome.
OK, the fixed line is here.
As stated earlier, there is no fixed pipeline in WebGL. In other words, coordinate transformations must be done by themselves. Moreover, the mechanism that accounts for the transformation of coordinates is called a shader (Shader).
This mechanism, which can be controlled by programmers, is called an editable shader. The shader, in turn, has two types of vertex shaders that handle geometry vertices and fragment shaders that handle pixels.
Because there are no fixed pipelines in WebGL, you must have a vertex shader and fragment shader ready.

How to handle shaders
How are vertex shaders and fragment shaders prepared?
In fact, the addition of shaders can be done in a variety of ways. Shaders are written by the programmer themselves, and the code of the shader is simply a string. So, whatever the method, just pass the shader string to the program.
The simplest way to do this is to record the shader in HTML. Using this method is done using the script tag of HTML. The following is a simple example.
<script id= "Vshader" type= "X-shader/x-vertex" >    ※ Vertex shader </script><script id= "Fshader" type= " X-shader/x-fragment ">    ※ Fragment Shader </script>
Canvas, too, adds an id attribute to the script tag in order to be called in JavaScript. In addition, the type attribute is different from JavaScript and should not be mistaken for JavaScript code.
>> the reason for specifying the type attribute
The type attribute specifies [X-shader/x-vertex] and [X-shader/x-fragment], which is not a formal notation defined in HTML. However, if the browser encounters an unrecognized tag, it will ignore it, and the browser will not consider it to be JavaScript code. The browser only treats it as a meaningless string, and the contents of the tag can be used in the program.
Another, or you can do it without using the script tag.
The main reason is that the code of the shader is simply a string that can be defined directly within JavaScript. In this case, the shader is defined in the JavaScript file, the HTML code is much simpler, not that it is better than the previous approach.

Summarize
With WebGL for 3D rendering, here are a few things to prepare.
At a minimum, Html,canvas tags are required to handle the code of the WebGL JavaScript code, vertex shader, and fragment shader.
In addition, for example, to depict the model data of 3D models, picture files and so on are sometimes needed, but depending on what you want to do with WEBGL different. If you really want to talk about the latest limit, you just need an HTML file. Both JavaScript code and shader code can be recorded in an HTML file.
Basically, all of the JavaScript code on this site is recorded in a separate file, and the code of the shader is not required to be recorded in the HTML, so you can improvise according to the situation.

Next, introduce the core content of the 3D drawing, Matrix.

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