4 ms·

That's great for the actual meat and potatoes, but like half of the codebase will be tied to whatever UX libraries (MFC on windows / Cocoa in osx) that won't po

by pxmpxm 3y ago

That's great for the actual meat and potatoes, but like half of the codebase will be tied to whatever UX libraries (MFC on windows / Cocoa in osx) that won't port over. So you will be rewriting most of it in java script anyway? That argument feels a bit academic.

whizzter 3y ago
Partially, much of what makes Photoshop photoshop that clones can't replicate is the actual image manipulations,layer adjustments,etc that needs to be carrier over 1:1 or people will just be annoyed that it's not exactly right. Also Asm.JS (Wasm's predecessor) was born to port GAMES, games often have their own GL,etc UI's that they render themselves and then tons upon tons of gameplay logic code that runs in C/C++ (or whatever scripting language the engine supports like C#). That was the most important part initially, even if people on the outside are starting to benefit like the Figma folks that uses Wasm, kinda like GPU's were for gaming and now power a ton of modern UI and AI workloads.
macNchz 3y ago
Applications like Photoshop typically have fully custom UI frameworks that are not tightly tied to the OS, so porting to run in a browser is less about rewriting the entire UI to work with html elements, and more about writing a renderer for the UI kit that can draw it to a canvas. If you’re not writing a fully custom UI, you might choose something like Qt, which has wasm built in: https://www.qt.io/web-assembly-example-slate?hsCtaTracking=3bba596e-b49d-42b2-8846-5afc7f2d8da8%7C3dc35563-7a40-4061-b98b-b66f42959c8d https://www.qt.io/web-assembly-example-slate?hsCtaTracking=3...
- spankalee 3y ago
  Photoshop for the Web's UI is built with Lit.
- malkia 3y ago
  Try loading a big image, then flood fill it :) - My browser crashed - or rather - went into deep sleep!
flohofwoe 3y ago
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.
krona 3y ago
Dunno, seems to have worked well for Figma.

by pxmpxm 3y ago

whizzter 3y ago

Partially, much of what makes Photoshop photoshop that clones can't replicate is the actual image manipulations,layer adjustments,etc that needs to be carrier over 1:1 or people will just be annoyed that it's not exactly right. Also Asm.JS (Wasm's predecessor) was born to port GAMES, games often have their own GL,etc UI's that they render themselves and then tons upon tons of gameplay logic code that runs in C/C++ (or whatever scripting language the engine supports like C#). That was the most important part initially, even if people on the outside are starting to benefit like the Figma folks that uses Wasm, kinda like GPU's were for gaming and now power a ton of modern UI and AI workloads.

macNchz 3y ago

Applications like Photoshop typically have fully custom UI frameworks that are not tightly tied to the OS, so porting to run in a browser is less about rewriting the entire UI to work with html elements, and more about writing a renderer for the UI kit that can draw it to a canvas. If you’re not writing a fully custom UI, you might choose something like Qt, which has wasm built in: https://www.qt.io/web-assembly-example-slate?hsCtaTracking=3bba596e-b49d-42b2-8846-5afc7f2d8da8%7C3dc35563-7a40-4061-b98b-b66f42959c8d https://www.qt.io/web-assembly-example-slate?hsCtaTracking=3...

spankalee 3y ago
Photoshop for the Web's UI is built with Lit.
malkia 3y ago
Try loading a big image, then flood fill it :) - My browser crashed - or rather - went into deep sleep!

flohofwoe 3y ago

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.

krona 3y ago

Dunno, seems to have worked well for Figma.