main.js

   1 const canvas = document.querySelector('canvas')
   2
   3 // hidpi
   4 const width = canvas.width, height = canvas.height
   5 canvas.style.width = width + 'px'
   6 canvas.style.height = height + 'px'
   7 canvas.width = width * window.devicePixelRatio
   8 canvas.height = height * window.devicePixelRatio
   9
  10 const gl = canvas.getContext('webgl')
  11
  12 const shaderMap = new Map()
  13 var currentShaderId = 0
  14 function createShaderId() {
  15         const id = currentShaderId
  16         currentShaderId += 1
  17         return id
  18 }
  19
  20 var memory
  21 var decoder = new TextDecoder('utf-8')
  22
  23 function readUint32(buffer, addr) {
  24         const view = new DataView(buffer)
  25         return view.getUint32(addr, true)
  26 }
  27
  28 const imports = {
  29         env: {
  30                 glCreateShader: shaderType => {
  31                         const id = createShaderId()
  32                         const shader = gl.createShader(shaderType)
  33                         shaderMap.set(id, shader)
  34                         return id
  35                 },
  36                 glShaderSource: (id, numSrcs, srcs, lens) => {
  37                         const shader = shaderMap.get(id)
  38                         var totalSource = ''
  39                         for (let i = 0; i < numSrcs; i++) {
  40                                 const addr = srcs + i * 4
  41                                 const src = readUint32(memory.buffer, addr)
  42                                 const len = readUint32(memory.buffer, lens + i * 4)
  43                                 totalSource += decoder.decode(memory.buffer.slice(src, src + len))
  44                         }
  45                         gl.shaderSource(shader, totalSource)
  46                 },
  47                 glCompileShader: a => gl.compileShader(shaderMap.get(a))
  48         }
  49 }
  50
  51 const sock = new WebSocket('ws://localhost:8889')
  52 sock.onmessage = function (e) {
  53         console.log(e.data)
  54 }
  55
  56 function instantiate(bytes) {
  57   return WebAssembly.compile(bytes).
  58                 then(m => {
  59                         const inst = new WebAssembly.Instance(m, imports)
  60                         memory = inst.exports.memory
  61                         return inst
  62                 });
  63 }
  64
  65 fetch('test.wasm')
  66         .then(response => response.arrayBuffer())
  67         .then(bytes => instantiate(bytes))
  68         .then(instance => console.log(instance.exports.foo()));