diff --git a/Building.md b/Building.md index ece1ac9..c03d9d0 100644 --- a/Building.md +++ b/Building.md @@ -278,6 +278,32 @@ cp /usr/x86_64-w64-mingw32/bin/SDL*.dll bin/ SDL2_ttf requires libfreetype, you can get its DLL here: https://github.com/ubawurinna/freetype-windows-binaries +# WebAssembly + +There is some **experimental** support for a WebAssembly build of Sketchy Maze +since the very early days. Early on, the game "basically worked" but performance +could be awful: playing levels was OK but clicking and dragging in the editor +would cause your browser to freeze. Then for a time, the game wouldn't even get +that far. Recently (December 2023), WASM performance seems much better but there +are strange graphical glitches: + +* On the title screen, the example levels in the background load OK and their + doodads will wander around and performance seems OK. +* But during Play Mode, only the menu bar draws but nothing else on the screen. +* In the Level Editor, the entire screen is white BUT tooltips will appear and + the menu bar can be clicked on (blindly) and the drop-down menus do appear. + Some popups like the Palette Editor can be invoked and draw to varying degrees + of success. + +Some tips to get a WASM build to work: + +* For fonts: symlink it so that ./wasm/fonts points to ./assets/fonts. +* You may need an updated wasm_exec.js shim from Go. On Fedora, + `dnf install golang-misc` and `cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .` + from the wasm/ folder. +* Run `make wasm` to build the WASM binary and `make wasm-serve` to run a simple + Go web server to serve it from. + # Old Docs ## Build Tags diff --git a/pkg/fps.go b/pkg/fps.go index a1be68f..75460d1 100644 --- a/pkg/fps.go +++ b/pkg/fps.go @@ -8,9 +8,9 @@ import ( "git.kirsle.net/SketchyMaze/doodle/pkg/balance" "git.kirsle.net/SketchyMaze/doodle/pkg/collision" "git.kirsle.net/SketchyMaze/doodle/pkg/drawtool" + "git.kirsle.net/SketchyMaze/doodle/pkg/native" "git.kirsle.net/SketchyMaze/doodle/pkg/uix" "git.kirsle.net/go/render" - "git.kirsle.net/go/render/sdl" "git.kirsle.net/go/ui" ) @@ -65,10 +65,7 @@ func (d *Doodle) DrawDebugOverlay() { } // Get the size of cached SDL2 textures at the render engine level. - var texCount = "n/a" - if sdl, ok := d.Engine.(*sdl.Renderer); ok { - texCount = fmt.Sprintf("%d", sdl.CountTextures()) - } + var texCount = native.CountTextures(d.Engine) var ( darken = balance.DebugStrokeDarken diff --git a/pkg/level/giant_screenshot/regular_screenshot.go b/pkg/level/giant_screenshot/regular_screenshot.go index 3ebcbd8..796ead9 100644 --- a/pkg/level/giant_screenshot/regular_screenshot.go +++ b/pkg/level/giant_screenshot/regular_screenshot.go @@ -8,6 +8,7 @@ import ( "image/png" "os" "path/filepath" + "runtime" "time" "git.kirsle.net/SketchyMaze/doodle/pkg/balance" @@ -21,6 +22,11 @@ import ( // CroppedScreenshot returns a rendered RGBA image of the level. func CroppedScreenshot(lvl *level.Level, viewport render.Rect) (image.Image, error) { + // Not for WASM for now. + if runtime.GOOS == "js" { + return nil, errors.New("screenshots not yet supported for WASM") + } + // Lock this to one user at a time. if locked { return nil, errors.New("a screenshot is still being processed; try later...") diff --git a/pkg/native/engine_sdl.go b/pkg/native/engine_sdl.go index eede110..404592c 100644 --- a/pkg/native/engine_sdl.go +++ b/pkg/native/engine_sdl.go @@ -5,6 +5,7 @@ package native import ( "errors" + "fmt" "image" "git.kirsle.net/SketchyMaze/doodle/pkg/shmem" @@ -33,6 +34,15 @@ func CopyToClipboard(text string) error { return errors.New("not supported") } +// CountTextures returns the count of loaded SDL2 textures, for the F3 debug overlay, or "n/a" +func CountTextures(e render.Engine) string { + var texCount = "n/a" + if sdl, ok := e.(*sdl.Renderer); ok { + texCount = fmt.Sprintf("%d", sdl.CountTextures()) + } + return texCount +} + /* TextToImage takes an SDL2_TTF texture and makes it into a Go image. diff --git a/pkg/native/engine_wasm.go b/pkg/native/engine_wasm.go index 8379a2d..ea196c6 100644 --- a/pkg/native/engine_wasm.go +++ b/pkg/native/engine_wasm.go @@ -4,6 +4,7 @@ package native import ( + "errors" "image" "git.kirsle.net/go/render" @@ -20,3 +21,7 @@ func TextToImage(e render.Engine, text render.Text) (image.Image, error) { func CopyToClipboard(text string) error { return errors.New("not supported on WASM") } + +func CountTextures(e render.Engine) string { + return "n/a" +} diff --git a/wasm/main_wasm.go b/wasm/main_wasm.go index c6d0320..4886b5a 100644 --- a/wasm/main_wasm.go +++ b/wasm/main_wasm.go @@ -1,3 +1,4 @@ +//go:build js && wasm // +build js,wasm package main @@ -38,7 +39,7 @@ func main() { game.SetWindowSize(w, h) // game.Goto(&doodle.GUITestScene{}) - game.Goto(&doodle.EditorScene{}) + // game.Goto(&doodle.EditorScene{}) game.Run() } diff --git a/wasm/server.go b/wasm/server.go index 919b57a..0c31b9e 100644 --- a/wasm/server.go +++ b/wasm/server.go @@ -1,3 +1,4 @@ +//go:build disabled // +build disabled package main @@ -9,15 +10,13 @@ import ( "net/http" "os/exec" "path/filepath" - - "github.com/fsnotify/fsnotify" ) func main() { const wasm = "/doodle.wasm" // Watch the dev directory for changes. - go watchChanges() + // go watchChanges() http.Handle("/", http.FileServer(http.Dir("."))) http.HandleFunc(wasm, func(w http.ResponseWriter, r *http.Request) { @@ -41,6 +40,7 @@ func onChange() { // Watch the Doodle source tree for changes to Go files and rebuild // the wasm binary automatically. +/* func watchChanges() { watcher, err := fsnotify.NewWatcher() if err != nil { @@ -86,6 +86,7 @@ func watchChanges() { } <-done } +*/ // Crawl the filesystem and return paths with Go files. func crawlDirectory(root string) []string { diff --git a/wasm/wasm_exec.js b/wasm/wasm_exec.js index 8501ae7..bc6f210 100644 --- a/wasm/wasm_exec.js +++ b/wasm/wasm_exec.js @@ -2,53 +2,25 @@ // Use of this source code is governed by a BSD-style // license that can be found in the LICENSE file. +"use strict"; + (() => { - // Map multiple JavaScript environments to a single common API, - // preferring web standards over Node.js API. - // - // Environments considered: - // - Browsers - // - Node.js - // - Electron - // - Parcel - - if (typeof global !== "undefined") { - // global already exists - } else if (typeof window !== "undefined") { - window.global = window; - } else if (typeof self !== "undefined") { - self.global = self; - } else { - throw new Error("cannot export Go (neither global, window nor self is defined)"); - } - - if (!global.require && typeof require !== "undefined") { - global.require = require; - } - - if (!global.fs && global.require) { - const fs = require("fs"); - if (Object.keys(fs) !== 0) { - global.fs = fs; - } - } - const enosys = () => { const err = new Error("not implemented"); err.code = "ENOSYS"; return err; }; - if (!global.fs) { + if (!globalThis.fs) { let outputBuf = ""; - global.fs = { + globalThis.fs = { constants: { O_WRONLY: -1, O_RDWR: -1, O_CREAT: -1, O_TRUNC: -1, O_APPEND: -1, O_EXCL: -1 }, // unused writeSync(fd, buf) { outputBuf += decoder.decode(buf); const nl = outputBuf.lastIndexOf("\n"); if (nl != -1) { - console.log(outputBuf.substr(0, nl)); - outputBuf = outputBuf.substr(nl + 1); + console.log(outputBuf.substring(0, nl)); + outputBuf = outputBuf.substring(nl + 1); } return buf.length; }, @@ -86,8 +58,8 @@ }; } - if (!global.process) { - global.process = { + if (!globalThis.process) { + globalThis.process = { getuid() { return -1; }, getgid() { return -1; }, geteuid() { return -1; }, @@ -101,38 +73,26 @@ } } - if (!global.crypto) { - const nodeCrypto = require("crypto"); - global.crypto = { - getRandomValues(b) { - nodeCrypto.randomFillSync(b); - }, - }; + if (!globalThis.crypto) { + throw new Error("globalThis.crypto is not available, polyfill required (crypto.getRandomValues only)"); } - if (!global.performance) { - global.performance = { - now() { - const [sec, nsec] = process.hrtime(); - return sec * 1000 + nsec / 1000000; - }, - }; + if (!globalThis.performance) { + throw new Error("globalThis.performance is not available, polyfill required (performance.now only)"); } - if (!global.TextEncoder) { - global.TextEncoder = require("util").TextEncoder; + if (!globalThis.TextEncoder) { + throw new Error("globalThis.TextEncoder is not available, polyfill required"); } - if (!global.TextDecoder) { - global.TextDecoder = require("util").TextDecoder; + if (!globalThis.TextDecoder) { + throw new Error("globalThis.TextDecoder is not available, polyfill required"); } - // End of polyfills for common API. - const encoder = new TextEncoder("utf-8"); const decoder = new TextDecoder("utf-8"); - global.Go = class { + globalThis.Go = class { constructor() { this.argv = ["js"]; this.env = {}; @@ -153,6 +113,10 @@ this.mem.setUint32(addr + 4, Math.floor(v / 4294967296), true); } + const setInt32 = (addr, v) => { + this.mem.setUint32(addr + 0, v, true); + } + const getInt64 = (addr) => { const low = this.mem.getUint32(addr + 0, true); const high = this.mem.getInt32(addr + 4, true); @@ -246,7 +210,10 @@ const timeOrigin = Date.now() - performance.now(); this.importObject = { - go: { + _gotest: { + add: (a, b) => a + b, + }, + gojs: { // Go's SP does not change as long as no Go code is running. Some operations (e.g. calls, getters and setters) // may synchronously trigger a Go event handler. This makes Go code get executed in the middle of the imported // function. A goroutine can switch to a new stack if the current stack is too small (see morestack function). @@ -254,6 +221,7 @@ // func wasmExit(code int32) "runtime.wasmExit": (sp) => { + sp >>>= 0; const code = this.mem.getInt32(sp + 8, true); this.exited = true; delete this._inst; @@ -266,6 +234,7 @@ // func wasmWrite(fd uintptr, p unsafe.Pointer, n int32) "runtime.wasmWrite": (sp) => { + sp >>>= 0; const fd = getInt64(sp + 8); const p = getInt64(sp + 16); const n = this.mem.getInt32(sp + 24, true); @@ -274,16 +243,19 @@ // func resetMemoryDataView() "runtime.resetMemoryDataView": (sp) => { + sp >>>= 0; this.mem = new DataView(this._inst.exports.mem.buffer); }, // func nanotime1() int64 "runtime.nanotime1": (sp) => { + sp >>>= 0; setInt64(sp + 8, (timeOrigin + performance.now()) * 1000000); }, - // func walltime1() (sec int64, nsec int32) - "runtime.walltime1": (sp) => { + // func walltime() (sec int64, nsec int32) + "runtime.walltime": (sp) => { + sp >>>= 0; const msec = (new Date).getTime(); setInt64(sp + 8, msec / 1000); this.mem.setInt32(sp + 16, (msec % 1000) * 1000000, true); @@ -291,6 +263,7 @@ // func scheduleTimeoutEvent(delay int64) int32 "runtime.scheduleTimeoutEvent": (sp) => { + sp >>>= 0; const id = this._nextCallbackTimeoutID; this._nextCallbackTimeoutID++; this._scheduledTimeouts.set(id, setTimeout( @@ -303,13 +276,14 @@ this._resume(); } }, - getInt64(sp + 8) + 1, // setTimeout has been seen to fire up to 1 millisecond early + getInt64(sp + 8), )); this.mem.setInt32(sp + 16, id, true); }, // func clearTimeoutEvent(id int32) "runtime.clearTimeoutEvent": (sp) => { + sp >>>= 0; const id = this.mem.getInt32(sp + 8, true); clearTimeout(this._scheduledTimeouts.get(id)); this._scheduledTimeouts.delete(id); @@ -317,11 +291,13 @@ // func getRandomData(r []byte) "runtime.getRandomData": (sp) => { + sp >>>= 0; crypto.getRandomValues(loadSlice(sp + 8)); }, // func finalizeRef(v ref) "syscall/js.finalizeRef": (sp) => { + sp >>>= 0; const id = this.mem.getUint32(sp + 8, true); this._goRefCounts[id]--; if (this._goRefCounts[id] === 0) { @@ -334,47 +310,55 @@ // func stringVal(value string) ref "syscall/js.stringVal": (sp) => { + sp >>>= 0; storeValue(sp + 24, loadString(sp + 8)); }, // func valueGet(v ref, p string) ref "syscall/js.valueGet": (sp) => { + sp >>>= 0; const result = Reflect.get(loadValue(sp + 8), loadString(sp + 16)); - sp = this._inst.exports.getsp(); // see comment above + sp = this._inst.exports.getsp() >>> 0; // see comment above storeValue(sp + 32, result); }, // func valueSet(v ref, p string, x ref) "syscall/js.valueSet": (sp) => { + sp >>>= 0; Reflect.set(loadValue(sp + 8), loadString(sp + 16), loadValue(sp + 32)); }, // func valueDelete(v ref, p string) "syscall/js.valueDelete": (sp) => { + sp >>>= 0; Reflect.deleteProperty(loadValue(sp + 8), loadString(sp + 16)); }, // func valueIndex(v ref, i int) ref "syscall/js.valueIndex": (sp) => { + sp >>>= 0; storeValue(sp + 24, Reflect.get(loadValue(sp + 8), getInt64(sp + 16))); }, // valueSetIndex(v ref, i int, x ref) "syscall/js.valueSetIndex": (sp) => { + sp >>>= 0; Reflect.set(loadValue(sp + 8), getInt64(sp + 16), loadValue(sp + 24)); }, // func valueCall(v ref, m string, args []ref) (ref, bool) "syscall/js.valueCall": (sp) => { + sp >>>= 0; try { const v = loadValue(sp + 8); const m = Reflect.get(v, loadString(sp + 16)); const args = loadSliceOfValues(sp + 32); const result = Reflect.apply(m, v, args); - sp = this._inst.exports.getsp(); // see comment above + sp = this._inst.exports.getsp() >>> 0; // see comment above storeValue(sp + 56, result); this.mem.setUint8(sp + 64, 1); } catch (err) { + sp = this._inst.exports.getsp() >>> 0; // see comment above storeValue(sp + 56, err); this.mem.setUint8(sp + 64, 0); } @@ -382,14 +366,16 @@ // func valueInvoke(v ref, args []ref) (ref, bool) "syscall/js.valueInvoke": (sp) => { + sp >>>= 0; try { const v = loadValue(sp + 8); const args = loadSliceOfValues(sp + 16); const result = Reflect.apply(v, undefined, args); - sp = this._inst.exports.getsp(); // see comment above + sp = this._inst.exports.getsp() >>> 0; // see comment above storeValue(sp + 40, result); this.mem.setUint8(sp + 48, 1); } catch (err) { + sp = this._inst.exports.getsp() >>> 0; // see comment above storeValue(sp + 40, err); this.mem.setUint8(sp + 48, 0); } @@ -397,14 +383,16 @@ // func valueNew(v ref, args []ref) (ref, bool) "syscall/js.valueNew": (sp) => { + sp >>>= 0; try { const v = loadValue(sp + 8); const args = loadSliceOfValues(sp + 16); const result = Reflect.construct(v, args); - sp = this._inst.exports.getsp(); // see comment above + sp = this._inst.exports.getsp() >>> 0; // see comment above storeValue(sp + 40, result); this.mem.setUint8(sp + 48, 1); } catch (err) { + sp = this._inst.exports.getsp() >>> 0; // see comment above storeValue(sp + 40, err); this.mem.setUint8(sp + 48, 0); } @@ -412,11 +400,13 @@ // func valueLength(v ref) int "syscall/js.valueLength": (sp) => { + sp >>>= 0; setInt64(sp + 16, parseInt(loadValue(sp + 8).length)); }, // valuePrepareString(v ref) (ref, int) "syscall/js.valuePrepareString": (sp) => { + sp >>>= 0; const str = encoder.encode(String(loadValue(sp + 8))); storeValue(sp + 16, str); setInt64(sp + 24, str.length); @@ -424,17 +414,20 @@ // valueLoadString(v ref, b []byte) "syscall/js.valueLoadString": (sp) => { + sp >>>= 0; const str = loadValue(sp + 8); loadSlice(sp + 16).set(str); }, // func valueInstanceOf(v ref, t ref) bool "syscall/js.valueInstanceOf": (sp) => { + sp >>>= 0; this.mem.setUint8(sp + 24, (loadValue(sp + 8) instanceof loadValue(sp + 16)) ? 1 : 0); }, // func copyBytesToGo(dst []byte, src ref) (int, bool) "syscall/js.copyBytesToGo": (sp) => { + sp >>>= 0; const dst = loadSlice(sp + 8); const src = loadValue(sp + 32); if (!(src instanceof Uint8Array || src instanceof Uint8ClampedArray)) { @@ -449,6 +442,7 @@ // func copyBytesToJS(dst ref, src []byte) (int, bool) "syscall/js.copyBytesToJS": (sp) => { + sp >>>= 0; const dst = loadValue(sp + 8); const src = loadSlice(sp + 16); if (!(dst instanceof Uint8Array || dst instanceof Uint8ClampedArray)) { @@ -469,6 +463,9 @@ } async run(instance) { + if (!(instance instanceof WebAssembly.Instance)) { + throw new Error("Go.run: WebAssembly.Instance expected"); + } this._inst = instance; this.mem = new DataView(this._inst.exports.mem.buffer); this._values = [ // JS values that Go currently has references to, indexed by reference id @@ -477,7 +474,7 @@ null, true, false, - global, + globalThis, this, ]; this._goRefCounts = new Array(this._values.length).fill(Infinity); // number of references that Go has to a JS value, indexed by reference id @@ -486,7 +483,7 @@ [null, 2], [true, 3], [false, 4], - [global, 5], + [globalThis, 5], [this, 6], ]); this._idPool = []; // unused ids that have been garbage collected @@ -527,6 +524,13 @@ offset += 8; }); + // The linker guarantees global data starts from at least wasmMinDataAddr. + // Keep in sync with cmd/link/internal/ld/data.go:wasmMinDataAddr. + const wasmMinDataAddr = 4096 + 8192; + if (offset >= wasmMinDataAddr) { + throw new Error("total length of command line and environment variables exceeds limit"); + } + this._inst.exports.run(argc, argv); if (this.exited) { this._resolveExitPromise(); @@ -554,35 +558,4 @@ }; } } - - if ( - global.require && - global.require.main === module && - global.process && - global.process.versions && - !global.process.versions.electron - ) { - if (process.argv.length < 3) { - console.error("usage: go_js_wasm_exec [wasm binary] [arguments]"); - process.exit(1); - } - - const go = new Go(); - go.argv = process.argv.slice(2); - go.env = Object.assign({ TMPDIR: require("os").tmpdir() }, process.env); - go.exit = process.exit; - WebAssembly.instantiate(fs.readFileSync(process.argv[2]), go.importObject).then((result) => { - process.on("exit", (code) => { // Node.js exits if no event handler is pending - if (code === 0 && !go.exited) { - // deadlock, make Go print error and stack traces - go._pendingEvent = { id: 0 }; - go._resume(); - } - }); - return go.run(result.instance); - }).catch((err) => { - console.error(err); - process.exit(1); - }); - } })();