/ fps_graph.html
fps_graph.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 6 7 <title>FPS Graph — Space.js</title> 8 9 <link rel="preconnect" href="https://fonts.gstatic.com"> 10 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono"> 11 <link rel="stylesheet" href="assets/css/style.css"> 12 13 <script type="module"> 14 import { PanelItem, UI } from './src/index.js'; 15 16 const ui = new UI({ 17 fps: true, // Hover or tap to open 18 fpsOpen: true // Always open 19 }); 20 ui.animateIn(); 21 document.body.appendChild(ui.element); 22 23 let needsUpdate = true; 24 25 const items = [ 26 /* { 27 type: 'graph', 28 name: 'FPS' 29 }, */ 30 { 31 type: 'graph', 32 name: 'FPS', 33 noText: true 34 }, 35 { 36 type: 'graph', 37 name: 'MS', 38 suffix: 'ms', 39 range: 150, 40 value: performance.now(), 41 callback: (value, item) => { 42 // console.log('MS callback:', value); 43 44 const time = performance.now(); 45 const ms = time - value; 46 47 item.update(ms); 48 item.setValue(ms); 49 50 // The return value is passed back in the next frame 51 return time; 52 } 53 }, 54 { 55 type: 'graph', 56 name: 'MEM', 57 range: 300, 58 value: performance.memory, 59 callback: (value, item) => { 60 // console.log('MEM callback:', value); 61 62 const mem = value.usedJSHeapSize / Math.pow(1000, 2); 63 64 item.update(mem); 65 item.setValue(mem); 66 67 // The return value is passed back in the next frame 68 return value; 69 } 70 }, 71 { 72 type: 'graph', 73 name: 'Sine', 74 precision: 2, 75 value: -13, 76 noText: true, 77 noHover: true, 78 noGradient: true, 79 callback: (value, item) => { 80 // console.log('Sine callback:', value); 81 82 const y = 0.5 + 0.5 * Math.sin(value++ / 9) * 0.5; 83 item.update(y); 84 85 // The return value is passed back in the next frame 86 return value; 87 } 88 }, 89 { 90 type: 'graph', 91 name: 'Clip', 92 precision: 2, 93 value: -13, 94 noText: true, 95 noHover: true, 96 noGradient: true, 97 callback: (value, item) => { 98 // console.log('Clip callback:', value); 99 100 const y = 0.5 + 0.5 * Math.sin(value++ / 9); 101 item.update(y); 102 103 // The return value is passed back in the next frame 104 return value; 105 } 106 }, 107 { 108 type: 'graph', 109 name: 'Sine', 110 precision: 2, 111 value: -13, 112 noText: true, 113 callback: (value, item) => { 114 // console.log('Sine callback:', value); 115 116 const y = 0.5 + 0.5 * Math.sin(value++ / 9) * 0.5; 117 item.update(y); 118 119 // The return value is passed back in the next frame 120 return value; 121 } 122 }, 123 { 124 type: 'graph', 125 name: 'Clip', 126 precision: 2, 127 value: -13, 128 noText: true, 129 callback: (value, item) => { 130 // console.log('Clip callback:', value); 131 132 const y = 0.5 + 0.5 * Math.sin(value++ / 9); 133 item.update(y); 134 135 // The return value is passed back in the next frame 136 return value; 137 } 138 }, 139 { 140 type: 'graph', 141 name: 'Ghost', 142 resolution: 85, 143 precision: 2, 144 value: -13, 145 ghost: true, 146 noText: true, 147 callback: (value, item) => { 148 // console.log('Ghost callback:', value); 149 150 const y = 0.5 + 0.5 * Math.sin(value++ / 9) * 0.5; 151 item.update(y); 152 153 // The return value is passed back in the next frame 154 return value; 155 } 156 }, 157 { 158 type: 'graph', 159 name: 'Array', 160 precision: 2, 161 lookupPrecision: 50, 162 value: Array.from({ length: 10 }, () => Math.random()) 163 }, 164 { 165 type: 'graph', 166 name: 'Random', 167 precision: 2, 168 lookupPrecision: 50, 169 value: performance.now() - 1000, 170 noText: true, 171 callback: (value, item) => { 172 // console.log('Random callback:', value); 173 174 const time = performance.now(); 175 176 // Update once per second 177 if (time - 1000 > value) { 178 value = time; 179 180 // Passing an array to `item.update()` will update the entire graph 181 const array = Array.from({ length: 10 }, () => Math.random()); 182 item.update(array); 183 } else { 184 item.update(); 185 } 186 187 // The return value is passed back in the next frame 188 return value; 189 } 190 }, 191 { 192 type: 'graph', 193 name: 'Graph', 194 precision: 2, 195 lookupPrecision: 50, 196 value: Array.from({ length: 10 }, () => Math.random()), 197 noText: true, 198 callback: (value, item) => { 199 // console.log('Graph callback:', value); 200 201 if (needsUpdate) { 202 needsUpdate = false; 203 204 // Passing an array to `item.update()` will update the entire graph 205 value = Array.from({ length: 10 }, () => Math.random()); 206 item.update(value); 207 } else { 208 item.update(); 209 } 210 211 // The return value is passed back in the next frame 212 return value; 213 } 214 }, 215 { 216 type: 'link', 217 value: 'Update', 218 callback: value => { 219 console.log('Update callback:', value); 220 221 needsUpdate = true; 222 } 223 } 224 ]; 225 226 items.forEach(data => { 227 ui.addPanel(new PanelItem(data)); 228 }); 229 230 // Call after adding to show the fps panel right away 231 // ui.animateIn(); 232 ui.header.info.animateIn(); 233 234 function animate() { 235 requestAnimationFrame(animate); 236 237 ui.update(); 238 } 239 240 requestAnimationFrame(animate); 241 </script> 242 </head> 243 <body> 244 </body> 245 </html>