From e9edebbbb5d471ba7352423870048189a5c544c2 Mon Sep 17 00:00:00 2001
From: Aitor Moreno <asakon28@gmail.com>
Date: Wed, 28 May 2025 09:41:07 +0200
Subject: [PATCH] :books: Add tile rendering documentation (#6568)

---
 render-wasm/docs/images/tile_rendering.svg    | 333 ++++++++++++++++++
 .../docs/images/tile_rendering_image.png      | Bin 0 -> 7859 bytes
 ...le_rendering_image_with_bounding_boxes.png | Bin 0 -> 8480 bytes
 ...ndering_image_with_bounding_boxes_grid.png | Bin 0 -> 9054 bytes
 render-wasm/docs/tile_rendering.md            | 228 ++++++++++++
 5 files changed, 561 insertions(+)
 create mode 100644 render-wasm/docs/images/tile_rendering.svg
 create mode 100644 render-wasm/docs/images/tile_rendering_image.png
 create mode 100644 render-wasm/docs/images/tile_rendering_image_with_bounding_boxes.png
 create mode 100644 render-wasm/docs/images/tile_rendering_image_with_bounding_boxes_grid.png
 create mode 100644 render-wasm/docs/tile_rendering.md

diff --git a/render-wasm/docs/images/tile_rendering.svg b/render-wasm/docs/images/tile_rendering.svg
new file mode 100644
index 0000000000..db9e78a56a
--- /dev/null
+++ b/render-wasm/docs/images/tile_rendering.svg
@@ -0,0 +1,333 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 135.46666 135.46667"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (2aeb623e1d, 2025-05-12)"
+   sodipodi:docname="tile_rendering.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="true"
+     inkscape:zoom="0.73449626"
+     inkscape:cx="93.261197"
+     inkscape:cy="189.24535"
+     inkscape:window-width="2498"
+     inkscape:window-height="1371"
+     inkscape:window-x="62"
+     inkscape:window-y="512"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer3">
+    <inkscape:grid
+       id="grid1"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="8.4666666"
+       spacingy="8.4666666"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="4"
+       enabled="true"
+       visible="true" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Picture"
+     inkscape:groupmode="layer"
+     id="layer1"
+     sodipodi:insensitive="true">
+    <rect
+       style="fill:#55ddff;stroke:none;stroke-width:1.05833;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;paint-order:markers stroke fill"
+       id="rect1"
+       width="135.46666"
+       height="94.754715"
+       x="0"
+       y="0"
+       inkscape:label="Sky" />
+    <path
+       style="fill:#71c837;stroke:none;stroke-width:1.05833;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;paint-order:markers stroke fill"
+       d="m 0,84.866801 c 1.65566,0 44.999999,-9.866804 44.999999,-9.866804 l 31.924527,-14.999999 25.981134,14.999999 32.56101,3.184404 V 135.46667 H 0 Z"
+       id="path1"
+       sodipodi:nodetypes="cccccccc"
+       inkscape:label="Land" />
+    <ellipse
+       style="fill:#ffcc00;stroke:none;stroke-width:1.05833;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;paint-order:markers stroke fill"
+       id="path2"
+       cx="82.464622"
+       cy="29.313675"
+       rx="15.728774"
+       ry="15.68632"
+       inkscape:label="Sun" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Grid"
+     sodipodi:insensitive="true"
+     style="display:none">
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect3"
+       width="33.866665"
+       height="33.866665"
+       x="0"
+       y="0" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect7"
+       width="33.866665"
+       height="33.866665"
+       x="33.866665"
+       y="0" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect8"
+       width="33.866665"
+       height="33.866665"
+       x="67.733337"
+       y="-4.1666664e-07" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect9"
+       width="33.866665"
+       height="33.866665"
+       x="101.6"
+       y="-6.2499993e-07" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect10"
+       width="33.866665"
+       height="33.866665"
+       x="0"
+       y="0" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect11"
+       width="33.866665"
+       height="33.866665"
+       x="33.866665"
+       y="0" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect12"
+       width="33.866665"
+       height="33.866665"
+       x="67.733337"
+       y="-4.1666664e-07" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect13"
+       width="33.866665"
+       height="33.866665"
+       x="101.6"
+       y="-6.2499993e-07" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect14"
+       width="33.866665"
+       height="33.866665"
+       x="0"
+       y="33.866665" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect15"
+       width="33.866665"
+       height="33.866665"
+       x="33.866665"
+       y="33.866665" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect16"
+       width="33.866665"
+       height="33.866665"
+       x="67.733337"
+       y="33.866665" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect17"
+       width="33.866665"
+       height="33.866665"
+       x="101.6"
+       y="33.866665" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect18"
+       width="33.866665"
+       height="33.866665"
+       x="0"
+       y="33.866665" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect19"
+       width="33.866665"
+       height="33.866665"
+       x="33.866665"
+       y="33.866665" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect20"
+       width="33.866665"
+       height="33.866665"
+       x="67.733337"
+       y="33.866665" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect21"
+       width="33.866665"
+       height="33.866665"
+       x="101.6"
+       y="33.866665" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect22"
+       width="33.866665"
+       height="33.866665"
+       x="0"
+       y="67.73333" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect23"
+       width="33.866665"
+       height="33.866665"
+       x="33.866665"
+       y="67.73333" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect24"
+       width="33.866665"
+       height="33.866665"
+       x="67.733337"
+       y="67.73333" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect25"
+       width="33.866665"
+       height="33.866665"
+       x="101.6"
+       y="67.73333" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect26"
+       width="33.866665"
+       height="33.866665"
+       x="0"
+       y="67.73333" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect27"
+       width="33.866665"
+       height="33.866665"
+       x="33.866665"
+       y="67.73333" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect28"
+       width="33.866665"
+       height="33.866665"
+       x="67.733337"
+       y="67.73333" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect29"
+       width="33.866665"
+       height="33.866665"
+       x="101.6"
+       y="67.73333" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect30"
+       width="33.866665"
+       height="33.866665"
+       x="0"
+       y="101.59999" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect31"
+       width="33.866665"
+       height="33.866665"
+       x="33.866665"
+       y="101.59999" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect32"
+       width="33.866665"
+       height="33.866665"
+       x="67.733337"
+       y="101.59999" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect33"
+       width="33.866665"
+       height="33.866665"
+       x="101.6"
+       y="101.59999" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect34"
+       width="33.866665"
+       height="33.866665"
+       x="0"
+       y="101.59999" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect35"
+       width="33.866665"
+       height="33.866665"
+       x="33.866665"
+       y="101.59999" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect36"
+       width="33.866665"
+       height="33.866665"
+       x="67.733337"
+       y="101.59999" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect37"
+       width="33.866665"
+       height="33.866665"
+       x="101.6"
+       y="101.59999" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Bounding Boxes"
+     sodipodi:insensitive="true"
+     style="display:none">
+    <rect
+       style="fill:none;stroke:#ff00cc;stroke-width:1.05833;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect38"
+       width="135.46361"
+       height="76.064644"
+       x="0.0015291121"
+       y="59.400482" />
+    <rect
+       style="fill:none;stroke:#ff00cc;stroke-width:1.05833;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:markers stroke fill"
+       id="rect39"
+       width="33.113209"
+       height="32.858494"
+       x="65.844337"
+       y="13.627355" />
+  </g>
+</svg>
diff --git a/render-wasm/docs/images/tile_rendering_image.png b/render-wasm/docs/images/tile_rendering_image.png
new file mode 100644
index 0000000000000000000000000000000000000000..f8d20e5de31c8e70c243c5a386d390dbaacb898e
GIT binary patch
literal 7859
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

literal 0
HcmV?d00001

diff --git a/render-wasm/docs/images/tile_rendering_image_with_bounding_boxes.png b/render-wasm/docs/images/tile_rendering_image_with_bounding_boxes.png
new file mode 100644
index 0000000000000000000000000000000000000000..95cf151c1eb4935d75d077e392de6a3226eb9e68
GIT binary patch
literal 8480
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
LEnXb;y7qqn--O4g

literal 0
HcmV?d00001

diff --git a/render-wasm/docs/images/tile_rendering_image_with_bounding_boxes_grid.png b/render-wasm/docs/images/tile_rendering_image_with_bounding_boxes_grid.png
new file mode 100644
index 0000000000000000000000000000000000000000..779182640a0fa4272861b95d79607eb4832b21d2
GIT binary patch
literal 9054
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

literal 0
HcmV?d00001

diff --git a/render-wasm/docs/tile_rendering.md b/render-wasm/docs/tile_rendering.md
new file mode 100644
index 0000000000..52b16bf5a8
--- /dev/null
+++ b/render-wasm/docs/tile_rendering.md
@@ -0,0 +1,228 @@
+
+# Tile Rendering
+
+## What is tile rendering?
+
+Tile rendering consists in subdividing the screen into smaller areas called *tiles* and rendering them separately.
+
+Why? Mainly for these reasons:
+
+- **Progressive Rendering**: Only visible/needed parts are drawn.
+- **Performance**: Tiles are currently rendered individually. In theory, this makes rendering parallelizable by reordering GPU call but we’re not doing this yet. GPU parallelization is complex, and we need to research it further (it likely depends on how the Skia backend is implemented).
+- **Memory management**: Tiles are cached so that only the modified regions are re-rendered, while the rest remain intact and are reused as-is.
+- **Interaction**: We render additional tiles beyond the visible area to ensure smoother user interaction, allowing users to move around without visible popping.
+
+## How it works?
+
+### Considerations
+
+A *Tile* is a structure defined by two integer coordinates (*x*, *y*), identifying a cell within a virtual grid overlaying the canvas.
+
+- Tile size (512px by 512px) is defined in logical screen-space units and is **independent of zoom**. However, it is also **DPR-independent** — rendering at high-DPI (e.g., Retina displays) will internally scale the canvas accordingly, but tiles remain 512×512 in logical units, not device pixels.
+- Displacement is considered only in screen space. "Displacement" here refers to moving the viewport (panning), not translating shapes. All tile calculations and coordinates are based on screen-space movement.
+- We always render a fixed number of tiles (determined by the size of the viewport area).
+
+### What is a Viewbox?
+
+The *Viewbox* represents the visible portion of the canvas in real (world) coordinates. It defines the area currently seen by the user through the viewport, including the zoom level and pan offset.
+
+In tile rendering, the viewbox is used to determine which tiles are visible and should be rendered or cached.
+
+### Key Structures
+
+1. `Tile`: Identifies a cell in the grid.
+2. `TileRect`: A rectangle of tiles defined by its top-left and bottom-right corners (x0, y0, x1, y1).
+3. `TileViewbox`: Represents the visual area of interest:
+   - `visible_rect`: Tiles currently visible in the viewport.
+   - `interest_rect`: Extended area around the viewport for preloading.
+   - `center`: The central tile of the current view.
+4. `TileHashMap`: Maintains a dual index:
+   - `Tile → Shape UUIDs`: Shapes occupying the tile.
+   - `UUID → Tile Set`: Tiles containing the shape.
+5. `Surface & TileTextureCache`: The surface system encapsulates multiple layers (fills, strokes, shadows, etc.) rendered onto temporary surfaces. Rendered tiles are captured as `skia::Image` instances in the `TileTextureCache` for reuse, avoiding redundant redraws.
+
+These components allow efficient lookup and selective redrawing of what’s needed.
+
+### Overview
+
+Imagine a simple document like this:
+
+![Landscape](images/tile_rendering_image.png)
+
+It contains a background (sky color) and two shapes: the landscape and the sun.
+
+### Bounding Boxes
+
+A *bounding box* is the smallest rectangular area that fully contains a shape or group of shapes. For parent shapes, their bounding box typically extends to encompass all of their children, effectively covering the entire area occupied by the nested shapes.
+
+Bounding boxes are crucial for tile rendering because they allow us to quickly determine which tiles a shape might intersect, without checking every individual pixel or path.
+
+---
+
+To render by tile, we need to determine which tiles each shape intersects. This is done using two related functions:
+
+- `rebuild_tiles`: Calculates and associates tiles with shapes by analyzing their full bounding boxes, including all nested children. It provides a comprehensive mapping of where shapes lie on the tile grid.
+- `rebuild_tiles_shallow`: Performs a lighter computation by associating tiles only with the first-level children of shapes. Deeper nested children are resolved dynamically during rendering. This approach improves performance by avoiding unnecessary calculations for tiles or shapes that may not be rendered.
+
+In short, both functions help determine which tiles each shape occupies, but `rebuild_tiles_shallow` is optimized to reduce overhead for complex shape hierarchies.
+
+![Landscape bounding boxes](images/tile_rendering_image_with_bounding_boxes.png)
+
+Then, we compute which tiles need rendering:
+
+> 💡 We use a `HashMap<Tile, Vec<Uuid>>` to track which shapes belong to each tile.
+
+![Landscape bounding boxes and grid](images/tile_rendering_image_with_bounding_boxes_grid.png)
+
+Once the tiles are determined, we sort them starting from the center of the viewport, using Manhattan distance to prioritize rendering closer tiles first, so the user can see the end result faster.
+
+### Rendering Step-by-Step
+
+1. Viewbox updates trigger a re-render, which happens on the initial render, user interactions (such as creating or moving shapes), panning, or zooming.
+2. The `TileViewbox` is updated based on the new `Viewbox` (visible area plus margins of interest).
+3. The system identifies tiles that are currently visible (`visible_rect`) and tiles just outside the viewport for preloading (`interest_rect`).
+4. For each visible tile:
+   - **If cached**:  
+     - Draw the cached rendered tile directly from `TileTextureCache` to `Surface::Target`.
+   - **If not cached**:
+     - Fetch intersecting shapes using `TileHashMap`.
+     - Render shape layers onto temporary surfaces:  
+       - **Fills** → Shape fills  
+       - **Strokes** → Outlines  
+       - **Shadows** → Visual effects like drop or inner shadows to shapes   
+       - **Current** → Composite tile layer (the final rendered tile before caching)
+       - **Target** → Final canvas image where the composed tile is drawn; this is the surface ultimately displayed on screen after composing the tile layers.
+     - Compose and cache the result using `cache_current_tile_texture(tile, image)`.
+     - Copy the final tile image to `Surface::Target`.
+
+### Rendering Across Multiple Frames
+
+To avoid blocking the browser's main thread, tile rendering is distributed across multiple animation frames. This ensures smooth interactivity and responsiveness, even for large canvases or complex documents.
+
+- Tiles are **sorted by priority** (typically using Manhattan distance to the viewport center).
+- A limited number of tiles are rendered per frame based on a time or count budget.
+- A limited number of tiles are rendered per animation frame based on either a time budget (to avoid blocking the main thread) or a maximum tile count, typically processing around 5–10 tiles per frame to balance performance and responsiveness.
+- A limited number of tiles are rendered per animation frame. After processing every `NODE_BATCH_THRESHOLD` shapes, the system checks if the allotted time budget has been exceeded to decide whether to pause rendering and continue in the next frame. This approach avoids continuous time checks while preventing blocking the main thread.
+
+- After each batch, control is yielded back to the browser to:
+  - Allow UI updates
+  - Handle user input
+  - Maintain consistent frame rates
+
+> 💡 This technique is similar to how map web apps or graphics engines progressively load and render content.
+
+This incremental rendering strategy ensures:
+- The most relevant (visible) tiles appear first.
+- Remaining tiles are rendered progressively, minimizing perceived latency.
+- The user interface remains responsive during rendering operations.
+
+### Interaction and Updates
+
+When a user interacts with a shape (creates, moves, or edits a shape):
+
+- Tiles to be re-rendered are computed using the shape's bounding box.
+- `TileHashMap` updates to reflect which shapes are rendered in each tile.
+- Affected tiles are invalidated in the cache.
+- Only those tiles are re-rendered.
+
+When zooming or panning:
+
+- New tiles entering the `visible_rect` are identified.
+
+> 💡 `visible_rect` stores the current set of tiles that intersect with the viewbox — that is, the exact area visible on screen, without any margin of interest.
+
+- These tiles are either:
+  - Pulled from the cache, or  
+  - Rendered from scratch if not already available.
+
+### Handling Zoom and Scale
+
+- Tile resolution depends on zoom level (`scale`).
+- When zoomed in significantly, higher-resolution tiles are required.
+- If the zoom changes beyond a threshold, the cache may be invalidated, and tiles re-rendered at the new scale.
+
+## Why Cache Tiles?
+
+Tile caching (via `TileTextureCache`) boosts performance:
+
+- Prevents unnecessary rendering.
+- Only a limited number of tiles are kept in memory (`TEXTURES_CACHE_CAPACITY`).
+- Distant tiles are periodically evicted using an LRU (Least Recently Used)-like strategy based on visibility.
+
+## Scaling and Tile Size Utilities
+
+Tile size in screen space is constant, but its actual visual size depends on zoom level (`scale`).
+
+To deal with this, the system uses utility functions:
+
+- `get_tile_size(scale)`: Gets the logical size of a tile at the current scale.
+- `get_tile_rect(tile, scale)`: Gets the rectangular area a tile covers.
+- `get_tile_pos(tile, scale)`: Gets the tile’s position in canvas coordinates.
+
+These allow rendering logic to adapt tile positions/sizes dynamically.
+
+## Selective Re-rendering
+
+The system enables:
+
+- Efficient updates when the viewport changes.
+- Targeted re-rendering when a shape changes (only the affected tiles).
+- Reduced GPU/CPU work on complex documents.
+
+## Rendering Pipeline Summary (Per Frame)
+
+1. **Input**
+
+Each rendering frame begins with the following inputs:
+
+- `tree`: A mutable hashmap of all drawable shapes, keyed by UUID.
+- `modifiers`: A hashmap of transformation matrices to apply to shapes, keyed by UUID.
+- `structure`: A hashmap representing the shape hierarchy and their children.
+- `Viewbox`: Defines the current viewport — the visible portion of the canvas, including zoom level and position.
+- `timestamp`: A time marker used for animations and time-based updates.
+
+2. **Compute `TileViewbox`**  
+   - From `Viewbox`, generate visible + interest regions.
+
+3. **Determine tiles to render**  
+   - Compare tiles to be rendered vs cached ones.
+   - Detect cache hits and misses.
+   - Invalidate stale tiles if the viewport changed significantly.
+
+4. **Render cached tiles**  
+  - Fetch image from `TileTextureCache`.
+  - Blit to `Surface::Target`.
+
+5. **Render uncached tiles from scratch**  
+  - Find the shapes intersecting with this tile (`TileHashMap`).
+  - Render the tile layers on their `skia::Surface` instances, using blending, opacity, masking, etc. when needed.
+  - Each layer is rendered on a `skia::Surface`.
+  - Use blending, opacity, masking, etc.
+  - Store the resulting texture in the cache:  
+    `cache_current_tile_texture(tile, image)`
+  - Draw the tile to `Surface::Target`.
+
+6. **Handle user interactions**  
+   - When shapes are modified:
+     1. Determine affected tiles.
+     2. Invalidate those tiles in the cache.
+     3. Re-render them selectively.
+   - When panning or zooming:
+     - Detect the visible tiles.
+     - Fetch them from the cache or render them if needed.
+
+## Summary of Benefits
+
+- **Modular pipeline**: It separates surfaces per layer, enabling composite rendering.
+- **Avoid unnecessary re-renders**: A cache is used to avoid re-rendering when nothing has changed.
+- **Progressive**: Only visible/nearby tiles are drawn.
+- **Efficient**: Selective invalidation of cached tiles minimizes GPU/CPU usage on large documents.
+- **Scalable with screen siz**: Works well for both small and large canvases due to tile granularity and smart caching.
+
+## References
+
+- [Chromium Tile Prioritization Design](https://docs.google.com/document/d/1tkwOlSlXiR320dFufuA_M-RF9L5LxFWmZFg5oW35rZk/edit?tab=t.0)
+- [WebGL Best Practices](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices)
+- [When Optimisations Work, But for the Wrong Reasons](https://www.youtube.com/watch?v=hf27qsQPRLQ&ab_channel=SimonDev)
+- [Life of a Triangle](https://pixeljetstream.blogspot.com/2015/02/life-of-triangle-nvidias-logical.html)
+- [A Trip Through the Graphics Pipeline 2011](https://fgiesen.wordpress.com/2011/07/09/a-trip-through-the-graphics-pipeline-2011-index/)
\ No newline at end of file