0.1.1 • Published 11 months ago
wgs-runtime-wgpu v0.1.1
Wgs Runtime Wgpu
wgs-runtime-wgpu is a runtime for running wgs file for Web environment.
Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="pause">Pause</button>
<input id="upload" type="file" accept=".wgs" />
<canvas id="canvas"></canvas>
<script type="module">
import init, { Runtime, setup } from 'wgs-runtime-wgpu'
async function main() {
await init()
const canvas = document.getElementById('canvas')
const runtime = await setup(canvas)
canvas.addEventListener('mousedown', () => {
runtime.update_mouse_press()
})
canvas.addEventListener('mousemove', (event) => {
runtime.update_cursor(event.offsetX, event.offsetY)
})
canvas.addEventListener('mouseup', () => {
runtime.update_mouse_release()
})
canvas.addEventListener('resize', () => {
runtime.resize(canvas.width, canvas.height)
})
const input = document.getElementById('upload')
input.addEventListener('change', async () => {
if (input.files.length > 0) {
const file = input.files[0]
const reader = new FileReader()
reader.addEventListener('load', (event) => {
const buffer = event.target.result
const wgsData = new Uint8Array(buffer)
runtime.load(wgsData)
})
reader.readAsArrayBuffer(file)
}
})
let isPause = false
const button = document.getElementById('pause')
button.addEventListener('click', () => {
isPause = !isPause
if (isPause) {
runtime.pause()
} else {
runtime.resume()
}
button.innerText = isPause ? 'Resume' : 'Pause'
})
function loop() {
runtime.render()
requestAnimationFrame(loop)
}
loop()
}
main()
</script>
</body>
</html>