[Getting started with WebGL] 4. Rendering preparation and getting started with webgl rendering preparation

[Getting started with WebGL] 4. Rendering preparation and getting started with webgl rendering preparation

Note: The article is translated from http://wgld.org/, the original author shanbenya (doxas). If I have additional instructions in the article, I will add [lufy:]. In addition, the research on webgl is not in-depth enough, and some professional words are required, if the translation is incorrect, please correct me.

Required items

Last time, I introduced the basic knowledge of 3D plotting. Let's talk about the two coordinate systems determined by different zcoordinates and the types of coordinate transformations. This time, let's talk about what must be prepared during actual WebGL plotting.

First, the basic knowledge about HTML and javascript is not explained. If you have any unclear words or concepts, check them yourself. I think you have a certain degree of HTML and javascript basics.

HTML preparation

As mentioned above (2. Before starting WebGL, you should first know about canvas). WebGL uses the drawing area of canvas. That is to say, web pages using WebGL must contain canvas labels in HTML.

Add an ID attribute to the canvas tag. In javascript, you can easily obtain the canvas object by using functions such as getElementById. After obtaining the canvas, you can use javascript to complete all operations.

A minimum HTML template is like the following.

In the code above, script. js is a self-prepared javascript file containing various processing methods. The size of the canvas can be set in HTML, and javascript can also be used for dynamic formulation.

In addition, all scripts can be written in HTML. I personally think it is better to separate javascript code into separate files. This is not necessary.

About the shader
In WebGL, the so-called fixed pipeline does not exist. Someone may ask, what is a fixed pipeline? Here is a brief description.
A fixed pipeline is simply a series of computing flows carried out by 3d rendering, just like a pipeline. (It's a little too simple .)
In a fixed pipeline, the coordinate transformation of the model, view, and projection mentioned last time will be completed for us. You don't need to understand the details. You just need to know that all these coordinate transformations are included in them and will help us calculate them.
If there is a fixed pipeline, it is easier to write the program, because all the transformations are completed by the fixed pipeline, but the disadvantage is that the degree of freedom is low. Fixed pipelines can only perform some basic operations. If you want to perform some special operations, it is quite troublesome.
Okay, here's the fixed pipeline.
As mentioned above, there is no fixed pipeline in WebGL. That is to say, the coordinate transformation must all be done by yourself. In addition, this describes the coordinate transformation mechanism called the Shader ).
In this way, the mechanism controlled by the programmer is called the Editable shader. The coloring tool has two types: vertex coloring tool for processing geometric vertices and fragment coloring tool for processing pixels.
Since there is no fixed pipeline in WebGL, you must prepare the vertex and fragment pasters.

How to handle the coloring Tool
How can we prepare vertex and fragment pasters?
In fact, there are many ways to add a colorant. The coloring tool is compiled by the programmer, and the code of the coloring tool is a simple string. Therefore, no matter what method is used, you only need to pass the shader string to the program.
The simplest method is to record the shader in HTML. In this way, the HTML script tag is used. 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>
The same is true for canvas. In order to be called in javascript, the id attribute is added to the script tag. In addition, the type attribute is different from that of javascript. Do not mistakenly think it is javascript code.

> Reason for specifying the type attribute
The type attribute specifies [x-shader/x-vertex] and [x-shader/x-fragment], which is not the formal syntax defined in HTML. However, if a browser does not recognize any other tag, the browser will ignore it and will not regard it as javascript code. The browser only treats it as a meaningless string, and the content in the tag can be used in the program.
Alternatively, do not use the script tag.
The main reason is that the code of the shader is a simple string, which can be defined directly in javascript. In this case, the HTML code becomes much simpler when the coloring tool is defined in a javascript file. It is not to say that this method is better than the previous one.

Summary
Use WebGL for 3D rendering. This time we will discuss the following preparations.
At the minimum, HTML and canvas labels are required to process javascript code of WebGL, vertices and fragment coloring ers.
In addition, for example, it is sometimes necessary to describe the model data and image files of a 3D model, but it varies depending on what you want to do with WebGL. If you really want to update the limit, you only need an HTML file. The javascript code and the coloring tool code can be recorded in the HTML file.
Basically, all the javascript code of this website is recorded in a separate file, and the code of the coloring tool is not necessarily recorded in HTML. You should adapt to the situation as appropriate.


Next time, we will introduce the core content of 3D plotting, matrix.


Reprinted Please note: