From 9c939b9cd34824321c3c84bbe9f4575b7c1eacdc Mon Sep 17 00:00:00 2001
From: jjungyeun <wjddusdl11@ajou.ac.kr>
Date: Mon, 17 Jun 2019 15:20:40 +0900
Subject: [PATCH] =?UTF-8?q?trace=20=EB=82=A8=EA=B8=B0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
Final_Project/final_project.html | 4 +-
Final_Project/final_project.js | 329 +++++++++++++++----------------
2 files changed, 162 insertions(+), 171 deletions(-)
diff --git a/Final_Project/final_project.html b/Final_Project/final_project.html
index 3c0afd2..d44a565 100644
--- a/Final_Project/final_project.html
+++ b/Final_Project/final_project.html
@@ -14,7 +14,7 @@
<body onload="main()">
<H2> WebGL - Trace of Cube </H2>
Example - Trace of rotating Cube
- <br>
+ <br><br>
<canvas id="helloapicanvas" style="border: none;" width="500" height="500"></canvas>
<br>
@@ -24,7 +24,7 @@
<br>
<button onclick="animRotate()">Animation Rotate + 0.01</button>
<button onclick="animPause()">Animation Pause</button>
- <button onclick="rotateMoonFaster()">Rotate 8 Moons Faster</button>
+ <br><br>
<table border=1>
<tr >
<td id="matrix0"> <td id="matrix4"> <td id="matrix8"> <td id="matrix12">
diff --git a/Final_Project/final_project.js b/Final_Project/final_project.js
index b8b4a79..110fca2 100644
--- a/Final_Project/final_project.js
+++ b/Final_Project/final_project.js
@@ -34,63 +34,125 @@ function initialiseGL(canvas) {
var shaderProgram;
+function vertexData(color_a, mode){
+ var vertex = [];
+ if(mode == "color"){
+ vertex = [
+ -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, 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, 0.7, color_a, 0.0, 1.0,//3
+ 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.5, 0.0, color_a, 1.0, 1.0,//2
+ 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.5, 0.0, color_a, 0.0, 1.0,//4
+ 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, color_a, 0.0, 1.0,//5
+ 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, color_a, 0.0, 1.0,//5
+ 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, 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,//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, color_a, 0.0, 1.0,//3
+ -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, color_a, 0.0, 0.0,//7
+ 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, color_a, 0.0, 0.0,//7
+ 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
+ ];
+ }
+
+ return vertex;
+}
+
+
function initialiseBuffer() {
-
- var vertexData = [
- -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,//1
- 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, 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, 1.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.0, 0.0, 0.5, 1.0, 0.0,//6
- -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.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.0, 0.0, 0.5, 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, 0.5, 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, 0.5, 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, 0.5, 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, 0.5, 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, 0.5, 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, 0.5, 0.0, 1.0,//3
-
- 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, 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
- ];
-
// Generate a buffer object
gl.vertexBuffer = gl.createBuffer();
// Bind buffer as a vertex buffer so we can fill it with data
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");
}
@@ -114,7 +176,7 @@ function initialiseShaders() {
var vertexShaderSource = '\
attribute highp vec3 myVertex; \
attribute highp vec4 myColor; \
- attribute highp vec2 myUV; \
+ attribute highp vec2 myUV; \
uniform mediump mat4 Pmatrix; \
uniform mediump mat4 Vmatrix; \
uniform mediump mat4 Mmatrix; \
@@ -145,10 +207,10 @@ function initialiseShaders() {
gl.attachShader(gl.programObject, gl.fragShader);
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, 1, "myColor");
- gl.bindAttribLocation(gl.programObject, 2, "myUV");
+ gl.bindAttribLocation(gl.programObject, 2, "myUV");
// Link the program
gl.linkProgram(gl.programObject);
@@ -173,14 +235,13 @@ function get_projection(angle, a, zMin, zMax) {
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 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
rotValue = 0.0;
-rotRatio = 1.0;
animRotValue = 0.0;
transX = 0.0; transY = 0.0; transZ = 0.0;
frames = 1;
@@ -192,7 +253,6 @@ function animRotate()
function animPause(){
animRotValue = 0.0;
- rotRatio = 1.0;
}
function trXinc() // translate X increase
@@ -213,26 +273,27 @@ function trZinc() // translate Z increase
document.getElementById("webTrZ").innerHTML = "transZ : " + transZ.toFixed(4);
}
-function rotateMoonFaster(){
- rotRatio += 0.1;
+var trace = [];
+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() {
- //console.log("Frame "+frames+"\n");
+ // console.log("Frame "+frames+"\n");
frames += 1 ;
- rotAxis = [1,1,0];
+ rotAxis = [0,-1,0]; // 결정할 수 있게 만들기 (check box로 선택)
var locPmatrix = gl.getUniformLocation(gl.programObject, "Pmatrix");
var locVmatrix = gl.getUniformLocation(gl.programObject, "Vmatrix");
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한테 던져줌
gl.uniformMatrix4fv(locPmatrix, false, proj_matrix);
@@ -242,126 +303,56 @@ function renderScene() {
if (!testGLError("gl.uniformMatrix4fv")) {
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.enableVertexAttribArray(1);
+ gl.enableVertexAttribArray(1); // color
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);
-
if (!testGLError("gl.vertexAttribPointer")) {
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
glMatrix.mat4.identity(mov_matrix);
- // var ddd = vec3(transX, transY, transZ);
- // mov_matrix = fromTranslation(mov_matrix,ddd);
+ glMatrix.mat4.rotate(mov_matrix,mov_matrix,rotValue, rotAxis);
glMatrix.mat4.translate(mov_matrix, mov_matrix, [transX,transY,transZ]);
- glMatrix.mat4.rotate(mov_matrix,mov_matrix,rotValue, rotAxis)
rotValue += animRotValue;
gl.uniformMatrix4fv(locMmatrix, false, mov_matrix);
- gl.drawArrays(gl.TRIANGLES, 0, 36);
- // gsave
- // mov_matrix의 주소를 복사하는 것이 아닌 행렬을 복사
var mov_matrix_child = mov_matrix.slice();
+ addTrace(mov_matrix_child);
+
+ // draw trace of cube
+ color_a = 1.0;
+ for (var i = trace.length -1; i>=0;i-=traceFreq){
+ color_a -= trace_alpha;
+ gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData(color_a, "gray")), gl.STATIC_DRAW);
+ gl.uniformMatrix4fv(locMmatrix, false, trace[i].slice());
+ if (color_a > 0.0)
+ gl.drawArrays(gl.TRIANGLES, 0, 36);
+ }
- moonRotValue = rotValue * rotRatio;
- // console.log("moonRotValue: "+moonRotValue);
-
- // 1st 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, rotValue);
- gl.uniformMatrix4fv(locMmatrix, false, mov_matrix);
- 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);
-
- // grestore
- mov_matrix = mov_matrix_child.slice();
-
- // 8th 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*8);
- gl.uniformMatrix4fv(locMmatrix, false, mov_matrix);
+ // original cube
+ gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData(1.0, "color")), gl.STATIC_DRAW);
+ gl.uniformMatrix4fv(locMmatrix, false, trace[trace.length -1].slice());
gl.drawArrays(gl.TRIANGLES, 0, 36);
+ // 회전 수치 표
document.getElementById("matrix0").innerHTML = mov_matrix[0].toFixed(4);
document.getElementById("matrix1").innerHTML = mov_matrix[1].toFixed(4);
document.getElementById("matrix2").innerHTML = mov_matrix[2].toFixed(4);
--
GitLab