diff --git a/render-wasm/README.md b/render-wasm/README.md new file mode 100644 index 000000000..c0df8d082 --- /dev/null +++ b/render-wasm/README.md @@ -0,0 +1,25 @@ +# render-wasm + +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). + +## How to build + +With the [Penpot Development Environment](https://help.penpot.app/technical-guide/developer/devenv/) running, create a new tab in the tmux. + +```sh +cd penpot/render-wasm +./build +``` + +The build script will compile the project and copy the `.js` and `.wasm` files to their correct location within the frontend app. + +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 + +- [Serialization](./docs/serialization.md) diff --git a/render-wasm/docs/serialization.md b/render-wasm/docs/serialization.md new file mode 100644 index 000000000..741ba5788 --- /dev/null +++ b/render-wasm/docs/serialization.md @@ -0,0 +1,41 @@ +# Serialization + +## Paths + +Paths are made of segments of **28 bytes** each. The layout (assuming positions in a `Uint8Array`) is the following: + +| Offset | Length (bytes) | Data Type | Field | +| ------ | -------------- | --------- | ------- | +| 0 | 2 | `u16` | Command | +| 2 | 2 | `u16` | Flags | +| 4 | 4 | `f32` | `c1_x` | +| 8 | 4 | `f32` | `c1_y` | +| 12 | 4 | `f32` | `c2_x` | +| 16 | 4 | `f32` | `c2_y` | +| 20 | 4 | `f32` | `x` | +| 24 | 4 | `f32` | `y` | + +**Command** can be one of these values: + +- `:move-to`: `1` +- `:line-to`: `2` +- `:curve-to`: `3` +- `:close-path`: `4` + +**Flags** is not being used at the moment. + +## Gradient stops + +Gradient stops are serialized in a `Uint8Array`, each stop taking **5 bytes**. + +| Offset | Length (bytes) | Data Type | Field | +| ------ | -------------- | --------- | ----------- | +| 0 | 1 | `u8` | Red | +| 1 | 1 | `u8` | Green | +| 2 | 1 | `u8` | Blue | +| 3 | 1 | `u8` | Alpha | +| 4 | 1 | `u8` | Stop Offset | + +**Red**, **Green**, **Blue** and **Alpha** are the RGBA components of the stop. + +**Stop offset** is the offset, being integer values ranging from `0` to `100` (both inclusive).