-
-
Notifications
You must be signed in to change notification settings - Fork 116
/
PerfMonitor.svelte
76 lines (67 loc) · 2.22 KB
/
PerfMonitor.svelte
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
<script lang="ts">
import { useStage, useTask, useThrelte, watch } from '@threlte/core'
import { ThreePerf } from 'three-perf'
import type { PerfMonitorProps } from './PerfMonitor'
import { onDestroy } from 'svelte'
import { writable } from 'svelte/store'
type $$Props = PerfMonitorProps
type $$PropsWithDefaults = Required<$$Props>
export let domElement: $$PropsWithDefaults['domElement'] = document.body
export let logsPerSecond: $$PropsWithDefaults['logsPerSecond'] = 10
export let showGraph: $$PropsWithDefaults['showGraph'] = true
export let memory: $$PropsWithDefaults['memory'] = true
export let enabled: $$PropsWithDefaults['enabled'] = true
export let visible: $$PropsWithDefaults['visible'] = true
export let actionToCallUI: $$PropsWithDefaults['actionToCallUI'] = ''
export let guiVisible: $$PropsWithDefaults['guiVisible'] = false
export let backgroundOpacity: $$PropsWithDefaults['backgroundOpacity'] = 0.7
export let scale: $$PropsWithDefaults['scale'] = 1
export let anchorX: $$PropsWithDefaults['anchorX'] = 'left'
export let anchorY: $$PropsWithDefaults['anchorY'] = 'top'
const { renderer, renderStage, mainStage } = useThrelte()
let perf: ThreePerf
// Has to be fully re-initialized if dom element changes
const domElementStore = writable<typeof domElement>(domElement)
$: domElementStore.set(domElement)
watch([domElementStore], ([domElement]) => {
if (perf) perf.dispose()
perf = new ThreePerf({
domElement: domElement || document.body,
renderer: renderer
})
})
$: perf.logsPerSecond = logsPerSecond
$: perf.showGraph = showGraph
$: perf.memory = memory
$: perf.enabled = enabled
$: perf.visible = visible
$: perf.actionToCallUI = actionToCallUI
$: perf.guiVisible = guiVisible
$: perf.backgroundOpacity = backgroundOpacity
$: perf.scale = scale
$: perf.anchorX = anchorX
$: perf.anchorY = anchorY
useTask(
() => {
perf.begin()
},
{
stage: useStage('monitor-begin', {
before: mainStage
})
}
)
useTask(
() => {
perf.end()
},
{
stage: useStage('monitor-end', {
after: renderStage
})
}
)
onDestroy(() => {
if (perf) perf.dispose()
})
</script>