Skip to content
Snippets Groups Projects
Select Git revision
  • master
1 result

index.html

Blame
  • 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>