Glass

Optically realistic glass lens driven in a custom shape

Props

Prop	Type	Default	Description
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)
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":"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>
  <Glass>
    <Circle />
  </Glass>
</Shader>

FractalNoise GlassTiles