diff --git a/render-wasm/README.md b/render-wasm/README.md index c0df8d0825..e433b27cd1 100644 --- a/render-wasm/README.md +++ b/render-wasm/README.md @@ -1,8 +1,20 @@ -# render-wasm +# Penpot WASM render -Canvas-based WebAssembly render engine for Penpot. +This is the canvas-based WebAssembly render engine for Penpot. -This is a Rust crate that targets [Emscripten](https://emscripten.org/) (`wasm32-unknown-emscripten`). Underneath, it uses Skia via [custom binaries](https://github.com/penpot/skia-binaries/releases/) of the [rust-skia crate](https://github.com/rust-skia/rust-skia). +## Rust & Emscripten + +This project is a Rust crate that targets [Emscripten](https://emscripten.org/) (`wasm32-unknown-emscripten`). + +We use `wasm32-unknown-emscripten` compilation target: +* It compiles Rust code into WASM +* It generates the JavaScript code (“glue”) to load and run the WASM code + +![How Rust, Emscripten, and WASM are connected](docs/images/rust_wasm_schema.png) + +### Skia + +We use Skia, an Open Source 2D graphics library. In particular, the render engine uses Skia via [custom binaries](https://github.com/penpot/skia-binaries/releases/) of the [rust-skia crate](https://github.com/rust-skia/rust-skia). ## How to build @@ -13,13 +25,33 @@ cd penpot/render-wasm ./build ``` +You can also use `./watch` to run the build on every change. + The build script will compile the project and copy the `.js` and `.wasm` files to their correct location within the frontend app. +![Architecture overview](docs/images/architecture_schema.png) + + Edit your local `frontend/resources/public/js/config.js` to add the following flags: - `enable-feature-render-wasm` to enable this render engine. - `enable-render-wasm-dpr` (optional), to enable using the device pixel ratio. -## Docs +## How to test + +We currently have two types of tests: + +- Unit tests + +```sh +cd penpot/render-wasm +./test +``` + +- [Visual Regression Test](./docs/visual_regression_tests.md) + +## Technical documentation - [Serialization](./docs/serialization.md) +- [Tile Rendering](./docs/tile_rendering.md) +- [Texts](./docs/texts.md) diff --git a/render-wasm/docs/images/architecture_schema.png b/render-wasm/docs/images/architecture_schema.png new file mode 100644 index 0000000000..2bd15e804a Binary files /dev/null and b/render-wasm/docs/images/architecture_schema.png differ diff --git a/render-wasm/docs/images/rust_wasm_schema.png b/render-wasm/docs/images/rust_wasm_schema.png new file mode 100644 index 0000000000..e9fc6be539 Binary files /dev/null and b/render-wasm/docs/images/rust_wasm_schema.png differ diff --git a/render-wasm/docs/visual_regression_tests.md b/render-wasm/docs/visual_regression_tests.md index 63dcc98f67..599ea658dd 100644 --- a/render-wasm/docs/visual_regression_tests.md +++ b/render-wasm/docs/visual_regression_tests.md @@ -5,10 +5,12 @@ ## Run the tests -The tests are located in their own Playwright project, `render-wasm`. To run them, go to the `frontend` dir and execute Playwright passing the `--project` flag: +The tests are located in their own Playwright project, `render-wasm`. + +To run them, go to the `frontend` dir and execute Playwright passing the `--project` flag. To run them using the `--ui` flag, run the tests **out of the tmux window**. ```zsh -cd frontend +cd penpot/frontend npx playwright test --ui --project=render-wasm ```