Vertax Shader
precision mediump float;
attribute vec3 vertPosition;
attribute vec3 vertColor;
uniform mat4 mWorld;
uniform mat4 mView; //camera
uniform mat4 mProj;
varying vec3 fragColor;
void main()
{
fragColor = vertColor;
gl_Position = mProj * mView * mWorld * vec4(vertPosition, 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;
var program;
var canvas;
function runWebGLApp() {
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");
}
gl.clearColor(0.75, 0.85, 0.8, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.frontFace(gl.CCW);
gl.cullFace(gl.BACK);
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
//program
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,Z R,G,B
0.0, 0.5, 0.0, 1.0,1.0,0.0,
-0.5, -0.5, 0.0, 0.7,0.0,1.0,
0.5, -0.5, 0.0, 0.1,1.0,0.6
];
var boxVertices =
[ // X, Y, Z R, G, B
// Top
-1.0, 1.0, -1.0, 0.5, 0.5, 0.5,
-1.0, 1.0, 1.0, 0.5, 0.5, 0.5,
1.0, 1.0, 1.0, 0.5, 0.5, 0.5,
1.0, 1.0, -1.0, 0.5, 0.5, 0.5,
// Left
-1.0, 1.0, 1.0, 0.75, 0.25, 0.5,
-1.0, -1.0, 1.0, 0.75, 0.25, 0.5,
-1.0, -1.0, -1.0, 0.75, 0.25, 0.5,
-1.0, 1.0, -1.0, 0.75, 0.25, 0.5,
// Right
1.0, 1.0, 1.0, 0.25, 0.25, 0.75,
1.0, -1.0, 1.0, 0.25, 0.25, 0.75,
1.0, -1.0, -1.0, 0.25, 0.25, 0.75,
1.0, 1.0, -1.0, 0.25, 0.25, 0.75,
// Front
1.0, 1.0, 1.0, 1.0, 0.0, 0.15,
1.0, -1.0, 1.0, 1.0, 0.0, 0.15,
-1.0, -1.0, 1.0, 1.0, 0.0, 0.15,
-1.0, 1.0, 1.0, 1.0, 0.0, 0.15,
// Back
1.0, 1.0, -1.0, 0.0, 1.0, 0.15,
1.0, -1.0, -1.0, 0.0, 1.0, 0.15,
-1.0, -1.0, -1.0, 0.0, 1.0, 0.15,
-1.0, 1.0, -1.0, 0.0, 1.0, 0.15,
// Bottom
-1.0, -1.0, -1.0, 0.5, 0.5, 1.0,
-1.0, -1.0, 1.0, 0.5, 0.5, 1.0,
1.0, -1.0, 1.0, 0.5, 0.5, 1.0,
1.0, -1.0, -1.0, 0.5, 0.5, 1.0,
];
var boxIndices =
[
// Top
0, 1, 2,
0, 2, 3,
// Left
5, 4, 6,
6, 4, 7,
// Right
8, 9, 10,
8, 10, 11,
// Front
13, 12, 14,
15, 14, 12,
// Back
16, 17, 18,
16, 18, 19,
// Bottom
21, 20, 22,
22, 20, 23
];
var triBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triBuffer); //gl에 버퍼를 바인딩
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(boxVertices), gl.STATIC_DRAW); //버퍼에 버텍스 연결.
// gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triagleVertex), gl.STATIC_DRAW); //버퍼에 버텍스 연결.
//index버퍼
var boxIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, boxIndexBuffer); //gl에 버퍼를 바인딩
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(boxIndices), 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,
3, //Number of elements per attribute
gl.FLOAT, //type of elements
gl.FALSE,
6 * 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,
6 * Float32Array.BYTES_PER_ELEMENT, //size of an individual vertex 2*4
3 * Float32Array.BYTES_PER_ELEMENT //offset from the beginning of a single vertext to this attribute
);
gl.enableVertexAttribArray(positionLocation);
gl.enableVertexAttribArray(positionColor);
//==============================
//uniform - useProgram이 선언되야 한다.
var mWorldLocation = gl.getUniformLocation(program, 'mWorld');
var mViewLocation = gl.getUniformLocation(program, 'mView');
var mProjLocation = gl.getUniformLocation(program, 'mProj');
var worldMatrix = new Float32Array(16);
var viewMatrix = new Float32Array(16);
var projMatrix = new Float32Array(16);
glMatrix.mat4.identity(worldMatrix);
glMatrix.mat4.lookAt(viewMatrix,[0,0,-5],[0,0,0],[0,1,0]); //카메라. eye, center, up
glMatrix.mat4.perspective(projMatrix, 45 * Math.PI / 180 ,canvas.width/canvas.height, 0.1, 1000.0); //projection fovy 45도 라디안, aspect:뷰포트 w/h 임 0.333, near:플러스트럼 영역 ,far 플러스트럼 영역
gl.uniformMatrix4fv(mWorldLocation, gl.FALSE, worldMatrix); //must be FALSE,
gl.uniformMatrix4fv(mViewLocation, gl.FALSE, viewMatrix); //must be FALSE,
gl.uniformMatrix4fv(mProjLocation, gl.FALSE, projMatrix); //must be FALSE,
var xRotateMat4= new Float32Array(16);
var yRotateMat4= new Float32Array(16);
//rotation 메트릭스.
var identityMatrix = new Float32Array(16);
glMatrix.mat4.identity(identityMatrix);
var loop = function(){
//회전을 월드 메트릭스에 적용.
var angle = performance.now() / 1000/ 6 * 2 * Math.PI; //12초동안 한바퀴 회전
glMatrix.mat4.rotate(yRotateMat4,identityMatrix, angle, [0,1,0]); //y축
glMatrix.mat4.rotate(xRotateMat4,identityMatrix, angle/4, [1,0,0]); //x축
glMatrix.mat4.mul(worldMatrix,xRotateMat4,yRotateMat4);
gl.uniformMatrix4fv(mWorldLocation, gl.FALSE, worldMatrix);
gl.clearColor(0.75, 0.85, 0.8, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawElements(gl.TRIANGLES, boxIndices.length, gl.UNSIGNED_SHORT, 0); //처음엔 없어서 에러..
// gl.drawArrays(gl.TRIANGLES, 0, 3); //처음엔 없어서 에러..
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
}