diff --git a/project.html b/project.html deleted file mode 100644 index 8900a068c765bab1a5e1fff6df4c8909869cf2b3..0000000000000000000000000000000000000000 --- a/project.html +++ /dev/null @@ -1,227 +0,0 @@ -<html> -<head> -<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_canvas{ -width:1200px; -height:0px; -} -#div_source{ -margin:auto; -width:1000px; -height:500px; -} -#div_project{ -width:500px; -height:0px; -} -#div_view{ -margin:auto; -width:500px; -height:550px; -border-left:0.1em solid #000000; -padding:0.5em; -} -</style> -</head> - -<body onload="main()"> -<div id="div_canvas"> -<canvas id="maincanvas" style="border: none;" width="400" height="400"> -</canvas> -</div> - -<div id="div_source"> -<button onclick="apply()">apply shader code</button> -<pre> - Vertex Shader Source Fragment Shader Source -</pre> -<TEXTAREA id="vertexSource" ROWS=20 COLS=50> -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> -varying mediump vec4 color; -void main(void) -{ - gl_FragColor = 1.0 * color; -} -</TEXTAREA> -</div> -<br> -<hr> - -<div id="div_project"> -<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>FOV</td> - <td>Aspect Ratio</td> - <td>Near</td> - <td>Far</td> - <tr> - <td><textarea id="fov">30</textarea></td> - <td><textarea id="ar">1.0</textarea></td> - <td><textarea id="near">1</textarea></td> - <td><textarea id="far">10.0</textarea></td> -</table> - - -ang = FOV to radian -0.5/ang, 0 , 0, 0, -0, 0.5*a/ang, 0, 0, -0, 0, -(Far+Near)/(Far-Near), -1, -0, 0, (-2*Far*Near)/(Far-Near), 0 - - -</pre> -<table id="pmatrix" border=1> - <tr > - <td><textarea id="pmatrix0" style="background-color:orange;">1.866025</textarea></td> - <td><textarea id="pmatrix4">0.0</textarea></td> - <td><textarea id="pmatrix8">0.0</textarea></td> - <td><textarea id="pmatrix12">0.0</textarea></td> - <tr> - <td><textarea id="pmatrix1">0.0</textarea></td> - <td><textarea id="pmatrix5" style="background-color:orange;">1.866025</textarea></td> - <td><textarea id="pmatrix9">0.0</textarea></td> - <td><textarea id="pmatrix13">0.0</textarea></td> - <tr> - <td><textarea id="pmatrix2">0.0</textarea></td> - <td><textarea id="pmatrix6">0.0</textarea></td> - <td><textarea id="pmatrix10" style="background-color:orange;">-1.222222</textarea></td> - <td><textarea id="pmatrix14">-1.0</textarea></td> - <tr> - <td><textarea id="pmatrix3">0.0</textarea></td> - <td><textarea id="pmatrix7">0.0</textarea></td> - <td><textarea id="pmatrix11" style="background-color:orange;">-2.222222</textarea></td> - <td><textarea id="pmatrix15">0.0</textarea></td> - </table> - </div> - - -<div id="div_view"> -<pre> -<font size="5em" color="green"> -View Matrix -</font> -</pre> -<table id="vmatrix" border=1> - <tr > - <td><textarea id="vmatrix0">1.0</textarea></td> - <td><textarea id="vmatrix4">0.0</textarea></td> - <td><textarea id="vmatrix8">0.0</textarea></td> - <td><textarea id="vmatrix12" style="background-color:orange;">0.0</textarea></td> - <tr> - <td><textarea id="vmatrix1">0.0</textarea></td> - <td><textarea id="vmatrix5">1.0</textarea></td> - <td><textarea id="vmatrix9">0.0</textarea></td> - <td><textarea id="vmatrix13" style="background-color:orange;">0.0</textarea></td> - <tr> - <td><textarea id="vmatrix2">0.0</textarea></td> - <td><textarea id="vmatrix6">0.0</textarea></td> - <td><textarea id="vmatrix10">1.0</textarea></td> - <td><textarea id="vmatrix14" style="background-color:orange;">-3.0</textarea></td> - <tr> - <td><textarea id="vmatrix3">0.0</textarea></td> - <td><textarea id="vmatrix7">0.0</textarea></td> - <td><textarea id="vmatrix11">0.0</textarea></td> - <td><textarea id="vmatrix15">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 and Change</td> - <tr > - <td><textarea id="mmatrix0">1.0</textarea></td> - <td><textarea id="mmatrix4">0.0</textarea></td> - <td><textarea id="mmatrix8">0.0</textarea></td> - <td><textarea id="mmatrix12">0.0</textarea></td> - <tr> - <td><textarea id="mmatrix1">0.0</textarea></td> - <td><textarea id="mmatrix5">1.0</textarea></td> - <td><textarea id="mmatrix9">0.0</textarea></td> - <td><textarea id="mmatrix13">0.0</textarea></td> - <tr> - <td><textarea id="mmatrix2">0.0</textarea></td> - <td><textarea id="mmatrix6">0.0</textarea></td> - <td><textarea id="mmatrix10">1.0</textarea></td> - <td><textarea id="mmatrix14">0.0</textarea></td> - <tr> - <td><textarea id="mmatrix3">0.0</textarea></td> - <td><textarea id="mmatrix7">0.0</textarea></td> - <td><textarea id="mmatrix11">0.0</textarea></td> - <td><textarea id="mmatrix15">1.0</textarea></td> - </table> - - </div> - -<hr> -<div id="div_project"> -<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 id="div_view"> - <font size="5em">small square</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> -<hr> \ No newline at end of file