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

Delete project.html

parent 91625016
No related branches found
No related tags found
No related merge requests found
<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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment