Triagle

Vertax Shader

	precision mediump float;

	attribute vec2 vertPosition;
	attribute vec3 vertColor;
	
	varying vec3 fragColor;
	
	void main()
	{
		fragColor = vertColor;
		gl_Position = vec4(vertPosition, 0.0, 1.0);
	}

Fragment Shader

precision mediump float;

varying vec3 fragColor;

void main(){
	gl_FragColor = vec4(fragColor, 1.0);
	//gl_FragColor = vec4(1.0,0.0,0.0, 1.0);
}

Script

var gl = null;
function runWebGLApp() {
	var canvas = document.getElementById("canvas-element-id");
	gl = canvas.getContext('webgl');
	
	if(!gl){
		console.log("WebGL not supported falling back on experimental-webgl");
		gl = canvas.getContext('experimental-webgl');
	}
	if(!gl){
		alert("Your browser does not support WebGL");
	}
	
	var fragmentShader          = getShader(gl, "shader-fs");
    var vertexShader            = getShader(gl, "shader-vs");
    
    //program
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
		console.log('There was a problem with the PROGRAM :\n\n'+ gl.getProgramInfoLog(program));
		gl.deleteProgram(program);
    }
    gl.validateProgram(program);
    if (!gl.getProgramParameter(program, gl.VALIDATE_STATUS)) {
   	 console.error('Error validating program!', gl.getProgramInfoLog(program));
    }
    gl.useProgram(program);
    
    
    //buffer  
    var triagleVertex = [	//X,Y		R,G,B
    	0.0, 0.5,	1.0,1.0,0.0,
    	-0.5, -0.5,	0.7,0.0,1.0,
    	0.5, -0.5,	0.1,1.0,0.6
    ];
    
    var triBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triBuffer);		//gl에 버퍼를 바인딩
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triagleVertex), gl.STATIC_DRAW);	//버퍼에 버텍스 연결.
    
    
    var positionLocation = gl.getAttribLocation(program,'vertPosition');
    var positionColor = gl.getAttribLocation(program,'vertColor');
//     gl.vertexAttribPointer(positionLocation,
//     		2, //Number of elements per attribute
//     		gl.FLOAT,	//type of elements
//     		gl.FALSE,
//     		2 * Float32Array.BYTES_PER_ELEMENT,	//size of an individual vertex 2*4
//     		0	//offset from the beginning of a single vertext to this attribute
//     		);
    gl.vertexAttribPointer(positionLocation,
    		2, //Number of elements per attribute
    		gl.FLOAT,	//type of elements
    		gl.FALSE,
    		5 * Float32Array.BYTES_PER_ELEMENT,	//size of an individual vertex 2*4
    		0	//offset from the beginning of a single vertext to this attribute
    		);
    gl.vertexAttribPointer(positionColor,
    		3, //Number of elements per attribute
    		gl.FLOAT,	//type of elements
    		gl.FALSE,
    		5 * Float32Array.BYTES_PER_ELEMENT,	//size of an individual vertex 2*4
    		2 * Float32Array.BYTES_PER_ELEMENT	//offset from the beginning of a single vertext to this attribute
    		);
    gl.enableVertexAttribArray(positionLocation);
    gl.enableVertexAttribArray(positionColor);
    
	draw();
}


function draw(){	//as fast as possible
	gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
	gl.clearColor(0.75, 0.85, 0.8, 1.0);
	gl.drawArrays(gl.TRIANGLES, 0, 3);	//처음엔 없어서 에러..
	requestAnimationFrame(draw);
}



var bspline = function(pts, rec) {		//rec 3은 중간에 3개 생김.
	if (rec == 0) {
		return pts;
	}
	var items = pts.length / 3.0
	var pts2 = [pts[0], pts[1], pts[2]];
	for (var i = 0; i < items - 1; i++) {
		var j = 3 * i;
		pts2[3 + 2 * j + 0] = 3 / 4 * pts[j + 0] + 1 / 4 * pts[j + 3];
		pts2[3 + 2 * j + 1] = 3 / 4 * pts[j + 1] + 1 / 4 * pts[j + 4];
		pts2[3 + 2 * j + 2] = 3 / 4 * pts[j + 2] + 1 / 4 * pts[j + 5];

		pts2[3 + 2 * j + 3] = 1 / 4 * pts[j + 0] + 3 / 4 * pts[j + 3];
		pts2[3 + 2 * j + 4] = 1 / 4 * pts[j + 1] + 3 / 4 * pts[j + 4];
		pts2[3 + 2 * j + 5] = 1 / 4 * pts[j + 2] + 3 / 4 * pts[j + 5];
	}
	pts2.push(pts[pts.length - 3], pts[pts.length - 2], pts[pts.length - 1]);

	return chaikin(pts2, rec - 1);
};