Glass
Glass es la primitiva de vidrio. Refracta, desenfoca y tiñe lo que tiene detrás, y todo el efecto ocurre en un shader: no hay backdrop-filter ni nada de CSS. El centro es plano y la refracción se concentra en el canto.
Uso
El vidrio captura la escena que tiene detrás, así que el fondo tiene que ser parte de la escena. Un fondo de CSS no se refracta.
<script>
import { EssentiaRoot } from 'essentia-core'
import { Glass, Text } from 'essentia-styles'
</script>
<EssentiaRoot>
<Glass width={320} height={120} preset="frosted">
<Text text="Hola" anchorX={0.5} anchorY={0.5} />
</Glass>
</EssentiaRoot>Presets
preset da la base de los props visuales y cada prop explícito la pisa. Hay seis: clear, pill, frosted, dark, lens y liquid. liquid prende specularMotion, así que redibuja la escena en cada frame.
Children
El contenido del vidrio va en su espacio local: x = 0, y = 0 es el centro, y sigue al vidrio cuando se mueve o se escala. Va por delante sin pedirlo, así que un hijo con z = 0 no entra en la captura del propio vidrio.
Costo
Cada z distinta de un Glass es un nivel de captura: una pasada de escena más por frame, y una pirámide de blur si ese nivel tiene un vidrio con blur mayor que 0. Hay un tope de tres niveles.
- Poné a la misma
zlos vidrios que no se superponen. - Un Glass fuera de cámara no suma un nivel, y sin ninguno en pantalla no hay captura.
Referencia de props
Esta tabla se genera del JSDoc del componente.
| Prop | Tipo | Default | Rango | Descripción |
|---|---|---|---|---|
width | number | requerido | | |
height | number | requerido | | |
preset | GlassPresetName | undefined | | Preset visual (clear, pill, frosted, dark, lens; ver glassPresets): da la base de los props visuales y cada prop explícito la pisa. pill y lens se resuelven con width y height. Sin preset rigen los defaults de cada prop. |
radius | number | 16 | | Radio de esquinas en píxeles CSS. Se clampa a min(width, height) / 2. |
profile | GlassProfile | 'squircle' | | Perfil del bisel: 'circle', 'squircle' (más plano adentro y abrupto en el canto) o 'dome' (lente: el bisel ocupa toda la forma e ignora bevelWidth). |
bevelWidth | number | min(24, 0.3 · min(width, height)) | | Ancho del bisel en píxeles CSS: la franja del borde que refracta. Adentro el vidrio es plano. Se clampa a min(width, height) / 2 − 0.5. |
bevelDepth | number | 20 | | Alto del bisel en píxeles CSS. |
lip | number | 0 | | Alto extra del canto (lip) en píxeles CSS. 0 = sin lip. |
lipSharpness | number | 10 | | Exponente del lip: cuanto mayor, más pegado al borde. |
thickness | number | 12 | | Espesor base del vidrio en píxeles CSS (recorrido del rayo). |
ior | number | 1.4 | | Índice de refracción. 1.0 = sin refracción, 1.5 = vidrio estándar. |
refraction | number | 1 | | Ganancia de la refracción. 1 = físico (convexo), negativo invierte el muestreo, 0 = sin refracción. |
dispersion | number | 0.03 | | Dispersión: delta IOR entre canales, solo visible en el canto. 0 = sin dispersión. |
magnify | number | 1 | | Escala del muestreo alrededor del centro. 1 = sin zoom. |
tint | string | '#ffffff' | | Color de tinte CSS sobre el fondo refractado. |
tintOpacity | number | 0 | 0..1 | Opacidad del tinte. 0 = glass puro sin tinte. |
tintMode | GlassTintMode | 'overlay' | | Modo del tinte: 'overlay' mezcla con el color; 'dye' multiplica, como un vidrio de color, y conserva el detalle del fondo. |
brightness | number | 0 | -1..1 | Brillo del fondo refractado. 0 = neutro. |
saturation | number | 0 | -1..1 | Saturación del fondo refractado. −1 = gris, 0 = neutro. |
softness | number | 0 | | Suavidad del borde AA en píxeles. |
reflection | number | 0 | 0..1 | Peso del reflejo, multiplicado por Fresnel (solo se ve en el canto). Refleja engine.envMap si el root tiene uno y un cielo falso orientado a la luz global si no. |
specular | number | 0 | 0..1+ | Specular Blinn-Phong hacia la luz global de EssentiaRoot (lóbulo afilado + halo, más un lóbulo opuesto débil). |
rim | number | 0 | 0..1+ | Stroke de canto de 1.5 px, más brillante del lado de la luz global. |
specularMotion | boolean | false | | Specular animado: dos manchas de luz que orbitan en curvas de Lissajous. Mientras está activo el canvas se redibuja en cada frame. El preset liquid lo prende. |
blur | number | 0 | | Blur del fondo (frosted glass): sigma en píxeles CSS, como backdrop-filter: blur(). 0 = sin blur; se satura por encima de ~29 px. Mientras algún <Glass> tenga blur > 0, el root mantiene una pirámide de blur por nivel de captura que la usa (hasta 11 pasadas por frame, solo los niveles que el blur y el edgeSharpness de los Glass del nivel piden y solo sobre la zona de pantalla que cubren, más el alcance del blur; a pantalla entera aprox. 1 ms por nivel a DPR 2 en un M4). |
edgeSharpness | number | 0 | 0..1 | Cuánto se afila el blur en el bisel: el canto refracta nítido aunque la meseta esté esmerilada (blur · (1 − edgeSharpness · rimMask)). 0 = blur parejo. |
quality | Quality | la quality del EssentiaRoot ('medium') | | Calidad: 'low' sin dispersión (un muestreo por píxel), 'medium' con dispersión por canal, 'high' suma taps Poisson al blur. Cambiarla recompila el shader. |
surfaceRoughness | number | 0 | 0..1 | Rugosidad de la superficie: perturba la normal vía ruido procedural. |
shadowOpacity | number | 0 | 0..1 | Opacidad de la sombra analítica: penumbra gaussiana más sombra de contacto alrededor del panel, en el mismo mesh. Con más de 0 el quad crece con un padding (3·spread + |shadowOffsetY| + 1 px por lado); los clicks y el hover sobre la sombra no cuentan. |
shadowSpread | number | 12 | | Alcance de la sombra en píxeles CSS. |
shadowOffsetY | number | 2 | | Desplazamiento de la sombra hacia abajo en pantalla, en píxeles CSS. |
hoverable | boolean | false | | Hover animado: con el puntero encima suma 0.1 al brightness y multiplica el specular por 1.3, con un resorte (aprox. 0.3 s). |
pressable | boolean | false | | Press animado: mientras se mantiene apretado multiplica bevelDepth por 0.8 y shadowSpread por 1.2 y suma 0.02 al magnify, con un resorte (aprox. 0.2 s). Salir del glass suelta el press. |
fluid | GlassFluid | null | null | | Superficie fluida (liquidGL): el puntero arrastra la forma como gelatina, proporcional a a su velocidad, y la superficie se asienta al detenerse. Deforma forma, normal, sombra y refracción juntas; el quad crece 0.12 · strength · lado menor px por lado para que no se recorte. Los clicks y el hover usan la forma sin deformar. null = rígida. |
tilt | number | 0 | | Inclinación máxima en grados: con el puntero encima la normal se inclina hacia él (el lado bajo el puntero "se hunde"), el fondo se corre por paralaje y el specular se desliza; vuelve a 0 al salir. 0 = sin tilt. |
x | number | — | | |
y | number | — | | |
z | number | 0 | | z de mundo. Los Glass a z distintas se apilan: cada z es un nivel de captura y el de adelante refracta (y difumina) a los de atrás, a costa de un render de escena más por nivel. Hasta 3 niveles; el resto se fusiona en el último. |
cursor | string | undefined (sin cambio) | | CSS cursor a aplicar mientras el puntero está sobre el Glass. Si se provee, activa automáticamente el bridge DOM via useCursor. Ej: 'pointer', 'text', 'grab'. |
onclick | InteractivityProps['onclick'] | — | | Click sobre el Glass (raycast). |
onpointerenter | InteractivityProps['onpointerenter'] | — | | Pointer entra al área del Glass. |
onpointerleave | InteractivityProps['onpointerleave'] | — | | Pointer sale del área del Glass. |
onpointermove | InteractivityProps['onpointermove'] | — | | Pointer se mueve dentro del Glass. |
onpointerdown | InteractivityProps['onpointerdown'] | — | | Pointer down sobre el Glass. |
onpointerup | InteractivityProps['onpointerup'] | — | | Pointer up sobre el Glass. |
children | Snippet | undefined | | Contenido del vidrio, en su espacio local: hereda su posición, rotación y escala, y x = 0, y = 0 es el centro del vidrio. Va 0.01 por delante en z (constante interna), así que un hijo con z = 0 no entra en la captura del propio vidrio. Un <Glass> hijo con z = 0 es un nivel de captura más: anidar tres vidrios llena el tope de 3 niveles. El contenido no recibe los eventos del vidrio: el puntero sobre un <Text> hijo pega en el vidrio, como si fueran hermanos. Un hijo con handlers propios (un <GlassButton>) los recibe él, y el vidrio de atrás también. |