From f75f158fc49d564ab8b9acb34fde9f771db0ad25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=85=B8=EC=A4=80=ED=98=B8?= <forrjh@ajou.ac.kr>
Date: Sat, 8 Jun 2019 03:38:57 +0900
Subject: [PATCH] Upload New File
---
project.html | 232 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 232 insertions(+)
create mode 100644 project.html
diff --git a/project.html b/project.html
new file mode 100644
index 0000000..817e727
--- /dev/null
+++ b/project.html
@@ -0,0 +1,232 @@
+<html>
+<head>
+<!--(CC-NC-BY) Jun-ho Roh 2019-->
+<title>WebGLMatrixTutorial</title>
+<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+<script type="text/javascript" src="project.js">
+</script>
+<style>
+
+div {
+ width: 100%;
+ height: 550px;
+}
+div.left {
+ width: 50%;
+ float: left;
+ box-sizing: border-box;
+}
+div.right {
+ width: 50%;
+ float: right;
+ box-sizing: border-box;
+ border-left:0.1em solid #000000;
+ padding:0.5em;
+}
+</style>
+</head>
+
+<body onload="main()">
+<div>
+ <div class="left">
+ <canvas id="maincanvas" style="border: none;" width="400" height="400">
+ </canvas>
+ <pre>
+<font size="4em">
+Drag the mouse over the canvas to move the screen.
+</font>
+ </pre>
+ </div>
+
+ <div class="right">
+ <button onclick="apply()">apply shader code</button>
+ <pre>
+ Vertex Shader Source Fragment Shader Source
+ </pre>
+ <TEXTAREA id="vertexSource" ROWS=20 COLS=50 style="resize:none">
+attribute highp vec3 myVertex;
+attribute highp vec4 myColor;
+attribute highp vec2 myUV;
+uniform mediump mat4 Pmatrix;
+uniform mediump mat4 Vmatrix;
+uniform mediump mat4 Mmatrix;
+varying mediump vec4 color;
+varying mediump vec2 texCoord;
+void main(void)
+{
+ gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(myVertex, 1.0);
+ color = myColor;
+ texCoord = myUV;
+}
+</TEXTAREA>
+ <TEXTAREA id="fragmentSource" ROWS=20 COLS=50 style="resize:none">
+varying mediump vec4 color;
+void main(void)
+{
+ gl_FragColor = 1.0 * color;
+}
+</TEXTAREA>
+ <br><br>Render Refresh time(less than 0 will stop) :
+ <Textarea id="timer" ROWS=1 COLS=5 style="resize:none">0.1</textarea>SEC
+ </div>
+</div>
+
+<br>
+<hr>
+<div>
+ <div class="left">
+ <pre>
+ <font size="5em" color="green">
+ Projection Matrix
+ </font>
+
+ <table id="cal_proj" border=1>
+ <tr>
+ <td><input type="checkbox" id="is_cal" checked="checked">Calculate</td>
+ <tr>
+ <td>Near</td>
+ <td>Far</td>
+ <tr>
+ <td><textarea id="near" style="resize:none">2</textarea></td>
+ <td><textarea id="far" style="resize:none">20.0</textarea></td>
+ <tr>
+ <td>FOV up degree</td>
+ <td>FOV down degree</td>
+ <td>FOV left degree</td>
+ <td>FOV right degree</td>
+ <tr>
+ <td><textarea id="fov_up" style="resize:none">30.0</textarea></td>
+ <td><textarea id="fov_down" style="resize:none">30.0</textarea></td>
+ <td><textarea id="fov_left" style="resize:none">30.0</textarea></td>
+ <td><textarea id="fov_right" style="resize:none">30.0</textarea></td>
+ </table>
+
+ </pre>
+ <table id="pmatrix" border=1>
+ <tr >
+ <td><textarea id="pmatrix0" style="background-color:orange;resize:none;">1.732050</textarea></td>
+ <td><textarea id="pmatrix4" style="resize:none">0.0</textarea></td>
+ <td><textarea id="pmatrix8" style="background-color:orange;resize:none;">0.0</textarea></td>
+ <td><textarea id="pmatrix12" style="resize:none">0.0</textarea></td>
+ <tr>
+ <td><textarea id="pmatrix1" style="resize:none">0.0</textarea></td>
+ <td><textarea id="pmatrix5" style="background-color:orange;resize:none;">1.732050</textarea></td>
+ <td><textarea id="pmatrix9" style="background-color:orange;resize:none;">0.0</textarea></td>
+ <td><textarea id="pmatrix13" style="resize:none">0.0</textarea></td>
+ <tr>
+ <td><textarea id="pmatrix2" style="resize:none">0.0</textarea></td>
+ <td><textarea id="pmatrix6" style="resize:none">0.0</textarea></td>
+ <td><textarea id="pmatrix10" style="background-color:orange;resize:none;">-1.111111</textarea></td>
+ <td><textarea id="pmatrix14" style="background-color:orange;resize:none;">-2.222222</textarea></td>
+ <tr>
+ <td><textarea id="pmatrix3" style="resize:none">0.0</textarea></td>
+ <td><textarea id="pmatrix7" style="resize:none">0.0</textarea></td>
+ <td><textarea id="pmatrix11" style="background-color:orange;resize:none;">-1.0</textarea></td>
+ <td><textarea id="pmatrix15" style="resize:none">0.0</textarea></td>
+ </table>
+ </div>
+ <div class="right">
+ <pre>
+ <font size="5em" color="green">
+View Matrix
+ </font>
+ </pre>
+ <table id="vmatrix" border=1>
+ <tr >
+ <td><textarea id="vmatrix0" style="resize:none">1.0</textarea></td>
+ <td><textarea id="vmatrix4" style="resize:none">0.0</textarea></td>
+ <td><textarea id="vmatrix8" style="resize:none">0.0</textarea></td>
+ <td><textarea id="vmatrix12" style="background-color:orange;resize:none;">0.0</textarea></td>
+ <tr>
+ <td><textarea id="vmatrix1" style="resize:none">0.0</textarea></td>
+ <td><textarea id="vmatrix5" style="resize:none">1.0</textarea></td>
+ <td><textarea id="vmatrix9" style="resize:none">0.0</textarea></td>
+ <td><textarea id="vmatrix13" style="background-color:orange;resize:none;">0.0</textarea></td>
+ <tr>
+ <td><textarea id="vmatrix2" style="resize:none">0.0</textarea></td>
+ <td><textarea id="vmatrix6" style="resize:none">0.0</textarea></td>
+ <td><textarea id="vmatrix10" style="resize:none">1.0</textarea></td>
+ <td><textarea id="vmatrix14" style="background-color:orange;resize:none;">-5.0</textarea></td>
+ <tr>
+ <td><textarea id="vmatrix3" style="resize:none">0.0</textarea></td>
+ <td><textarea id="vmatrix7" style="resize:none">0.0</textarea></td>
+ <td><textarea id="vmatrix11" style="resize:none">0.0</textarea></td>
+ <td><textarea id="vmatrix15" style="resize:none">1.0</textarea></td>
+ </table>
+ <pre>
+ <font size="5em" color="green">
+Move Matrix
+ </font>
+ </pre>
+ <table id="mmatrix" border=1>
+ <tr>
+ <td><input type="checkbox" id="is_pause">Pause & Change</td>
+ <tr >
+ <td><textarea id="mmatrix0" style="resize:none">1.0</textarea></td>
+ <td><textarea id="mmatrix4" style="resize:none">0.0</textarea></td>
+ <td><textarea id="mmatrix8" style="resize:none">0.0</textarea></td>
+ <td><textarea id="mmatrix12" style="resize:none">0.0</textarea></td>
+ <tr>
+ <td><textarea id="mmatrix1" style="resize:none">0.0</textarea></td>
+ <td><textarea id="mmatrix5" style="resize:none">1.0</textarea></td>
+ <td><textarea id="mmatrix9" style="resize:none">0.0</textarea></td>
+ <td><textarea id="mmatrix13" style="resize:none">0.0</textarea></td>
+ <tr>
+ <td><textarea id="mmatrix2" style="resize:none">0.0</textarea></td>
+ <td><textarea id="mmatrix6" style="resize:none">0.0</textarea></td>
+ <td><textarea id="mmatrix10" style="resize:none">1.0</textarea></td>
+ <td><textarea id="mmatrix14" style="resize:none">0.0</textarea></td>
+ <tr>
+ <td><textarea id="mmatrix3" style="resize:none">0.0</textarea></td>
+ <td><textarea id="mmatrix7" style="resize:none">0.0</textarea></td>
+ <td><textarea id="mmatrix11" style="resize:none">0.0</textarea></td>
+ <td><textarea id="mmatrix15" style="resize:none">1.0</textarea></td>
+ </table>
+
+ </div>
+</div>
+<hr>
+<div>
+ <div class="left">
+ <br>
+ <font size="5em">big square</font><br>
+ <button onclick="mainAnimPause()">Main Anim Pause</button>
+ <button onclick="resetMainPos()">Reset Main Position</button>
+ <br>
+ <button onclick="trXinc()">Translate X + 0.01</button>
+ <button onclick="trYinc()">Translate Y + 0.01</button>
+ <button onclick="trZinc()">Translate Z + 0.01</button>
+ <br>
+ <button onclick="trXdec()">Translate X - 0.01</button>
+ <button onclick="trYdec()">Translate Y - 0.01</button>
+ <button onclick="trZdec()">Translate Z - 0.01</button>
+ <br>
+ <button onclick="mainAnimXRotate()">Animation XRot + 0.01</button>
+ <button onclick="mainAnimYRotate()">Animation YRot + 0.01</button>
+ <button onclick="mainAnimZRotate()">Animation ZRot + 0.01</button>
+ <br>
+ <p id="webTrX"> transX : 0.0000</p>
+ <p id="webTrY"> transY : 0.0000</p>
+ <p id="webTrZ"> transZ : 0.0000</p>
+ </div>
+ <div class="right">
+ <font size="5em">small squares</font><br>
+ <button onclick="moonAnimPause()">Moon Anim Pause</button>
+ <button onclick="resetMoonPos()">Reset Moon Position</button>
+ <br>
+ <button onclick="mtrXinc()">Translate X + 0.01</button>
+ <button onclick="mtrYinc()">Translate Y + 0.01</button>
+ <button onclick="mtrZinc()">Translate Z + 0.01</button>
+ <br>
+ <button onclick="mtrXdec()">Translate X - 0.01</button>
+ <button onclick="mtrYdec()">Translate Y - 0.01</button>
+ <button onclick="mtrZdec()">Translate Z - 0.01</button>
+ <br>
+ <button onclick="moonAnimXRotate()">Animation XRot + 0.01</button>
+ <button onclick="moonAnimYRotate()">Animation YRot + 0.01</button>
+ <button onclick="moonAnimZRotate()">Animation ZRot + 0.01</button><br>
+ <p id="mwebTrX"> transX : 0.0000</p>
+ <p id="mwebTrY"> transY : 0.0000</p>
+ <p id="mwebTrZ"> transZ : 0.0000</p>
+ </div>
+</div>
\ No newline at end of file
--
GitLab