InfiniSim icon indicating copy to clipboard operation
InfiniSim copied to clipboard

Build with Emscripten for WebAssembly

Open NeroBurner opened this issue 4 years ago • 2 comments

InfiniTime PRs fixing Emscripten compile errors:

  • https://github.com/InfiniTimeOrg/InfiniTime/pull/1003
  • https://github.com/InfiniTimeOrg/InfiniTime/pull/1009

Need a patched SDL2 with fixes for use with -s USE_PTHREAD

  • https://github.com/libsdl-org/SDL/pull/5365

I did modify the downloaded emsdk/upstream/emscripten/tools/ports/sdl2.py file to get the SDL2 patched version

import os

TAG = 'emscripten_pthread_fix'
- HASH = '67e1abe1183b04836b35d724fd495c83c9559b4530d4a5c9bcc89648af0ac7cc51c02f7055a1664fe5f5f90953d22a6c431fa8bc5cdd77c94a97f107c47e2d62'
+ HASH = 'b14f279aed10ec3acaf2cece5917ed62ff77a933ba9f03ea87484214b7b961f19f01acffab48ef3a63ec654765f159ba70a3ef638d4c548f88555bd6b1f6513e'
SUBDIR = 'SDL-' + TAG


def needed(settings):
  return settings.USE_SDL == 2


def get_lib_name(settings):
  return 'libSDL2' + ('-mt' if settings.USE_PTHREADS else '') + '.a'


def get(ports, settings, shared):
  # get the port
-  ports.fetch_project('sdl2', 'https://github.com/libsdl-org/SDL/archive/' + TAG + '.zip', SUBDIR, sha512hash=HASH)
+  ports.fetch_project('sdl2', 'https://github.com/NeroBurner/SDL/archive/refs/heads/emscripten_pthread_fix.zip', SUBDIR, sha512hash=HASH)

To build I used the following script named build_emscripten.sh :

#!/bin/bash
set -ex

SCRIPT_DIR=$(dirname "$(realpath "$0")")
source "/home/nero/repos/pinetime/emsdk/emsdk_env.sh"
emcmake cmake -S "${SCRIPT_DIR}" -B "${SCRIPT_DIR}/_build_em" -DCMAKE_BUILD_TYPE=Release
cmake --build "${SCRIPT_DIR}/_build_em" -j4

The created infinisim.html (and wasm) file can be provided to the browser using emrun _build/infinisim.html

or use minimal python server with the required headers set start_python_cors_server.py

#!/usr/bin/env python3
# from: https://stackoverflow.com/questions/21956683/enable-access-control-on-simple-http-server
from http.server import HTTPServer, SimpleHTTPRequestHandler, test
import sys

class CORSRequestHandler (SimpleHTTPRequestHandler):
    def end_headers (self):
        self.send_header('Access-Control-Allow-Origin', '*')
        self.send_header('Cross-Origin-Opener-Policy', 'same-origin')
        self.send_header('Cross-Origin-Embedder-Policy', 'require-corp')
        SimpleHTTPRequestHandler.end_headers(self)

if __name__ == '__main__':
    test(CORSRequestHandler, HTTPServer, port=int(sys.argv[1]) if len(sys.argv) > 1 else 8000)

And with all that InfiniSim in your browser! :tada:

InfiniSim wasm working

edit: update hash to branch changes

NeroBurner avatar Feb 24 '22 22:02 NeroBurner

PR https://github.com/libsdl-org/SDL/pull/5365 got merged :tada: we only need to update the tag and the sha512 hash ( no need to modify the ports.fetch_project url anymore :tada:

TAG = 'ea7d5307acfb1daf9af6104b60b75114b15bcd27' 
HASH = 'b7d58124f0d1145f23338abfdb6aa07855ac74ed80b3a5b613d23b4930c84d04d1794a62aab2ca2680ba369128ee2028ea51236fab4aaf70556036172fa59e6a' 
SUBDIR = 'SDL-' + TAG 
 
 
def needed(settings): 
  return settings.USE_SDL == 2 
 
 
def get_lib_name(settings): 
  return 'libSDL2' + ('-mt' if settings.USE_PTHREADS else '') + '.a' 
 
 
def get(ports, settings, shared): 
  # get the port 
  ports.fetch_project('sdl2', 'https://github.com/libsdl-org/SDL/archive/' + TAG + '.zip', SUBDIR, sha512hash=HASH)

To do that execute the following sed script in the emsdk folder

sed -i -e "s/^TAG =.*/TAG = 'ea7d5307acfb1daf9af6104b60b75114b15bcd27'/" -e "s/HASH =.*/HASH = 'b7d58124f0d1145f23338abfdb6aa07855ac74ed80b3a5b613d23b4930c84d04d1794a62aab2ca2680ba369128ee2028ea51236fab4aaf70556036172fa59e6a'/" upstream/emscripten/tools/ports/sdl2.py

NeroBurner avatar Mar 31 '22 18:03 NeroBurner