WebGL 示例应用程序
WebGL 示例应用程序
我们讨论了WebGL和WebGL管道的基础(用于渲染图形应用程序的过程)。在本章中,我们将提供一个示例应用程序来演示如何使用WebGL创建一个三角形,并观察应用程序中遵循的步骤。
WebGL应用结构
WebGL应用程序代码是JavaScript和OpenGL着色语言的结合。
JavaScript与CPU进行通信
OpenGL着色语言与GPU通信。
示例应用程序
现在让我们举一个简单的例子来学习如何使用WebGL绘制一个具有二维坐标的简单三角形。
<!doctype html>
<html>
<body>
<canvas width = "300" height = "300" id = "my_Canvas"></canvas>
<script>
/* Step1: Prepare the canvas and get WebGL context */
var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');
/* Step2: Define the geometry and store it in buffer objects */
var vertices = [-0.5, 0.5, -0.5, -0.5, 0.0, -0.5,];
// Create a new buffer object
var vertex_buffer = gl.createBuffer();
// Bind an empty array buffer to it
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
// Pass the vertices data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Unbind the buffer
gl.bindBuffer(gl.ARRAY_BUFFER, null);
/* Step3: Create and compile Shader programs */
// Vertex shader source code
var vertCode =
'attribute vec2 coordinates;' +
'void main(void) {' + ' gl_Position = vec4(coordinates,0.0, 1.0);' + '}';
//Create a vertex shader object
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//Attach vertex shader source code
gl.shaderSource(vertShader, vertCode);
//Compile the vertex shader
gl.compileShader(vertShader);
//Fragment shader source code
var fragCode = 'void main(void) {' + 'gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' + '}';
// Create fragment shader object
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
// Attach fragment shader source code
gl.shaderSource(fragShader, fragCode);
// Compile the fragment shader
gl.compileShader(fragShader);
// Create a shader program object to store combined shader program
var shaderProgram = gl.createProgram();
// Attach a vertex shader
gl.attachShader(shaderProgram, vertShader);
// Attach a fragment shader
gl.attachShader(shaderProgram, fragShader);
// Link both programs
gl.linkProgram(shaderProgram);
// Use the combined shader program object
gl.useProgram(shaderProgram);
/* Step 4: Associate the shader programs to buffer objects */
//Bind vertex buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
//Get the attribute location
var coord = gl.getAttribLocation(shaderProgram, "coordinates");
//point an attribute to the currently bound VBO
gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);
//Enable the attribute
gl.enableVertexAttribArray(coord);
/* Step5: Drawing the required object (triangle) */
// Clear the canvas
gl.clearColor(0.5, 0.5, 0.5, 0.9);
// Enable the depth test
gl.enable(gl.DEPTH_TEST);
// Clear the color buffer bit
gl.clear(gl.COLOR_BUFFER_BIT);
// Set the view port
gl.viewport(0,0,canvas.width,canvas.height);
// Draw the triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>我们遵循五个顺序步骤,使用webgl绘制一个简单的三角形。这些步骤如下:
1.准备画布并获取WebGL呈现上下文,我们得到当前的html画布对象,并获得其WebGL呈现上下文。
2.定义几何体并在缓冲对象中存储它,我们定义了顶点、索引、颜色等几何体的属性,并将它们存储在JavaScript数组中,然后,我们创建一个或多个缓冲区对象并将包含数据的数组传递给相应的缓冲区对象。在示例中,我们将三角形的顶点存储在一个JavaScript数组中,并将此数组传递给一个顶点缓冲对象。
3.创建和编译着色程序,我们编写顶点着色程序和片段着色程序并编译它们,通过链接这两个程序创建一个组合程序。
4.将着色程序与缓冲区对象相关联。我们将缓冲对象和组合着色程序相关联。
5.绘制所需的对象(三角形),此步骤包括清除颜色、清除缓冲区位、启用深度测试、设置视图端口等操作。最后,您需要使用drawArrays()或drawElements()中一个方法绘制必需的图形。