Emboss
Embossed / debossed relief shading on top of child content, driven by a custom shape
Embossed / debossed relief shading on top of child content, driven by a custom shape
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| center | position | {"x":0.5,"y":0.5} | Center position of the embossed shape |
| scale | range | 1 | Scale of the embossed shape (1 = default size) |
| depth | range | -0.5 | Relief depth - negative = inset (debossed), positive = raised (embossed) |
| lightAngle | range | 260 | Directional light angle in degrees - controls highlight and shadow direction |
| lightIntensity | range | 0.6 | Strength of the directional edge highlights and shadows |
| shadowIntensity | range | 0.3 | Darkness of the relief shadow |
| shape | shape | {"type":"circleSDF","radius":0.35} | Serialized shape configuration (JSON) |
| shapeSdfUrl | shape-upload | URL to a pre-generated SDF .bin file - when non-empty, activates SVG mode and triggers a shader recompile | |
| shapeType | - | Active SDF shape type - triggers recompile when shape is switched. When empty, derived from shape JSON at mount time. |
Usage
vue
<Shader>
<Emboss>
<Circle />
</Emboss>
</Shader>