wgs-runtime-wgpu
TypeScript icon, indicating that this package has built-in type declarations

0.1.1 • Public • Published

Wgs Runtime Wgpu

npm version

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>

Package Sidebar

Install

npm i wgs-runtime-wgpu

Weekly Downloads

1

Version

0.1.1

License

MIT

Unpacked Size

2.06 MB

Total Files

6

Last publish

Collaborators

  • zoron