4 ms·

Here are a couple of real-world examples, these are all written in C and some C++ and run across Linux, macOS, Windows, iOS, Android and in browsers from the sa

Here are a couple of real-world examples, these are all written in C and some C++ and run across Linux, macOS, Windows, iOS, Android and in browsers from the same code, the web is basically "just another target platform": Home computer emulators: https://floooh.github.io/tiny8bit/ https://floooh.github.io/tiny8bit/ CPU simulators for Z80 and 6502 (based on the netlists from visual6502.org): https://floooh.github.io/visualz80remix/ https://floooh.github.io/visualz80remix/ https://floooh.github.io/visual6502remix/ https://floooh.github.io/visual6502remix/ The shareware version of Doom: https://floooh.github.io/doom-sokol/ https://floooh.github.io/doom-sokol/ A Pacman clone in C: https://floooh.github.io/pacman.c/pacman.html https://floooh.github.io/pacman.c/pacman.html ...and the same in Zig: https://floooh.github.io/pacman.zig/pacman.html https://floooh.github.io/pacman.zig/pacman.html This is all relatively small hobby stuff written just by me, but there's nothing that would prevent scaling to bigger projects. Finally here are the examples for the cross-platform libraries this stuff is built on top: https://floooh.github.io/sokol-html5/ https://floooh.github.io/sokol-html5/ Also specifically about Photoshop: since PS is already a cross-platform application I would expect that they abstracted their UI layer enough to be portable to other UI frameworks without too much hassle. Hybrid WASM/JS applications are in fact a pretty good idea for some use cases (e.g. compile the core logic written in C/C++/Rust/Zig... to WASM, but implement the UI layer via HTML+CSS).

DonHopkins 3y ago
Here's something I'm working on right this moment, using ChatGPT to help generate emscripten embind wrappers for the MicropolisCore MicropolisEngine (based on the original SimCity game). The idea is to be able to make plugin zones and robots (like the monster or tornado or train) by subclassing with JavaScript! https://github.com/SimHacker/MicropolisCore/blob/main/src/MicropolisEngine/src/emscripten.cpp https://github.com/SimHacker/MicropolisCore/blob/main/src/Mi... //////////////////////////////////////////////////////////////////////// // This file uses emscripten's embind to bind C++ classes, // C structures, functions, enums, and contents into JavaScript, // so you can even subclass C++ classes in JavaScript, // for implementing plugins and user interfaces. // // Wrapping the entire Micropolis class from the Micropolis (open-source // version of SimCity) code into Emscripten for JavaScript access is a // large and complex task, mainly due to the size and complexity of the // class. The class encompasses almost every aspect of the simulation, // including map generation, simulation logic, user interface // interactions, and more. // // Strategy for Wrapping // // 1. Core Simulation Logic: Focus on the core simulation aspects, such // as the methods to run the simulation, update game states, and handle // user inputs (like building tools and disaster simulations). This is // crucial for any gameplay functionality. // // 2. Memory and Performance Considerations: JavaScript and WebAssembly // run in a browser context, which can have memory limitations and // performance constraints. Carefully manage memory allocation, // especially when dealing with the game's map and various buffers. // // 3. Direct Memory Access: Provide JavaScript access to critical game // data structures like the map buffer for efficient reading and // writing. This can be done using Emscripten's heap access functions // (HEAP8, HEAP16, HEAP32, etc.). // // 4. User Interface and Rendering: This part might not be necessary to // wrap, as modern web technologies (HTML, CSS, WebGL) can be used for // UI. However, providing some hooks for game state (like score, budget, // etc.) to JavaScript might be helpful. // // 5. Callbacks and Interactivity: Ensure that key game events and // callbacks are exposed to JavaScript, allowing for interactive and // responsive gameplay. // // 6. Optimizations: Where possible, optimize C++ code for WebAssembly, // focusing on critical paths in the simulation loop. // // Decisions and Explanations // // - Excluded Elements: // // - Low-level rendering or platform-specific code, as this can be // handled more efficiently with web technologies. // // - Parts of the code that handle file I/O directly, as file access // in a web context is typically handled differently (e.g., using // browser APIs or server-side support). // // - Any networking or multiplayer code, as web-based // implementations would differ significantly from desktop-based // network code. // // - Included Elements: // // - Core game mechanics, such as map generation, zone simulation // (residential, commercial, industrial), disaster simulation, and // basic utilities. // // - Game state management, including budgeting, scoring, and city // evaluation. // // - Direct memory access to critical structures like the map // buffer, allowing efficient manipulation from JavaScript. // // - Essential callbacks and event handling mechanisms to ensure // interactivity. // // Conclusion // // Given the complexity and size of the Micropolis class, wrapping the // entire class directly is impractical. However, focusing on key areas // essential for gameplay and providing efficient interfaces for // critical data structures can create a functional and interactive city // simulation in a web context. Further optimizations and adjustments // would likely be needed based on testing and specific requirements of // the web implementation.

DonHopkins 3y ago

Here's something I'm working on right this moment, using ChatGPT to help generate emscripten embind wrappers for the MicropolisCore MicropolisEngine (based on the original SimCity game). The idea is to be able to make plugin zones and robots (like the monster or tornado or train) by subclassing with JavaScript! https://github.com/SimHacker/MicropolisCore/blob/main/src/MicropolisEngine/src/emscripten.cpp https://github.com/SimHacker/MicropolisCore/blob/main/src/Mi... //////////////////////////////////////////////////////////////////////// // This file uses emscripten's embind to bind C++ classes, // C structures, functions, enums, and contents into JavaScript, // so you can even subclass C++ classes in JavaScript, // for implementing plugins and user interfaces. // // Wrapping the entire Micropolis class from the Micropolis (open-source // version of SimCity) code into Emscripten for JavaScript access is a // large and complex task, mainly due to the size and complexity of the // class. The class encompasses almost every aspect of the simulation, // including map generation, simulation logic, user interface // interactions, and more. // // Strategy for Wrapping // // 1. Core Simulation Logic: Focus on the core simulation aspects, such // as the methods to run the simulation, update game states, and handle // user inputs (like building tools and disaster simulations). This is // crucial for any gameplay functionality. // // 2. Memory and Performance Considerations: JavaScript and WebAssembly // run in a browser context, which can have memory limitations and // performance constraints. Carefully manage memory allocation, // especially when dealing with the game's map and various buffers. // // 3. Direct Memory Access: Provide JavaScript access to critical game // data structures like the map buffer for efficient reading and // writing. This can be done using Emscripten's heap access functions // (HEAP8, HEAP16, HEAP32, etc.). // // 4. User Interface and Rendering: This part might not be necessary to // wrap, as modern web technologies (HTML, CSS, WebGL) can be used for // UI. However, providing some hooks for game state (like score, budget, // etc.) to JavaScript might be helpful. // // 5. Callbacks and Interactivity: Ensure that key game events and // callbacks are exposed to JavaScript, allowing for interactive and // responsive gameplay. // // 6. Optimizations: Where possible, optimize C++ code for WebAssembly, // focusing on critical paths in the simulation loop. // // Decisions and Explanations // // - Excluded Elements: // // - Low-level rendering or platform-specific code, as this can be // handled more efficiently with web technologies. // // - Parts of the code that handle file I/O directly, as file access // in a web context is typically handled differently (e.g., using // browser APIs or server-side support). // // - Any networking or multiplayer code, as web-based // implementations would differ significantly from desktop-based // network code. // // - Included Elements: // // - Core game mechanics, such as map generation, zone simulation // (residential, commercial, industrial), disaster simulation, and // basic utilities. // // - Game state management, including budgeting, scoring, and city // evaluation. // // - Direct memory access to critical structures like the map // buffer, allowing efficient manipulation from JavaScript. // // - Essential callbacks and event handling mechanisms to ensure // interactivity. // // Conclusion // // Given the complexity and size of the Micropolis class, wrapping the // entire class directly is impractical. However, focusing on key areas // essential for gameplay and providing efficient interfaces for // critical data structures can create a functional and interactive city // simulation in a web context. Further optimizations and adjustments // would likely be needed based on testing and specific requirements of // the web implementation.