WebGL 代码实例:绘图模式
WebGL 代码实例:绘图模式
在前面,我们讨论了如何使用WebGL绘制三角形,除了三角形之外,WebGL还支持各种其他绘图模式,本节将讲解WebGL支持的绘图模式。
mode参数
我们来看看drawElements()和draw Arrays()方法的语法:
void drawElements(enum mode, long count, enum type, long offset);
void drawArrays(enum mode, int first, long count);
你会发现,两种方法都接受mode参数,使用此参数,程序员可以在WebGL中选择绘图模式。
下表列出了WebGL提供的绘图模式。
No | 模式 | 说明 |
1 | gl.POINTS | 绘制一系列的点 |
2 | gl.LINES | 绘制一系列未连接的线段(独立的线条) |
3 | gl.LINE_STRIP | 绘制一系列连接的线段 |
4 | gl.LINE_LOOP | 绘制一系列连接的线段。它还连接第一个和最后一个顶点来形成一个循环. |
5 | gl.TRIANGLES | 绘制一系列独立的三角形. |
6 | gl.TRIANGLE_STRIP | 绘制一系列三角形连接. |
7 | gl.TRIANGLE_FAN | 绘制一系列以扇形方式共享第一个顶点的连接的三角形. |
实例:绘制三条平行线
<!doctype html> <html> <body> <canvas width = "300" height = "300" id = "my_Canvas"></canvas> <script> /*======= Creating a canvas =========*/ var canvas = document.getElementById('my_Canvas'); var gl = canvas.getContext('experimental-webgl'); /*======= Defining and storing the geometry ======*/ var vertices = [ -0.7,-0.1,0, -0.3,0.6,0, -0.3,-0.3,0, 0.2,0.6,0, 0.3,-0.3,0, 0.7,0.6,0 ] // Create an empty buffer object var vertex_buffer = gl.createBuffer(); // Bind appropriate array buffer to it gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); // Pass the vertex data to the buffer gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // Unbind the buffer gl.bindBuffer(gl.ARRAY_BUFFER, null); /*=================== Shaders ====================*/ // Vertex shader source code var vertCode = 'attribute vec3 coordinates;' + 'void main(void) {' + ' gl_Position = vec4(coordinates, 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 fragmentt shader gl.compileShader(fragShader); // Create a shader program object to store // the 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 the programs gl.linkProgram(shaderProgram); // Use the combined shader program object gl.useProgram(shaderProgram); /*======= Associating shaders 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, 3, gl.FLOAT, false, 0, 0); // Enable the attribute gl.enableVertexAttribArray(coord); /*============ Drawing the 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 and depth buffer gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Set the view port gl.viewport(0,0,canvas.width,canvas.height); // Draw the triangle gl.drawArrays(gl.LINES, 0, 6); // POINTS, LINE_STRIP, LINE_LOOP, LINES, // TRIANGLE_STRIP,TRIANGLE_FAN, TRIANGLES </script> </body> </html>
这将产生如下输出结果:
在上面的程序中,如果您用其他的绘图模式(LINE_STRIP,LINE_LOOP,TRIANGLE_STRIP,TRIANGLE_FAN,TRIANGLES)替换drawarrays()模式,它将每次产生不同的形状,请自行替换并测试,