Composing your first shader effect

Building a first shader effect in the design editor by stacking and nesting components as layers.

What's covered

  • Starting a composition with textures and media
  • Adding and arranging several components
  • Applying shape effects and stylization layers
  • Nesting components to control where an effect applies
  • How layer order changes the result
  • Previewing the composition before export
  • Exporting the component code

Key concept

A shader is a stack of components. Layer order decides what sits on top, and nesting a component inside another limits the effect to that component's children.