Glass
Optically realistic glass lens driven in a custom shape
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| origin | origin | center | Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. |
| center | position | {"x":0.5,"y":0.5} | Center position of the glass shape |
| scale | range | 1 | Scale of the glass shape (1 = default size) |
| rotation | range | 0 | Rotation of the glass shape in degrees |
| cutout | checkbox | false | Cut out the alpha outside the glass shape |
| refraction | range | 1 | Lens refraction — how aggressively the edges warp content beneath (0 = none, 1 = max) |
| edgeSoftness | range | 0.1 | Edge softness — higher values give a wider, softer fade at the glass boundary |
| blur | range | 0 | Frosted blur amount — 0 = clear glass, higher = frosted/diffuse |
| thickness | range | 0.2 | Glass depth — how far inward from the edge the refraction extends |
| aberration | range | 0.5 | Chromatic aberration — splits RGB channels along the refraction vector |
| innerZoom | range | 1 | Inner zoom level — magnifies content seen through the glass |
| lightAngle | range | 300 | Light angle in degrees |
| highlight | range | 0.05 | Directional edge highlight — bright rim on the light-facing boundary |
| highlightColor | color | #ffffff | Color of the directional edge highlight and specular glint |
| highlightSoftness | range | 0.5 | Specular highlight softness |
| fresnel | range | 0.1 | Fresnel rim glow — a soft luminous halo around the glass boundary |
| fresnelSoftness | range | 0.1 | Fresnel rim width — higher values spread the glow further inward |
| fresnelColor | color | #ffffff | Color of the fresnel rim glow |
| tintColor | color | #ffffff | Color tint applied to the internal directional gradient |
| tintIntensity | range | 0 | Intensity of the color tint applied to the glass interior |
| tintPreserveLuminosity | checkbox | true | Preserve original brightness when tinting |
| shape | shape | {"type":"sphere3D","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>
<Glass>
<Circle />
</Glass>
</Shader>