1 const canvas = document.querySelector('canvas')
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
10 const gl = canvas.getContext('webgl')
12 const shaderMap = new Map()
13 var currentShaderId = 0
14 function createShaderId() {
15 const id = currentShaderId
21 var decoder = new TextDecoder('utf-8')
23 function readUint32(buffer, addr) {
24 const view = new DataView(buffer)
25 return view.getUint32(addr, true)
30 glCreateShader: shaderType => {
31 const id = createShaderId()
32 const shader = gl.createShader(shaderType)
33 shaderMap.set(id, shader)
36 glShaderSource: (id, numSrcs, srcs, lens) => {
37 const shader = shaderMap.get(id)
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))
45 gl.shaderSource(shader, totalSource)
47 glCompileShader: a => gl.compileShader(shaderMap.get(a))
51 const sock = new WebSocket('ws://localhost:8889')
52 sock.onmessage = function (e) {
56 function instantiate(bytes) {
57 return WebAssembly.compile(bytes).
59 const inst = new WebAssembly.Instance(m, imports)
60 memory = inst.exports.memory
66 .then(response => response.arrayBuffer())
67 .then(bytes => instantiate(bytes))
68 .then(instance => console.log(instance.exports.foo()));