Compositing layers for transforms, opacity, will-change #119

Phase 12: Metal GPU Compositor (6/7)#

Goal: Implement a layer tree that renders subtrees to intermediate textures for correct compositing of transforms, opacity, and will-change elements.

Depends on: Display list to Metal render passes

Requirements#

• Identify elements that need their own compositing layer:

  • Elements with opacity < 1.0 (must composite as a group)
  • Elements with CSS transforms (future Phase 13, but lay groundwork)
  • Elements with will-change: transform | opacity
  • Fixed-position elements (already identified in layout)
  • Elements with overflow: scroll/auto (scrollable containers)

• Build a layer tree from the layout tree:

  • Each layer holds a portion of the display list
  • Layers are ordered by stacking context (z-index)
  • Root layer covers the entire viewport

• Render layers to intermediate MTLTextures:

  • Create render-to-texture passes for layers that need isolation
  • Layer texture size matches the layer's bounding box
  • Render the layer's display list subset into its texture

• Composite layers in final pass:

  • Draw each layer's texture as a quad in the correct stacking order
  • Apply layer opacity as a uniform multiplier
  • Transform layers via vertex transformation (for future CSS transforms)

• Optimize: only create intermediate textures when needed:

  • Layers with opacity=1.0 and no transforms can be rendered directly to the drawable

Acceptance Criteria#

• Elements with opacity < 1.0 composite correctly as a group
• Layer tree correctly reflects stacking contexts
• Intermediate textures are only created when needed
• Fixed-position elements render on their own layer
• Scrollable containers render their content to a layer texture
• No external crate dependencies
• cargo clippy --workspace -- -D warnings passes
• cargo test --workspace passes