Skip to content
Snippets Groups Projects
Commit 9c939b9c authored by jjungyeun's avatar jjungyeun
Browse files

trace 남기기

parent de0422f0
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Final_Project/final_project.html
+ 2
− 2
View file @ 9c939b9c
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<body onload="main()"> <body onload="main()">
<H2> WebGL - Trace of Cube </H2> <H2> WebGL - Trace of Cube </H2>
Example - Trace of rotating Cube Example - Trace of rotating Cube
<br> <br><br>
<canvas id="helloapicanvas" style="border: none;" width="500" height="500"></canvas> <canvas id="helloapicanvas" style="border: none;" width="500" height="500"></canvas>
<br> <br>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<br> <br>
<button onclick="animRotate()">Animation Rotate + 0.01</button> <button onclick="animRotate()">Animation Rotate + 0.01</button>
<button onclick="animPause()">Animation Pause</button> <button onclick="animPause()">Animation Pause</button>
<button onclick="rotateMoonFaster()">Rotate 8 Moons Faster</button> <br><br>
<table border=1> <table border=1>
<tr > <tr >
<td id="matrix0"> <td id="matrix4"> <td id="matrix8"> <td id="matrix12"> <td id="matrix0"> <td id="matrix4"> <td id="matrix8"> <td id="matrix12">
......
Final_Project/final_project.js
+ 160
− 169
View file @ 9c939b9c
...@@ -34,63 +34,125 @@ function initialiseGL(canvas) { ...@@ -34,63 +34,125 @@ function initialiseGL(canvas) {
var shaderProgram; var shaderProgram;
function initialiseBuffer() { function vertexData(color_a, mode){
var vertex = [];
var vertexData = [ if(mode == "color"){
-0.5, 0.5, 0.5, 1.0, 1.0, 1.0, 0.5, 0.0, 1.0,//3 vertex = [
0.5, 0.5, 0.5, 1.0, 1.0, 1.0, 0.5, 1.0, 1.0,//1 -0.5, 0.5, 0.5, 1.0, 1.0, 0.7, color_a, 0.0, 1.0,//3
0.5, 0.5, -0.5, 1.0, 1.0, 1.0, 0.5, 1.0, 1.0,//2 0.5, 0.5, 0.5, 1.0, 1.0, 0.7, color_a, 1.0, 1.0,//1
0.5, 0.5, -0.5, 1.0, 1.0, 0.7, color_a, 1.0, 1.0,//2
-0.5, 0.5, 0.5, 1.0, 1.0, 1.0, 0.5, 0.0, 1.0,//3
0.5, 0.5, -0.5, 1.0, 1.0, 1.0, 0.5, 1.0, 1.0,//2 -0.5, 0.5, 0.5, 1.0, 1.0, 0.7, color_a, 0.0, 1.0,//3
-0.5, 0.5, -0.5, 1.0, 1.0, 1.0, 0.5, 0.0, 1.0,//4 0.5, 0.5, -0.5, 1.0, 1.0, 0.7, color_a, 1.0, 1.0,//2
-0.5, 0.5, -0.5, 1.0, 1.0, 0.7, color_a, 0.0, 1.0,//4
0.5, 0.5, -0.5, 0.0, 0.0, 0.0, 0.5, 1.0, 1.0,//2
0.5, -0.5, -0.5, 0.0, 0.0, 0.0, 0.5, 1.0, 0.0,//6 0.5, 0.5, -0.5, 0.0, 0.5, 0.0, color_a, 1.0, 1.0,//2
-0.5,-0.5,-0.5, 0.0, 0.0, 0.0, 0.5, 0.0, 0.0,//8 0.5, -0.5, -0.5, 0.0, 0.5, 0.0, color_a, 1.0, 0.0,//6
-0.5,-0.5,-0.5, 0.0, 0.5, 0.0, color_a, 0.0, 0.0,//8
-0.5, 0.5, -0.5, 0.0, 0.0, 0.0, 0.5, 0.0, 1.0,//4
0.5, 0.5, -0.5, 0.0, 0.0, 0.0, 0.5, 1.0, 1.0,//2 -0.5, 0.5, -0.5, 0.0, 0.5, 0.0, color_a, 0.0, 1.0,//4
-0.5,-0.5,-0.5, 0.0, 0.0, 0.0, 0.5, 0.0, 0.0,//8 0.5, 0.5, -0.5, 0.0, 0.5, 0.0, color_a, 1.0, 1.0,//2
-0.5,-0.5,-0.5, 0.0, 0.5, 0.0, color_a, 0.0, 0.0,//8
0.5, -0.5, 0.5, 1.0, 0.5, 0.0, 0.5, 0.0, 1.0,//5
0.5, -0.5, -0.5, 1.0, 0.5, 0.0, 0.5, 0.0, 1.0,//6 0.5, -0.5, 0.5, 1.0, 0.5, 0.0, color_a, 0.0, 1.0,//5
0.5, 0.5, -0.5, 1.0, 0.5, 0.0, 0.5, 1.0, 1.0,//2 0.5, -0.5, -0.5, 1.0, 0.5, 0.0, color_a, 0.0, 1.0,//6
0.5, 0.5, -0.5, 1.0, 0.5, 0.0, color_a, 1.0, 1.0,//2
0.5, -0.5, 0.5, 1.0, 0.5, 0.0, 0.5, 0.0, 1.0,//5
0.5, 0.5, -0.5, 1.0, 0.5, 0.0, 0.5, 1.0, 1.0,//2 0.5, -0.5, 0.5, 1.0, 0.5, 0.0, color_a, 0.0, 1.0,//5
0.5, 0.5, 0.5, 1.0, 0.5, 0.0, 0.5, 1.0, 1.0,//1 0.5, 0.5, -0.5, 1.0, 0.5, 0.0, color_a, 1.0, 1.0,//2
0.5, 0.5, 0.5, 1.0, 0.5, 0.0, color_a, 1.0, 1.0,//1
-0.5, 0.5, -0.5, 1.0, 0.0, 0.0, 0.5, 0.0, 1.0,//4
-0.5,-0.5, -0.5, 1.0, 0.0, 0.0, 0.5, 0.0, 0.0,//8 -0.5, 0.5, -0.5, 1.0, 0.0, 0.0, color_a, 0.0, 1.0,//4
-0.5, -0.5, 0.5, 1.0, 0.0, 0.0, 0.5, 0.0, 0.0,//7 -0.5,-0.5, -0.5, 1.0, 0.0, 0.0, color_a, 0.0, 0.0,//8
-0.5, -0.5, 0.5, 1.0, 0.0, 0.0, color_a, 0.0, 0.0,//7
-0.5, 0.5, 0.5, 1.0, 0.0, 0.0, 0.5, 0.0, 1.0,//3
-0.5, 0.5, -0.5, 1.0, 0.0, 0.0, 0.5, 0.0, 1.0,//4 -0.5, 0.5, 0.5, 1.0, 0.0, 0.0, color_a, 0.0, 1.0,//3
-0.5, -0.5, 0.5, 1.0, 0.0, 0.0, 0.5, 0.0, 0.0,//7 -0.5, 0.5, -0.5, 1.0, 0.0, 0.0, color_a, 0.0, 1.0,//4
-0.5, -0.5, 0.5, 1.0, 0.0, 0.0, color_a, 0.0, 0.0,//7
-0.5, -0.5, 0.5, 0.0, 0.0, 1.0, 0.5, 0.0, 0.0,//7
0.5, -0.5, 0.5, 0.0, 0.0, 1.0, 0.5, 1.0, 0.0,//5 -0.5, -0.5, 0.5, 0.0, 0.0, 1.0, color_a, 0.0, 0.0,//7
0.5, 0.5, 0.5, 0.0, 0.0, 1.0, 0.5, 1.0, 1.0,//1 0.5, -0.5, 0.5, 0.0, 0.0, 1.0, color_a, 1.0, 0.0,//5
0.5, 0.5, 0.5, 0.0, 0.0, 1.0, color_a, 1.0, 1.0,//1
-0.5, -0.5, 0.5, 0.0, 0.0, 1.0, 0.5, 0.0, 0.0,//7
0.5, 0.5, 0.5, 0.0, 0.0, 1.0, 0.5, 1.0, 1.0,//1 -0.5, -0.5, 0.5, 0.0, 0.0, 1.0, color_a, 0.0, 0.0,//7
-0.5, 0.5, 0.5, 0.0, 0.0, 1.0, 0.5, 0.0, 1.0,//3 0.5, 0.5, 0.5, 0.0, 0.0, 1.0, color_a, 1.0, 1.0,//1
-0.5, 0.5, 0.5, 0.0, 0.0, 1.0, color_a, 0.0, 1.0,//3
0.5, -0.5, -0.5, 0.0, 1.0, 0.0, color_a, 1.0, 0.0,//6
0.5, -0.5, 0.5, 0.0, 1.0, 0.0, color_a, 1.0, 0.0,//5
-0.5, -0.5, 0.5, 0.0, 1.0, 0.0, color_a, 0.0, 0.0,//7
-0.5,-0.5, -0.5, 0.0, 1.0, 0.0, color_a, 0.0, 0.0,//8
0.5, -0.5, -0.5, 0.0, 1.0, 0.0, color_a, 1.0, 0.0,//6
-0.5, -0.5, 0.5, 0.0, 1.0, 0.0, color_a, 0.0, 0.0,//7
];
} else{
var color;
if(mode == "white")
color = 1.0;
else if(mode == "gray")
color = 0.4;
vertex = [
-0.5, 0.5, 0.5, color, color, color, color_a, 0.0, 1.0,//3
0.5, 0.5, 0.5, color, color, color, color_a, 1.0, 1.0,//1
0.5, 0.5, -0.5, color, color, color, color_a, 1.0, 1.0,//2
-0.5, 0.5, 0.5, color, color, color, color_a, 0.0, 1.0,//3
0.5, 0.5, -0.5, color, color, color, color_a, 1.0, 1.0,//2
-0.5, 0.5, -0.5, color, color, color, color_a, 0.0, 1.0,//4
0.5, 0.5, -0.5, color, color, color, color_a, 1.0, 1.0,//2
0.5, -0.5, -0.5, color, color, color, color_a, 1.0, 0.0,//6
-0.5,-0.5,-0.5, color, color, color, color_a, 0.0, 0.0,//8
-0.5, 0.5, -0.5, color, color, color, color_a, 0.0, 1.0,//4
0.5, 0.5, -0.5, color, color, color, color_a, 1.0, 1.0,//2
-0.5,-0.5,-0.5, color, color, color, color_a, 0.0, 0.0,//8
0.5, -0.5, 0.5, color, color, color, color_a, 0.0, 1.0,//5
0.5, -0.5, -0.5, color, color, color, color_a, 0.0, 1.0,//6
0.5, 0.5, -0.5, color, color, color, color_a, 1.0, 1.0,//2
0.5, -0.5, 0.5, color, color, color, color_a, 0.0, 1.0,//5
0.5, 0.5, -0.5, color, color, color, color_a, 1.0, 1.0,//2
0.5, 0.5, 0.5, color, color, color, color_a, 1.0, 1.0,//1
-0.5, 0.5, -0.5, color, color, color, color_a, 0.0, 1.0,//4
-0.5,-0.5, -0.5, color, color, color, color_a, 0.0, 0.0,//8
-0.5, -0.5, 0.5, color, color, color, color_a, 0.0, 0.0,//7
-0.5, 0.5, 0.5, color, color, color, color_a, 0.0, 1.0,//3
-0.5, 0.5, -0.5, color, color, color, color_a, 0.0, 1.0,//4
-0.5, -0.5, 0.5, color, color, color, color_a, 0.0, 0.0,//7
-0.5, -0.5, 0.5, color, color, color, color_a, 0.0, 0.0,//7
0.5, -0.5, 0.5, color, color, color, color_a, 1.0, 0.0,//5
0.5, 0.5, 0.5, color, color, color, color_a, 1.0, 1.0,//1
-0.5, -0.5, 0.5, color, color, color, color_a, 0.0, 0.0,//7
0.5, 0.5, 0.5, color, color, color, color_a, 1.0, 1.0,//1
-0.5, 0.5, 0.5, color, color, color, color_a, 0.0, 1.0,//3
0.5, -0.5, -0.5, color, color, color, color_a, 1.0, 0.0,//6
0.5, -0.5, 0.5, color, color, color, color_a, 1.0, 0.0,//5
-0.5, -0.5, 0.5, color, color, color, color_a, 0.0, 0.0,//7
-0.5,-0.5, -0.5, color, color, color, color_a, 0.0, 0.0,//8
0.5, -0.5, -0.5, color, color, color, color_a, 1.0, 0.0,//6
-0.5, -0.5, 0.5, color, color, color, color_a, 0.0, 0.0,//7
];
}
0.5, -0.5, -0.5, 0.0, 1.0, 0.0, 0.5, 1.0, 0.0,//6 return vertex;
0.5, -0.5, 0.5, 0.0, 1.0, 0.0, 0.5, 1.0, 0.0,//5 }
-0.5, -0.5, 0.5, 0.0, 1.0, 0.0, 0.5, 0.0, 0.0,//7
-0.5,-0.5, -0.5, 0.0, 1.0, 0.0, 0.5, 0.0, 0.0,//8
0.5, -0.5, -0.5, 0.0, 1.0, 0.0, 0.5, 1.0, 0.0,//6
-0.5, -0.5, 0.5, 0.0, 1.0, 0.0, 0.5, 0.0, 0.0,//7
];
function initialiseBuffer() {
// Generate a buffer object // Generate a buffer object
gl.vertexBuffer = gl.createBuffer(); gl.vertexBuffer = gl.createBuffer();
// Bind buffer as a vertex buffer so we can fill it with data // Bind buffer as a vertex buffer so we can fill it with data
gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData(1.0, "color")), gl.STATIC_DRAW);
return testGLError("initialiseBuffers"); return testGLError("initialiseBuffers");
} }
...@@ -145,7 +207,7 @@ function initialiseShaders() { ...@@ -145,7 +207,7 @@ function initialiseShaders() {
gl.attachShader(gl.programObject, gl.fragShader); gl.attachShader(gl.programObject, gl.fragShader);
gl.attachShader(gl.programObject, gl.vertexShader); gl.attachShader(gl.programObject, gl.vertexShader);
// Bind the custom vertex attribute "myVertex" to location 0 // Bind the custom vertex attribute
gl.bindAttribLocation(gl.programObject, 0, "myVertex"); gl.bindAttribLocation(gl.programObject, 0, "myVertex");
gl.bindAttribLocation(gl.programObject, 1, "myColor"); gl.bindAttribLocation(gl.programObject, 1, "myColor");
gl.bindAttribLocation(gl.programObject, 2, "myUV"); gl.bindAttribLocation(gl.programObject, 2, "myUV");
...@@ -173,14 +235,13 @@ function get_projection(angle, a, zMin, zMax) { ...@@ -173,14 +235,13 @@ function get_projection(angle, a, zMin, zMax) {
0, 0, (-2*zMax*zMin)/(zMax-zMin), 0 ]; 0, 0, (-2*zMax*zMin)/(zMax-zMin), 0 ];
} }
var proj_matrix = get_projection(70, 1.0, 0, 5.0); var proj_matrix = get_projection(30, 1.0, 0, 5.0);
var mov_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; var mov_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];
var view_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; var view_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];
view_matrix[14] = view_matrix[14]-2;//zoom view_matrix[14] = view_matrix[14]-2;//zoom
rotValue = 0.0; rotValue = 0.0;
rotRatio = 1.0;
animRotValue = 0.0; animRotValue = 0.0;
transX = 0.0; transY = 0.0; transZ = 0.0; transX = 0.0; transY = 0.0; transZ = 0.0;
frames = 1; frames = 1;
...@@ -192,7 +253,6 @@ function animRotate() ...@@ -192,7 +253,6 @@ function animRotate()
function animPause(){ function animPause(){
animRotValue = 0.0; animRotValue = 0.0;
rotRatio = 1.0;
} }
function trXinc() // translate X increase function trXinc() // translate X increase
...@@ -213,27 +273,28 @@ function trZinc() // translate Z increase ...@@ -213,27 +273,28 @@ function trZinc() // translate Z increase
document.getElementById("webTrZ").innerHTML = "transZ : " + transZ.toFixed(4); document.getElementById("webTrZ").innerHTML = "transZ : " + transZ.toFixed(4);
} }
function rotateMoonFaster(){ var trace = [];
rotRatio += 0.1; var traceNum = 30;
var traceFreq = 3;
var trace_alpha = 0.05;
function addTrace(mat){
if(trace.length>=traceNum){
trace = trace.slice(1,traceNum);
}
trace.push(mat);
} }
function renderScene() { function renderScene() {
// console.log("Frame "+frames+"\n"); // console.log("Frame "+frames+"\n");
frames += 1 ; frames += 1 ;
rotAxis = [1,1,0]; rotAxis = [0,-1,0]; // 결정할 수 있게 만들기 (check box로 선택)
var locPmatrix = gl.getUniformLocation(gl.programObject, "Pmatrix"); var locPmatrix = gl.getUniformLocation(gl.programObject, "Pmatrix");
var locVmatrix = gl.getUniformLocation(gl.programObject, "Vmatrix"); var locVmatrix = gl.getUniformLocation(gl.programObject, "Vmatrix");
var locMmatrix = gl.getUniformLocation(gl.programObject, "Mmatrix"); var locMmatrix = gl.getUniformLocation(gl.programObject, "Mmatrix");
// // postscript처럼 순서 거꾸로 실행됨
// // translate -> rotate
// idMatrix(mov_matrix);
// rotateArbAxis(mov_matrix, rotValue, rotAxis);
// rotValue += animRotValue;
// translate(mov_matrix, transX, 0.0, 0.0);
// uniform으로 GPU한테 던져줌 // uniform으로 GPU한테 던져줌
gl.uniformMatrix4fv(locPmatrix, false, proj_matrix); gl.uniformMatrix4fv(locPmatrix, false, proj_matrix);
gl.uniformMatrix4fv(locVmatrix, false, view_matrix); gl.uniformMatrix4fv(locVmatrix, false, view_matrix);
...@@ -242,126 +303,56 @@ function renderScene() { ...@@ -242,126 +303,56 @@ function renderScene() {
if (!testGLError("gl.uniformMatrix4fv")) { if (!testGLError("gl.uniformMatrix4fv")) {
return false; return false;
} }
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.enable(gl.CULL_FACE); // 이거(Culling) 켜면 뒷면 안그림
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.blendEquation(gl.FUNC_ADD);
gl.clearColor(0.6, 0.8, 1.0, 1.0); // 배경색 설정
gl.clearDepth(1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.enableVertexAttribArray(0); gl.enableVertexAttribArray(0); // 좌표
gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 36, 0); gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 36, 0);
gl.enableVertexAttribArray(1); gl.enableVertexAttribArray(1); // color
gl.vertexAttribPointer(1, 4, gl.FLOAT, gl.FALSE, 36, 12); gl.vertexAttribPointer(1, 4, gl.FLOAT, gl.FALSE, 36, 12);
gl.enableVertexAttribArray(2); gl.enableVertexAttribArray(2); // texture
gl.vertexAttribPointer(2, 2, gl.FLOAT, gl.FALSE, 36, 28); gl.vertexAttribPointer(2, 2, gl.FLOAT, gl.FALSE, 36, 28);
if (!testGLError("gl.vertexAttribPointer")) { if (!testGLError("gl.vertexAttribPointer")) {
return false; return false;
} }
// gl.enable(gl.DEPTH_TEST);
// gl.depthFunc(gl.LEQUAL);
// gl.enable(gl.CULL_FACE); // 이거(Culling) 켜면 뒷면 안그림
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
// gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA : source가 dest 위로(source over destination)
// gl.ONE_MINUS_DST_ALPHA, gl.DST_ALPHA : dest가 source 위로(destination over source)
gl.blendEquation(gl.FUNC_ADD);
gl.clearColor(0.6, 0.8, 1.0, 1.0); // 배경색 설정
gl.clearDepth(1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Earth // Earth
glMatrix.mat4.identity(mov_matrix); glMatrix.mat4.identity(mov_matrix);
// var ddd = vec3(transX, transY, transZ); glMatrix.mat4.rotate(mov_matrix,mov_matrix,rotValue, rotAxis);
// mov_matrix = fromTranslation(mov_matrix,ddd);
glMatrix.mat4.translate(mov_matrix, mov_matrix, [transX,transY,transZ]); glMatrix.mat4.translate(mov_matrix, mov_matrix, [transX,transY,transZ]);
glMatrix.mat4.rotate(mov_matrix,mov_matrix,rotValue, rotAxis)
rotValue += animRotValue; rotValue += animRotValue;
gl.uniformMatrix4fv(locMmatrix, false, mov_matrix); gl.uniformMatrix4fv(locMmatrix, false, mov_matrix);
gl.drawArrays(gl.TRIANGLES, 0, 36);
// gsave
// mov_matrix의 주소를 복사하는 것이 아닌 행렬을 복사
var mov_matrix_child = mov_matrix.slice(); var mov_matrix_child = mov_matrix.slice();
addTrace(mov_matrix_child);
moonRotValue = rotValue * rotRatio; // draw trace of cube
// console.log("moonRotValue: "+moonRotValue); color_a = 1.0;
for (var i = trace.length -1; i>=0;i-=traceFreq){
// 1st moon color_a -= trace_alpha;
glMatrix.mat4.translate(mov_matrix, mov_matrix, [0.75,0.75,0.75]); gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
glMatrix.mat4.scale(mov_matrix, mov_matrix, [0.25, 0.25, 0.25]); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData(color_a, "gray")), gl.STATIC_DRAW);
glMatrix.mat4.rotateY(mov_matrix,mov_matrix, rotValue); gl.uniformMatrix4fv(locMmatrix, false, trace[i].slice());
gl.uniformMatrix4fv(locMmatrix, false, mov_matrix); if (color_a > 0.0)
gl.drawArrays(gl.TRIANGLES, 0, 36);
// grestore
mov_matrix = mov_matrix_child.slice();
// 2nd moon
glMatrix.mat4.translate(mov_matrix, mov_matrix, [-0.75,-0.75,-0.75]);
glMatrix.mat4.scale(mov_matrix, mov_matrix, [0.25, 0.25, 0.25]);
glMatrix.mat4.rotateX(mov_matrix,mov_matrix, moonRotValue*2);
gl.uniformMatrix4fv(locMmatrix, false, mov_matrix);
gl.drawArrays(gl.TRIANGLES, 0, 36);
// grestore
mov_matrix = mov_matrix_child.slice();
// 3rd moon
glMatrix.mat4.translate(mov_matrix, mov_matrix, [0.75,-0.75,-0.75]);
glMatrix.mat4.scale(mov_matrix, mov_matrix, [0.25, 0.25, 0.25]);
glMatrix.mat4.rotateY(mov_matrix,mov_matrix, moonRotValue*3);
gl.uniformMatrix4fv(locMmatrix, false, mov_matrix);
gl.drawArrays(gl.TRIANGLES, 0, 36);
// grestore
mov_matrix = mov_matrix_child.slice();
// 4th moon
glMatrix.mat4.translate(mov_matrix, mov_matrix, [-0.75,0.75,-0.75]);
glMatrix.mat4.scale(mov_matrix, mov_matrix, [0.25, 0.25, 0.25]);
glMatrix.mat4.rotateZ(mov_matrix,mov_matrix, moonRotValue*4);
gl.uniformMatrix4fv(locMmatrix, false, mov_matrix);
gl.drawArrays(gl.TRIANGLES, 0, 36);
// grestore
mov_matrix = mov_matrix_child.slice();
// 5th moon
glMatrix.mat4.translate(mov_matrix, mov_matrix, [-0.75,-0.75,0.75]);
glMatrix.mat4.scale(mov_matrix, mov_matrix, [0.25, 0.25, 0.25]);
glMatrix.mat4.rotateX(mov_matrix,mov_matrix, moonRotValue*5);
gl.uniformMatrix4fv(locMmatrix, false, mov_matrix);
gl.drawArrays(gl.TRIANGLES, 0, 36);
// grestore
mov_matrix = mov_matrix_child.slice();
// 6th moon
glMatrix.mat4.translate(mov_matrix, mov_matrix, [0.75,0.75,-0.75]);
glMatrix.mat4.scale(mov_matrix, mov_matrix, [0.25, 0.25, 0.25]);
glMatrix.mat4.rotateZ(mov_matrix,mov_matrix, moonRotValue*6);
gl.uniformMatrix4fv(locMmatrix, false, mov_matrix);
gl.drawArrays(gl.TRIANGLES, 0, 36);
// grestore
mov_matrix = mov_matrix_child.slice();
// 7th moon
glMatrix.mat4.translate(mov_matrix, mov_matrix, [0.75,-0.75,0.75]);
glMatrix.mat4.scale(mov_matrix, mov_matrix, [0.25, 0.25, 0.25]);
glMatrix.mat4.rotateY(mov_matrix,mov_matrix, moonRotValue*7);
gl.uniformMatrix4fv(locMmatrix, false, mov_matrix);
gl.drawArrays(gl.TRIANGLES, 0, 36); gl.drawArrays(gl.TRIANGLES, 0, 36);
}
// grestore // original cube
mov_matrix = mov_matrix_child.slice(); gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData(1.0, "color")), gl.STATIC_DRAW);
// 8th moon gl.uniformMatrix4fv(locMmatrix, false, trace[trace.length -1].slice());
glMatrix.mat4.translate(mov_matrix, mov_matrix, [-0.75,0.75,0.75]);
glMatrix.mat4.scale(mov_matrix, mov_matrix, [0.25, 0.25, 0.25]);
glMatrix.mat4.rotateX(mov_matrix,mov_matrix, moonRotValue*8);
gl.uniformMatrix4fv(locMmatrix, false, mov_matrix);
gl.drawArrays(gl.TRIANGLES, 0, 36); gl.drawArrays(gl.TRIANGLES, 0, 36);
// 회전 수치 표
document.getElementById("matrix0").innerHTML = mov_matrix[0].toFixed(4); document.getElementById("matrix0").innerHTML = mov_matrix[0].toFixed(4);
document.getElementById("matrix1").innerHTML = mov_matrix[1].toFixed(4); document.getElementById("matrix1").innerHTML = mov_matrix[1].toFixed(4);
document.getElementById("matrix2").innerHTML = mov_matrix[2].toFixed(4); document.getElementById("matrix2").innerHTML = mov_matrix[2].toFixed(4);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr