Select Git revision
index.html 7.57 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> <input style="width:400px" id="y_rotate" type="range" min="0" max="360" value="0" oninput="fn_update_yrotate(this.value);"></input>
<input style="width:60px" type="text" id="textYRot" value="0">
<br/>
<label>Z rotate : </label>
<input style="width:400px" id="z_rotate" type="range" min="0" max="360" value="0" oninput="fn_update_zrotate(this.value);"></input>
<input style="width:60px" type="text" id="textZRot" value="0">
<br/><hr>
<label>Cube Move | </label>
<br/>
<label>X-axis Move : </label>
<input style="width:400px" id="x_move" type="range" min="-100" max="100" value="0" oninput="fn_update_xmove(this.value);"></input>
<input style="width:60px" type="text" id="textXMove" value="0">
<br/>
<label>Y-axis Move : </label>
<input style="width:400px" id="y_move" type="range" min="-100" max="100" value="0" oninput="fn_update_ymove(this.value);"></input>
<input style="width:60px" type="text" id="textYMove" value="0">
<br/>
<label>Z-axis Move : </label>
<input style="width:400px" id="z_move" type="range" min="-100" max="100" value="0" oninput="fn_update_zmove(this.value);"></input>
<input style="width:60px" type="text" id="textZMove" value="0">
<br/><hr>
<label>lookAt | </label>
<br/>
<label>eye vector (x-axis) : </label>
<input style="width:400px" id="x_eye" type="range" min="-100" max="100" value="0" oninput="fn_update_xeye(this.value);"></input>
<input style="width:60px" type="text" id="textXEye" value="0">
<br/>
<label>eye vector (y-axis) : </label>
<input style="width:400px" id="y_eye" type="range" min="-100" max="100" value="0" oninput="fn_update_yeye(this.value);"></input>
<input style="width:60px" type="text" id="textYEye" value="0">
<br/>
<label>eye vector (z-axis) : </label>
<input style="width:400px" id="z_eye" type="range" min="-100" max="100" value="0" oninput="fn_update_zeye(this.value);"></input>
<input style="width:60px" type="text" id="textZEye" value="2">
<br/><hr>
<label>center vector (x-axis) : </label>
<input style="width:400px" id="x_center" type="range" min="-100" max="100" value="0" oninput="fn_update_xcenter(this.value);"></input>
<input style="width:60px" type="text" id="textXCenter" value="0">
<br/>
<label>center vector (y-axis) : </label>
<input style="width:400px" id="y_center" type="range" min="-100" max="100" value="0" oninput="fn_update_ycenter(this.value);"></input>
<input style="width:60px" type="text" id="textYCenter" value="0">
<br/>
<label>center vector (z-axis) : </label>
<input style="width:400px" id="z_center" type="range" min="-100" max="100" value="0" oninput="fn_update_zcenter(this.value);"></input>
<input style="width:60px" type="text" id="textZCenter" value="0">
<br/><hr>
<label>up vector (x-axis) : </label>
<input style="width:400px" id="x_up" type="range" min="-100" max="100" value="0" oninput="fn_update_xup(this.value);"></input>
<input style="width:60px" type="text" id="textXUp" value="0">
<br/>
<label>up vector (y-axis) : </label>
<input style="width:400px" id="y_up" type="range" min="-100" max="100" value="0" oninput="fn_update_yup(this.value);"></input>
<input style="width:60px" type="text" id="textYUp" value="1">
<br/>
<label>up vector (z-axis) : </label>
<input style="width:400px" id="z_up" type="range" min="-100" max="100" value="0" oninput="fn_update_zup(this.value);"></input>
<input style="width:60px" type="text" id="textZUp" value="0">
<br/><hr>
</table>
<br/><br/>
</body>
</html>