table of Contents
1 Overview
On the tutorial "Easy Tutorial WebGL (a): a first simple example" in the drawing by way of example a point on the programmable WebGL rendering pipeline has a basic understanding. In the previous example of plotted points, the position of a point, point size, color dots, are written in the fixed shader, such a program is the lack of scalability.
For example, I want to draw a terrain (DEM), terrain data is usually stored in the file of the terrain. After the program is loaded, data must first be read into memory, and then transferred to the memory of the last drawn by the graphics card. The reason why the rendering pipeline flexible and powerful, it is precisely because the data can be passed to the shader is responsible for drawing work.
2. Example: plotted point a (modified version)
Improvement over the previous examples of the plotted points, improved HelloPoint1.js code is as follows:
// 顶点着色器程序
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' + // attribute variable
'void main() {\n' +
' gl_Position = a_Position;\n' + // Set the vertex coordinates of the point
' gl_PointSize = 10.0;\n' + // Set the point size
'}\n';
// 片元着色器程序
var FSHADER_SOURCE =
'precision mediump float;\n' +
'uniform vec4 u_FragColor;\n' + // uniform変数
'void main() {\n' +
' gl_FragColor = u_FragColor;\n' + // Set the point color
'}\n';
function main() {
// 获取 <canvas> 元素
var canvas = document.getElementById('webgl');
// 获取WebGL渲染上下文
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// 初始化着色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// 获取attribute变量的存储位置
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return;
}
// 将顶点位置传输给attribute变量
gl.vertexAttrib3f(a_Position, 0.5, 0.5, 0.0);
//获取u_FragColor变量的存储地址
var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
if (!u_FragColor) {
console.log('Failed to get the storage location of u_FragColor');
return;
}
//将点的颜色传入到u_FragColor变量中
gl.uniform4f(u_FragColor, 0.0, 0.8, 0.0, 1.0);
// 指定清空<canvas>的颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清空<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制一个点
gl.drawArrays(gl.POINTS, 0, 1);
}1) attribute variable
In the vertex shader, you can see attribute declares a global variable a_Position, and assign it to these gl_Position:
// 顶点着色器程序
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' + // attribute variable
'void main() {\n' +
' gl_Position = a_Position;\n' + // Set the vertex coordinates of the point
' gl_PointSize = 10.0;\n' + // Set the point size
'}\n';attribute is one of the three variable declaration glsl, the representative vertex is associated with the data, only be used in the vertex shader. This variable is stored into a vertex shader to transfer data from the outside.
After you define a good attribute variables in the shader, you also need to interact through JS and shader. By rendering context variables WebGL gl, method to obtain the memory address can be obtained attribute variables getAttribLocation (), which is defined as follows:
With this function, the attribute acquiring position shader variables:
// 获取attribute变量的存储位置
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return;
}After obtaining the address, you can transfer the data to attribute variables. By using gl. VertexAttrib3f () function to pass values to the shader. Here the desired position of the plotted points is transmitted to a vertex shader.
// 将顶点位置传输给attribute变量
gl.vertexAttrib3f(a_Position, 0.5, 0.5, 0.0);Its function is defined as follows:
Note that this function is a function of a series of the same family, are based on the number of parameters based function name + + type named parameters, to meet the different transmission data. Specific can access the WebGL API.
2) uniform variable
Similarly, the fragment shader, declare a global variable of uniform u_FragColor, and assigned to gl_FragColor:
// 片元着色器程序
var FSHADER_SOURCE =
'precision mediump float;\n' +
'uniform vec4 u_FragColor;\n' + // uniform変数
'void main() {\n' +
' gl_FragColor = u_FragColor;\n' + // Set the point color
'}\n';glsl is uniform in another variable declaration, is a JavaScript program represented by the same vertex shader and fragment shader transmission of the (same) data; that is to say that the variables may be also used in the vertex shader It may be used to fragment shader.
Similarly with the attribute variable, Uniform variables are to obtain its address and its traditional values. Here the desired color rendering is transferred to fragment shader:
//获取u_FragColor变量的存储地址
var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
if (!u_FragColor) {
console.log('Failed to get the storage location of u_FragColor');
return;
}
//将点的颜色传入到u_FragColor变量中
gl.uniform4f(u_FragColor, 0.0, 0.8, 0.0, 1.0);It can be seen that a uniform variables) function to get the address gl.getUniformLocation (, gl.uniform4f () variable data transmission. Their function is defined as follows:
3) varying variables
In addition to uniform and variable attribute variable, there is a varying variables, a variable which represents the flow from the fragment shader vertex shader variable. This will be mentioned later. Embodiment is shown below the colored transmitting data:
3. Results
Open HelloPoint1.html again, it displays the results as follows:
We can see the point position has changed, but also the color turned green from red. Position information and color information is no longer hard-coded in the shader, but incoming from the outside.
4. Reference
Originally part of the code and illustrations from "WebGL Programming Guide," the source link: https://share.weiyun.com/5VjlUKo , password: sw0x2x. Follow-up will continue to update the contents of this shared directory.