Skip to content
Snippets Groups Projects
Commit f75f158f authored by 노준호's avatar 노준호
Browse files

Upload New File

parent e565087d
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 232 additions and 0 deletions
project.html 0 → 100644
+ 232
− 0
View file @ f75f158f
<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
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