WebGl编程初步——绘制简单三角形

var points = [];
var NumTimesToSubdivide = 5;
/* initial triangle */
var vertices = [
vec2( -1, -1 ),
vec2( 0, 1 ),
vec2( 1, -1 )
];
divideTriangle( vertices[0],vertices[1],
vertices[2], NumTimesToSubdivide);

绘制三角形的函数

/* display one triangle */
function triangle( a, b, c ){
points.push( a, b, c );
}

对三角形进行细分

function divideTriangle( a, b, c, count ){
// check for end of recursion
if ( count === 0 ) {
triangle( a, b, c );
}
else {
//bisect the sides
var ab = mix( a, b, 0.5 );
var ac = mix( a, c, 0.5 );
var bc = mix( b, c, 0.5 );
--count; 
// three new triangles
divideTriangle( a, ab, ac, count-1 );
divideTriangle( c, ac, bc, count-1 );
divideTriangle( b, bc, ab, count-1 );
} }

init( )函数

var program = initShaders( gl, "vertexshader", "fragment-shader" );
gl.useProgram( program );
var bufferId = gl.createBuffer(); 
gl.bindBuffer( gl.ARRAY_BUFFER, bufferId ) 
gl.bufferData( gl.ARRAY_BUFFER, 
flatten(points), gl.STATIC_DRAW );
var vPosition = gl.getAttribLocation( 
program, "vPosition" );
gl.vertexAttribPointer( vPosition, 2, 
gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );
render();

绘制函数

function render(){
gl.clear( gl.COLOR_BUFFER_BIT );
gl.drawArrays( gl.TRIANGLES, 0, points.length 
);}

若要把三角形变成四面体，将程序从二维拓展到三维，顶点集合可以进行如下修改

var vertices = [
vec3( 0.0000, 0.0000, -1.0000 ), vec3( 
0.0000, 0.9428, 0.3333 ), vec3( -0.8165, -
0.4714, 0.3333 ), vec3( 0.8165, -0.4714, 
0.3333 ) 
];