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

Upload New File

parent 0b1ed310
Branches
No related tags found
No related merge requests found
<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#upper{
height:550px;
width:100%;
display:inline-block;
}
#upper_left{
width:50%;
float:left;
}
#upper_right{
width:50%;
height:100%;
float: right;
box-sizing: border-box;
border-left:0.1em solid #000000;
padding:0.5em;
}
#middle{
width: 100%;
height: 700px;
display:inline-block;
}
#middle_left{
width: 50%;
float: left;
box-sizing: border-box;
}
#middle_right{
height:100%;
width: 50%;
float: right;
box-sizing: border-box;
border-left:0.1em solid #000000;
padding:0.5em;
}
#bottom{
width: 100%;
height: 350px;
display:inline-block;
}
#bottom_left{
width: 50%;
float: left;
box-sizing: border-box;
}
#bottom_right{
height:100%;
width: 50%;
float: right;
box-sizing: border-box;
border-left:0.1em solid #000000;
padding:0.5em;
}
</style>
</head>
<body onload="main()">
<div id="upper">
<div id="upper_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 camera.
Wheel the mouse over the canvas to zoom in/out the camera.
</font>
</pre>
</div>
<div id="upper_right">
<br><button onclick="apply()">apply shader code</button>
<pre><font size="4em" color="green">
Vertex Shader Source Fragment Shader Source
</font></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.01</textarea>SEC
</div>
</div>
<br>
<hr>
<div id="middle">
<div id="middle_left">
<pre>
<font size="5em" color="green">
Projection Matrix
</font>
<font size="3em" color="green">
you can modify the value of the matrix under this character.
</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>
<font size="3em" color="green">
you can modify the value of the matrix under this character. if you disabled Calculate checkbox
but recommand Calculate by matrix
</font>
</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 id="middle_right">
<pre>
<font size="5em" color="green">
View Matrix
</font>
<font size="3em" color="green">
you can modify the value of the matrix under this character.
but recommand drag/wheel over the canvas
</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>
<font size="3em" color="green">
you can modify the value of the matrix under this character. if you checked Pause checkbox
</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 id="bottom">
<div id="bottom_left">
<br>
<font size="5em">big square</font><br><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="bottom_right">
<font size="5em">small squares</font><br><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% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment