Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 22x 22x 22x 22x 22x 104x 104x 104x 20x 15x 15x 15x 15x 15x 15x 15x 104x 23x 104x 16x 16x 16x 16x 16x 104x 4x 3x 3x 2x 2x 2x 2x 2x 2x 2x 3x 104x 2x 1x 4x 4x 104x 9x 9x 104x 2x 1x | import Stats from "three/examples/jsm/libs/stats.module"
import { ThreeRendererService } from "./threeRenderer.service"
import { Injectable, isDevMode } from "@angular/core"
const ONE_SECOND = 1000
export interface CustomPanel {
panel: Stats.Panel
maxHeight: number
}
@Injectable({ providedIn: "root" })
export class ThreeStatsService {
stats: Stats
trianglesPanel: CustomPanel
glCallsPanel: CustomPanel
geometryMemoryPanel: CustomPanel
textureMemoryPanel: CustomPanel
prevTime: number
isDevelopmentMode = isDevMode()
constructor(private threeRendererService: ThreeRendererService) {}
init = (canvasElement: Element) => {
if (this.isDevelopmentMode) {
this.stats = new Stats()
this.stats.dom.style.position = "absolute"
this.stats.dom.style.left = "0"
this.stats.dom.style.top = "0"
canvasElement.append(this.stats.dom)
this.generateStatPanels()
this.prevTime = this.getTimeFunctor().now()
}
}
private getTimeFunctor = () => {
return typeof performance === "undefined" ? Date : performance
}
private generateStatPanels = () => {
this.trianglesPanel = { panel: this.stats.addPanel(new Stats.Panel("triangles", "#ff8", "#221")), maxHeight: 0 }
this.glCallsPanel = { panel: this.stats.addPanel(new Stats.Panel("calls", "#f8f", "#212")), maxHeight: 0 }
this.geometryMemoryPanel = { panel: this.stats.addPanel(new Stats.Panel("geo. mem", "#f08", "#221")), maxHeight: 0 }
this.textureMemoryPanel = { panel: this.stats.addPanel(new Stats.Panel("tex. mem", "#0f8", "#221")), maxHeight: 0 }
this.stats.showPanel(3)
}
updateStats = () => {
if (this.isDevelopmentMode) {
const time = this.getTimeFunctor().now()
if (time >= this.prevTime + ONE_SECOND) {
this.prevTime = time
const webGLInfo = this.threeRendererService.getInfo()
const threeJsInfo = this.threeRendererService.getMemoryInfo()
this.processPanel(this.trianglesPanel, webGLInfo.triangles)
this.processPanel(this.glCallsPanel, webGLInfo.calls)
this.processPanel(this.geometryMemoryPanel, threeJsInfo.geometries)
this.processPanel(this.textureMemoryPanel, threeJsInfo.textures)
}
this.stats.update()
}
}
resetPanels = () => {
if (this.isDevelopmentMode) {
for (const panel of [this.trianglesPanel, this.glCallsPanel, this.geometryMemoryPanel, this.textureMemoryPanel]) {
if (panel !== undefined) {
panel.maxHeight = 0
}
}
}
}
private processPanel = (customPanel: CustomPanel, value: number) => {
customPanel.maxHeight = Math.max(customPanel.maxHeight, value)
customPanel.panel.update(value, customPanel.maxHeight * 1.3)
}
destroy = () => {
if (this.isDevelopmentMode) {
this.stats.dom.remove()
}
}
}
|