* _tick * This is a Pixi.Ticker listener that runs in a `requestAnimationFrame` game loop. * We can use this to determine the true frame rate that we're running at, * and schedule work to happen at opportune times (within animation frame boundaries)
()
| 223 | * and schedule work to happen at opportune times (within animation frame boundaries) |
| 224 | */ |
| 225 | _tick() { |
| 226 | if (!this._started || this._paused) return; |
| 227 | |
| 228 | const ticker = this.ticker; |
| 229 | // console.log('FPS=' + ticker.FPS.toFixed(1)); |
| 230 | |
| 231 | // For now, we will perform either APP (Rapid prepares scene graph) or DRAW (Pixi render) during a tick. |
| 232 | // GPU work will happen in its own thread, and we don't have direct insight into its timing. |
| 233 | // For reference: |
| 234 | // 16.7ms = 60fps |
| 235 | // 33.3ms = 30fps |
| 236 | |
| 237 | // Process a pending DRAW before a pending APP. |
| 238 | // This is so pending APP does not sneak in front of DRAW causing a race condition. |
| 239 | if (this._drawPending) { |
| 240 | const frame = this._frame; |
| 241 | const drawStart = `draw-${frame}-start`; |
| 242 | const drawEnd = `draw-${frame}-end`; |
| 243 | window.performance.mark(drawStart); |
| 244 | |
| 245 | this._draw(); // note that DRAW increments the frame counter |
| 246 | |
| 247 | window.performance.mark(drawEnd); |
| 248 | window.performance.measure(`draw-${frame}`, drawStart, drawEnd); |
| 249 | // const measureDraw = window.performance.getEntriesByName(`draw-${frame}`, 'measure')[0]; |
| 250 | // const durationDraw = measureDraw.duration.toFixed(1); |
| 251 | // console.log(`draw-${frame} : ${durationDraw} ms`); |
| 252 | return; |
| 253 | } |
| 254 | |
| 255 | // Perform any updates to the scene's transform.. |
| 256 | this._tform(); |
| 257 | |
| 258 | // shader experiment - always render |
| 259 | // this._appPending = true; |
| 260 | |
| 261 | // Do APP to prepare the next frame.. |
| 262 | if (this._appPending) { |
| 263 | this._timeToNextRender -= ticker.deltaMS; |
| 264 | |
| 265 | if (this._timeToNextRender >= 0) { // render later |
| 266 | return; |
| 267 | |
| 268 | } else { // render now |
| 269 | const frame = this._frame; |
| 270 | const appStart = `app-${frame}-start`; |
| 271 | const appEnd = `app-${frame}-end`; |
| 272 | window.performance.mark(appStart); |
| 273 | |
| 274 | this._app(); |
| 275 | |
| 276 | window.performance.mark(appEnd); |
| 277 | window.performance.measure(`app-${frame}`, appStart, appEnd); |
| 278 | // const measureApp = window.performance.getEntriesByName(`app-${frame}`, 'measure')[0]; |
| 279 | // const durationApp = measureApp.duration.toFixed(1); |
| 280 | // console.log(`app-${frame} : ${durationApp} ms`); |
| 281 | return; |
| 282 | } |