|
35 | 35 | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> |
36 | 36 | <title>Lots-O-Objects - Draw Elements</title> |
37 | 37 | <link rel="stylesheet" href="../google-io/2011/style.css" /> |
38 | | -<script src="../js/perf-harness.js"></script> |
39 | | -<script src="../tdl/base.js"></script> |
40 | | -<script> |
41 | | -g_contextSettings = { |
42 | | - alpha: false, |
43 | | - antialias: false, |
44 | | - preserveDrawingBuffer: false, |
45 | | -}; |
46 | | -</script> |
47 | | -<script src="lots-o-objects-draw-elements.js"></script> |
48 | | -</script> |
49 | | -</head> |
| 38 | +<style> |
| 39 | +#fpsContainer { |
| 40 | + width: 200px; |
| 41 | +} |
| 42 | +.fps { |
| 43 | + white-space: pre; |
| 44 | +} |
| 45 | +.fps input[type=checkbox] + label { |
| 46 | + color: #888; |
| 47 | +} |
| 48 | +.fps input[type=checkbox]:checked + label { |
| 49 | + color: #FFF; |
| 50 | +} |
| 51 | +</style></head> |
50 | 52 | <body> |
51 | | -<div id="info"><span><a href="http://threedlibrary.googlecode.com" target="_blank">tdl.js</a> - <span id="title"></span></span></div> |
| 53 | +<div id="info"><span><span id="title"></span></span></div> |
52 | 54 | <div id="fpsContainer"> |
53 | | - <div class="fps">fps: <span id="fps"></div> |
54 | | - <div class="fps">cnt: <span id="cnt"></span></div> |
55 | | - <div class="fps">avg: <span id="avg"></span></div> |
| 55 | + <div>target fps: <span id="targetFPS"></span></div> |
| 56 | + <div id="targetFPSSlider"></div> |
| 57 | + <div class="fps"> fps: <span id="fps"></div> |
| 58 | + <div class="fps">avg-fps: <span id="afps"></div> |
| 59 | + <div class="fps"> count: <span id="cnt"></span></div> |
| 60 | + <hr> |
56 | 61 | </div> |
57 | 62 | <div id="viewContainer"> |
58 | 63 | <canvas id="canvas" width="512" height="512" style="width: 100%; height: 100%;"></canvas> |
59 | 64 | </div> |
60 | 65 | </body> |
61 | | -<script id="sphereVertexShader" type="text/something-not-javascript"> |
62 | | -uniform mat4 worldViewProjection; |
63 | | -uniform vec3 lightWorldPos; |
64 | | -uniform mat4 world; |
65 | | -uniform mat4 viewInverse; |
66 | | -uniform mat4 worldInverseTranspose; |
67 | | -attribute vec4 position; |
68 | | -attribute vec3 normal; |
69 | | -attribute vec2 texCoord; |
70 | | -varying vec4 v_position; |
71 | | -varying vec2 v_texCoord; |
72 | | -varying vec3 v_normal; |
73 | | -varying vec3 v_surfaceToLight; |
74 | | -varying vec3 v_surfaceToView; |
75 | | -void main() { |
76 | | - v_texCoord = texCoord; |
77 | | - v_position = (worldViewProjection * position); |
78 | | - v_normal = (worldInverseTranspose * vec4(normal, 0)).xyz; |
79 | | - v_surfaceToLight = lightWorldPos - (world * position).xyz; |
80 | | - v_surfaceToView = (viewInverse[3] - (world * position)).xyz; |
81 | | - gl_Position = v_position; |
82 | | -} |
83 | | - |
84 | | -</script> |
85 | | -<script id="sphereFragmentShader" type="text/something-not-javascript"> |
86 | | -#ifdef GL_ES |
87 | | -precision mediump float; |
88 | | -#endif |
89 | | -uniform vec4 colorMult; |
90 | | -varying vec4 v_position; |
91 | | -varying vec2 v_texCoord; |
92 | | -varying vec3 v_normal; |
93 | | -varying vec3 v_surfaceToLight; |
94 | | -varying vec3 v_surfaceToView; |
95 | | - |
96 | | -uniform sampler2D diffuseSampler; |
97 | | -uniform vec4 specular; |
98 | | -uniform sampler2D bumpSampler; |
99 | | -uniform float shininess; |
100 | | -uniform float specularFactor; |
101 | | - |
102 | | -vec4 lit(float l ,float h, float m) { |
103 | | - return vec4(1.0, |
104 | | - max(l, 0.0), |
105 | | - (l > 0.0) ? pow(max(0.0, h), m) : 0.0, |
106 | | - 1.0); |
107 | | -} |
108 | | -void main() { |
109 | | - vec4 diffuse = texture2D(diffuseSampler, v_texCoord) * colorMult; |
110 | | - vec3 normal = normalize(v_normal); |
111 | | - vec3 surfaceToLight = normalize(v_surfaceToLight); |
112 | | - vec3 surfaceToView = normalize(v_surfaceToView); |
113 | | - vec3 halfVector = normalize(surfaceToLight + surfaceToView); |
114 | | - vec4 litR = lit(dot(normal, surfaceToLight), |
115 | | - dot(normal, halfVector), shininess); |
116 | | - gl_FragColor = vec4(( |
117 | | - vec4(1,1,1,1) * (diffuse * litR.y |
118 | | - + specular * litR.z * specularFactor)).rgb, |
119 | | - diffuse.a); |
120 | | -} |
121 | | -</script> |
| 66 | +<script src="../jquery-ui-1.8.2.custom/js/jquery-1.4.2.min.js"></script> |
| 67 | +<script src="../jquery-ui-1.8.2.custom/js/jquery-ui-1.8.2.custom.min.js"></script> |
| 68 | +<script src="../js/perf-harness.js"></script> |
| 69 | +<script src="../js/twgl-full.4.x.min.js"></script> |
| 70 | +<script src="lots-o-objects-draw-elements.js"></script> |
| 71 | +<script src="../lots-o-images/launcher.js"></script> |
122 | 72 | </html> |
123 | 73 |
|
124 | 74 |
|
|
0 commit comments