Select Git revision
-
Jiyoon Park authoredJiyoon Park authored
index.html 7.60 KiB
<html>
<head>
<title>WebGL1.0 Tutorial</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="gl-matrix.js"> </script>
<script type="text/javascript" src="script.js"> </script>
</head>
<body onload="main()">
<table>
<td>
<canvas id="helloapicanvas" style="border: none;" width="800" height="600"></canvas>
<td>
<input type="checkbox" onclick="flag_animation ^= 1;" id="toggleAnimation"><lable>Toggle Animation | </lebel>
<lable>Speed Up/Down :</label>
<button onclick="fn_speed_scale(1.1)"> + </button>
<button onclick="fn_speed_scale(0.9)"> - </button>
<lable> | Animation Rotate :</lable>
<input type="checkbox" onclick="animate_rotate(1)"><lable>X-axis Rotate /</lable>
<input type="checkbox" onclick="animate_rotate(2)"><lable>Y-axis Rotate /</lable>
<input type="checkbox" onclick="animate_rotate(3)"><lable>Z-axis Rotate </lable>
<br/><hr>
<lable>Draw Mode :</label>
<input name="drawmode" type="radio" onclick="fn_draw_mode(0)"><lable>POINTS </label>
<input name="drawmode" type="radio" onclick="fn_draw_mode(1)"><lable>LINES </label>
<input name="drawmode" type="radio" onclick="fn_draw_mode(2)"><lable>LINE_STRIP </label>
<input name="drawmode" type="radio" onclick="fn_draw_mode(3)"><lable>LINE_LOOP </label>
<input name="drawmode" type="radio" onclick="fn_draw_mode(4)" checked><lable>TRIANGLES </label>
<input name="drawmode" type="radio" onclick="fn_draw_mode(5)"><lable>TRIANGLE_STRIP </label>
<input name="drawmode" type="radio" onclick="fn_draw_mode(6)"><lable>TRIANGLE_FAN </label>
<br/><hr>
<label>FOV : </label>
<input style="width:400px" id="fov_range" type="range" min="10" max="170" value="90" oninput="fn_update_fov(this.value);"></input>
<input style="width:60px" type="text" id="textFOV" value="90">
<br/><hr>
<input type="checkbox" onclick="fn_toggle(2884)"><lable>CULL_FACE | </lable>
<label>cullFace(mode) :</label>
<input name="cullmode" type="radio" onclick="fn_cull_mode(1028)"><lable>FRONT <label>
<input name="cullmode" type="radio" onclick="fn_cull_mode(1029)" checked><label>BACK <label>
<input name="cullmode" type="radio" onclick="fn_cull_mode(1032)"><label>FRONT_AND_BACK <label>
<br/><hr>
<input type="checkbox" onclick="fn_toggle(3089)"><lable>SCISSOR_TEST | </lable>
<label>scissor(x,y,w,h) :</label>
<lable> X <label><input id="scissorx" type="text" size="4" value="0">
<label> Y <label><input id="scissory" type="text" size="4" value="0">
<label> W <label><input id="scissorw" type="text" size="4" value="800">
<label> H <label><input id="scissorh" type="text" size="4" value="600">
<button onclick="fn_scissor()">Set</button>
<br/><hr>
<input type="checkbox" onclick="fn_toggle(2929)"><lable>DEPTH_TEST | depth clear value : </lable>
<input style="width:300px" id="depth_clear" type="range" min="0" max="100" value="100"
oninput="depth_clear_value = this.value / 100.0;"></input>
<br/>
<label>depthFunc(mode) :</label>
<input name="depthmode" type="radio" onclick="fn_depth_mode(512)"><lable>NEVER </label>
<input name="depthmode" type="radio" onclick="fn_depth_mode(513)" checked><lable>LESS </label>
<input name="depthmode" type="radio" onclick="fn_depth_mode(514)"><lable>EQAUL </label>
<input name="depthmode" type="radio" onclick="fn_depth_mode(515)"><lable>LEQUAL </label>
<input name="depthmode" type="radio" onclick="fn_depth_mode(516)"><lable>GREATER </label>
<input name="depthmode" type="radio" onclick="fn_depth_mode(517)"><lable>NOTEQUAL </label>
<input name="depthmode" type="radio" onclick="fn_depth_mode(518)"><lable>GEQUAL </label>
<input name="depthmode" type="radio" onclick="fn_depth_mode(519)"><lable>ALWAYS </label> <br/>
<hr>
<label>X rotate : </label>
<input style="width:400px" id="x_rotate" type="range" min="0" max="360" value="0" oninput="fn_update_xrotate(this.value);"></input>
<input style="width:60px" type="text" id="textXRot" value="0">
<br/>
<label>Y rotate : </label>