Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Porting DOOM (1993) to WebAssembly

Porting DOOM (1993) to WebAssembly

Manuel Wieser

April 23, 2020
Tweet

More Decks by Manuel Wieser

Other Decks in Programming

Transcript

  1. Manuel Wieser, 2020-04-23
    Porting DOOM (1993) to WebAssembl
    y
    StahlstadT.js
    https://manu.ninja, @manuelwieser

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. Which DOOM source
    port should I use?

    View Slide

  6. View Slide

  7. Attempt #1
    Chocolate Doom

    View Slide

  8. Chocolate Doom
    Attempt #1
    • Chocolate Doom has a separate repository for its build system
    • git clone https://github.com/chocolate-doom/chocpkg.git
    • cd chocpkg

    ./chocpkg/chocpkg build chocolate-doom
    • It fetches and compiles all of its dependencies
    • chocolate-doom-3.0.0
    • SDL2_mixer-2.0.4
    • SDL2_net-2.0.1
    • SDL2-2.0.12

    View Slide

  9. Where do I get
    DOOM.wad?

    View Slide

  10. S
    egmentation
    F
    ault

    View Slide

  11. Attempt #2
    GZDoom

    View Slide

  12. GZDoom
    Attempt #2
    • brew install 

    jpeg-turbo fluid-synth openal-soft libsndfile mpg123
    • git clone https://github.com/coelckers/gzdoom

    View Slide

  13. GZDoom
    Attempt #2

    View Slide

  14. Problem #1
    How the hell does
    make work?

    View Slide

  15. make
    C/C++ build automation
    • ./configure

    make
    • make reads a Makefile on how to build a program.
    • This is easy, if you stay on the same platform … if not, there’s other tools like
    Autoconf and CMake … they build a build script. To do this they have their
    own configuration files …
    http://www.c-howto.de/tutorial/makefiles/

    View Slide

  16. CMake
    A cross-platform build system generator
    • mkdir build

    cd build

    cmake ..

    # cmake --build .
    • I was told there’s a GUI?
    • cmake-gui
    • ccmake
    • If you [C] Configure often enough, you will be able to [G] Generate …

    View Slide

  17. Problem #2
    ZMusic

    View Slide

  18. View Slide

  19. ZMusic
    F
    ighting the monolith, I guess?
    • cmake .. throws a Could NOT find ZMusic (missing:
    ZMUSIC_LIBRARIES ZMUSIC_INCLUDE_DIR) error.
    • I was able to build ZMusic on the first try
    • cmake --build . finally compiles GZDoom, which takes ages on my
    MacBook Air (13-inch, Mid 2013).
    • ./gzdoom.app/Contents/MacOS/gzdoom

    View Slide

  20. Emscripten
    Getting Started

    View Slide

  21. View Slide

  22. View Slide

  23. Emscripten
    C/C++ to asm.js/WebAssembl
    y
    • “Using Emscripten is, at a base level, fairly simple.”

    – Emscripten Tutorial
    • “Building large projects with Emscripten is very easy. Emscripten provides
    two simple scripts that configure your makefiles to use emcc as a drop-in
    replacement for gcc — in most cases the rest of your project’s current build
    system remains unchanged.”

    – Building Projects

    View Slide

  24. Emscripten
    C/C++ to asm.js/WebAssembl
    y
    • emcc -v
    • emconfigure ./configure

    emmake make
    • emcc project.bc -o project.html
    • emcc compiles the bytecode generated by make to JavaScript, 

    builds a project.html file as an output, 

    as well as an accompanying project.js launcher file, 

    and a project.wasm WebAssembly file.

    View Slide

  25. Problem #3
    What the hell is this thing
    building? It's not simple C
    code anymore ...

    View Slide

  26. Attempt #2,5
    Chocolate Doom
    and Emscripten?

    View Slide

  27. View Slide

  28. All of this fluff is
    nested and complicated ...

    View Slide

  29. Attempt #3
    SDLDoom

    View Slide

  30. View Slide

  31. SDLDoom
    Attempt #3
    • SDLDoom is a minimalistic port of Doom by Sam Lantinga
    • Released in 1998, its based on the code released by id Software in 1997
    • Simple DirectMedia Layer?
    • Sam Lantinga?
    • It’s a single folder with C code and a configure then make build process

    View Slide

  32. SDLDoom
    Attempt #3
    Fix compiler errors

    View Slide

  33. SDLDoom
    Attempt #3
    Live codinG

    View Slide

  34. SDLDoom
    Attempt #3
    1. Fixing compilation errors
    • You should hack this file for your BSD sockets layer
    • SDL_byteorder.h file not found
    • implicitly declaring library function alloca
    2. Fixing runtime errors
    • failure to dynamicAlloc
    • Game mode indeterminate.
    • Uncaught CopyOnLock is not supported for SDL_LockSurface
    • The game shows a black screen, then halts at the closing credits
    • wasm streaming compile failed
    3. Profit

    View Slide

  35. View Slide

  36. View Slide

  37. What I've learned
    Key takeaways
    • Stay humble, new stuff is always daunting
    • Stuff you wrote may not run in a couple of years/months
    • Front-End Developers are not the only people …
    • … dealing with platform-specific problems
    • … creating overly complex, nested build systems
    • Don’t try to tackle the complex problem first, start small

    View Slide

  38. What I've learned
    Key takeaways
    • Doom is still fun after 27 years
    • Porting C code to the web platform is not a one-click solution, 

    even with tools like Emscripten
    • Ports can be impressive work on their own
    • Sh*t about the Doom engine (not part of this talk)

    View Slide

  39. View Slide

  40. Manuel Wieser, 2020-04-23
    Porting DOOM (1993) to WebAssembl
    y
    Questions?
    StahlstadT.js
    https://manu.ninja, @manuelwieser

    View Slide