feat(gioser): luna con textura rica + terminador curvo, auras anchas, overlay nubes
Luna (FS_CHACANA::render_moon):
- Normales esféricas reales: nx=p.x/R, ny=p.y/R, nz=sqrt(1-nx²-ny²).
- Terminador CURVO: dot(normal, sun_dir) donde sun_dir gira en el plano
X-Z según la fase. Resultado: la frontera luz/sombra es una elipse
proyectada en pantalla, como en la luna real (no una vertical recta).
- Fase lineal: phi = fract(t/40) * 2π cicla new→first-q→full→last-q→new
en ~40s.
- Limb darkening realista: pow(nz, 0.45) — bordes más oscuros que el
centro (el regolito lunar dispersa).
- 6 capas de textura:
maria_n (escala 4.5) → mares oscuros (smoothstep 0.42..0.60)
craters_mid (escala 13) → cráteres grandes
craters_small (escala 28) → cráteres chicos
fine (escala 55) → granularidad del terreno
micro (escala 110) → polvo
ring_mid + ring_small → crests via pow(abs(n-0.5)*2, k) → bordes
elevados de cráteres
Albedo final: 0.80 + craters±0.32 + small±0.22 + fine±0.20 + micro±0.10
+ rings (+0.22, +0.16) - maria 0.50, clamp [0.10, 1.15].
Auras elementales (FS_CHACANA::element_cloud):
- sigma_along 0.42 → 0.62 (más reach hacia afuera)
- sigma_perp 0.34 → 0.62 (mucho más ancho perpendicular)
- cloud_center offset 0.22 → 0.28 (más lejos del centro)
- multiplier 0.28 → 0.26 (compensa intensidad por la mayor cobertura)
- Resultado: las nubes elementales se solapan en las esquinas NE/NW/SE/SW
y mezclan colores. El cuadrante entero respira el color del cardinal.
Overlay clouds (FS_OVERLAY_CLOUDS — nuevo shader):
- Tercer pase tras chacana, fullscreen quad.
- blend = SRC_ALPHA / ONE_MINUS_SRC_ALPHA (compositing normal, no aditivo)
→ las nubes COMPONEN sobre la escena en lugar de sumar luz.
- Dos capas FBM (escalas 0.55 y 1.30) con parallax inverso del mouse
(-0.05 y -0.09) — se sienten "delante" del cosmos.
- Drift más lento que las nubes del cosmos (0.020 vs 0.055), para que se
perciban como otra capa atmosférica.
- smoothstep(0.55..0.88, 0.50..0.82) → sólo crestas se vuelven nube;
mucho del viewport queda transparente.
- Alpha máximo 0.10 — "apenas visible" como pidió el diseño.
- Color mix gris→blanco-azul según densidad local.
Renderer (gioser-canvas-web):
- Nuevo Program overlay_prog con uniforms u_resolution/u_time/u_parallax.
- render() ahora hace 3 pases: cosmos → chacana → overlay clouds.
Workspace verde.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
e8f97b50cb24848ab7b1634a78c0f84ec468a762 · por sergio · 2026-05-15T04:53:05Z (hace 5 meses) · padre d94dcfb5a · ver el árbol en este commit
Delta semántico · 5
crates/modules/gioser/gioser-canvas-web/src/lib.rs
cambió de firma struct Renderer pub cambió por dentro fn new pub cambió por dentro fn render pub
crates/modules/gioser/gioser-shaders/src/lib.rs
diff --git a/crates/modules/gioser/gioser-canvas-web/src/lib.rs b/crates/modules/gioser/gioser-canvas-web/src/lib.rs
index 1311531..fc42809 100644
--- a/crates/modules/gioser/gioser-canvas-web/src/lib.rs
+++ b/crates/modules/gioser/gioser-canvas-web/src/lib.rs
@@ -10,7 +10,8 @@ use gioser_geom::ChacanaSpec;
use gioser_palette::{cosmos, Rgb};
use gioser_physics::{SpringDamper1, SpringDamper2};
use gioser_shaders::{
- chacana_quad, FS_CHACANA, FS_COSMOS, FULLSCREEN_QUAD, VS_CHACANA, VS_FULLSCREEN,
+ chacana_quad, FS_CHACANA, FS_COSMOS, FS_OVERLAY_CLOUDS, FULLSCREEN_QUAD, VS_CHACANA,
+ VS_FULLSCREEN,
};
use glam::{Mat4, Vec3, Vec4};
use std::collections::HashMap;
@@ -80,6 +81,7 @@ pub struct Renderer {
gl: GL,
cosmos_prog: Program,
chacana_prog: Program,
+ overlay_prog: Program,
cosmos_vao: WebGlVertexArrayObject,
chacana_vao: WebGlVertexArrayObject,
chacana_quad_count: i32,
@@ -244,6 +246,14 @@ impl Renderer {
)
.map_err(JsValue::from)?;
+ let overlay_prog = Program::new(
+ &gl,
+ VS_FULLSCREEN,
+ FS_OVERLAY_CLOUDS,
+ &["u_resolution", "u_time", "u_parallax"],
+ )
+ .map_err(JsValue::from)?;
+
let (cosmos_vao, _) = upload_quad(&gl, &FULLSCREEN_QUAD, 0).map_err(JsValue::from)?;
let chacana_quad_verts = chacana_quad(chacana.arm_extent());
let (chacana_vao, chacana_quad_count) =
@@ -258,6 +268,7 @@ impl Renderer {
gl,
cosmos_prog,
chacana_prog,
+ overlay_prog,
cosmos_vao,
chacana_vao,
chacana_quad_count,
@@ -500,6 +511,23 @@ impl Renderer {
}
gl.bind_vertex_array(Some(&self.chacana_vao));
gl.draw_arrays(GL::TRIANGLES, 0, self.chacana_quad_count);
+
+ // ---- Capa overlay de nubes (apenas visible, encima de todo) ----
+ // blend normal alpha — las nubes COMPONEN sobre la escena, no suman luz.
+ gl.blend_func(GL::SRC_ALPHA, GL::ONE_MINUS_SRC_ALPHA);
+ gl.use_program(Some(&self.overlay_prog.program));
+ if let Some(u) = self.overlay_prog.u("u_resolution") {
+ gl.uniform2f(Some(u), self.viewport.0 as f32, self.viewport.1 as f32);
+ }
+ if let Some(u) = self.overlay_prog.u("u_time") {
+ gl.uniform1f(Some(u), t);
+ }
+ if let Some(u) = self.overlay_prog.u("u_parallax") {
+ gl.uniform2f(Some(u), self.mouse.0, self.mouse.1);
+ }
+ gl.bind_vertex_array(Some(&self.cosmos_vao));
+ gl.draw_arrays(GL::TRIANGLES, 0, 6);
+
gl.bind_vertex_array(None);
}
}
diff --git a/crates/modules/gioser/gioser-shaders/src/lib.rs b/crates/modules/gioser/gioser-shaders/src/lib.rs
index fdfb568..39077a7 100644
--- a/crates/modules/gioser/gioser-shaders/src/lib.rs
+++ b/crates/modules/gioser/gioser-shaders/src/lib.rs
@@ -252,24 +252,65 @@ vec3 render_sun(vec2 p, float r, float pulse) {
}
vec3 render_moon(vec2 p, float r, float time) {
- float moonR = u_thickness * 1.35;
- // Disco con borde suave.
- float disk = 1.0 - smoothstep(moonR * 0.86, moonR * 1.00, r);
- // Limb darkening: el borde más oscuro que el centro.
- float limb_factor = sqrt(max(1.0 - (r * r) / (moonR * moonR), 0.0));
- // Cráteres y mares lunares vía fbm.
- float craters = fbm_c(p * 22.0) * 0.45 + fbm_c(p * 48.0) * 0.20;
- // Fase: terminator se mueve de izquierda a derecha lentamente.
- // 1 ciclo lunar visible cada ~38 s. sin(t*0.165) recorre full→new→full.
- float phase = sin(time * 0.165) * 0.5 + 0.5; // 0..1
- float terminator_x = mix(-moonR * 1.1, moonR * 1.1, phase);
- float nx = p.x;
- float lit = smoothstep(terminator_x - moonR * 0.12, terminator_x + moonR * 0.05, nx);
- // Color superficie lunar (gris-azulado).
- vec3 surface = vec3(0.86, 0.88, 0.94) * (0.70 + craters * 0.55);
- // Halo cercano al limb iluminado (luz dispersada).
- float outer_glow = smoothstep(moonR * 1.18, moonR * 0.94, r) - disk;
- vec3 glow = vec3(0.55, 0.70, 0.95) * max(outer_glow, 0.0) * lit * 0.50;
+ float moonR = u_thickness * 1.40;
+ if (r > moonR * 1.20) return vec3(0.0);
+
+ // Normales de la esfera proyectadas en pantalla (sólo la cara visible).
+ float nx = p.x / moonR;
+ float ny = p.y / moonR;
+ float n2 = nx * nx + ny * ny;
+ float nz = sqrt(max(1.0 - n2, 0.0));
+ float disk = 1.0 - smoothstep(moonR * 0.88, moonR * 1.00, r);
+
+ // Limb darkening realista (regolito lunar dispersa más al borde).
+ float limb_factor = pow(max(nz, 0.0), 0.45);
+
+ // === SUPERFICIE: 4 capas + crater rings ===
+ // Maria — mares oscuros grandes (Mare Imbrium, Tranquillitatis, etc.)
+ float maria_n = fbm_c(p * 4.5 + vec2(2.3, 1.1));
+ float maria = smoothstep(0.42, 0.60, maria_n);
+ // Cráteres grandes (radio mid).
+ float craters_mid = fbm_c(p * 13.0 + vec2(8.5, 3.2));
+ // Cráteres chicos.
+ float craters_small = fbm_c(p * 28.0 + vec2(17.1, 5.8));
+ // Detalle fino y micro (granularidad de polvo).
+ float fine = fbm_c(p * 55.0 + vec2(7.3, 11.4));
+ float micro = fbm_c(p * 110.0);
+ // Rims (bordes elevados de cráteres) — picos donde el fbm cruza 0.5.
+ float ring_mid = pow(abs(craters_mid - 0.5) * 2.0, 3.5);
+ float ring_small = pow(abs(craters_small - 0.5) * 2.0, 5.0);
+
+ float albedo = 0.80;
+ albedo += (craters_mid - 0.5) * 0.32;
+ albedo += (craters_small - 0.5) * 0.22;
+ albedo += (fine - 0.5) * 0.20;
+ albedo += (micro - 0.5) * 0.10;
+ albedo += ring_mid * 0.22;
+ albedo += ring_small * 0.16;
+ albedo -= maria * 0.50;
+ albedo = clamp(albedo, 0.10, 1.15);
+
+ // === FASE LUNAR CURVA ===
+ // Ciclo lineal — un mes lunar comprimido en ~40 s. Avanza 0→1
+ // pasando por new(0) → first-q(0.25) → full(0.5) → last-q(0.75) → new(1).
+ float phase = fract(time / 40.0);
+ float phi = phase * 2.0 * PI;
+ // Dirección del sol relativa al observador.
+ // phi=0 → sun_dir = (0, 0, -1) ⇒ atrás de la luna (new moon).
+ // phi=π/2 → sun_dir = (+1, 0, 0) ⇒ a la derecha (first quarter).
+ // phi=π → sun_dir = (0, 0, +1) ⇒ frente al observador (full moon).
+ // Como `dot(normal, sun_dir) = nx*sin(phi) - nz*cos(phi)`, el terminador
+ // resulta ser una elipse en la pantalla — curva como en la luna real.
+ float lit_value = nx * sin(phi) - nz * cos(phi);
+ float lit = smoothstep(-0.035, 0.035, lit_value);
+
+ // Color superficie (gris ligeramente azulado).
+ vec3 surface = vec3(0.86, 0.88, 0.94) * albedo;
+
+ // Halo cercano al limb iluminado — luz dispersada en el regolito.
+ float outer_glow = smoothstep(moonR * 1.15, moonR * 0.95, r) - disk;
+ vec3 glow = vec3(0.55, 0.70, 0.95) * max(outer_glow, 0.0) * lit * 0.55;
+
return surface * disk * lit * limb_factor + glow;
}
@@ -317,13 +358,14 @@ vec3 render_body(int kind, vec2 p, float r, float time, float pulse) {
vec3 element_cloud(vec2 p, vec2 tip, vec2 outward, vec3 color, float time, int kind) {
vec2 perp = vec2(-outward.y, outward.x);
// Centro de la nube: bien adentro del cuadrante (más allá del tip).
- vec2 cloud_center = tip + outward * 0.22;
+ vec2 cloud_center = tip + outward * 0.28;
vec2 to_p = p - cloud_center;
float along = dot(to_p, outward);
float perp_d = dot(to_p, perp);
- // Anisotropía: bien ancha perpendicular, larga a lo largo del eje.
- float sigma_along = 0.42;
- float sigma_perp = 0.34;
+ // Anisotropía: el aura cubre TODO el cuadrante del cardinal. Sigmas
+ // grandes → se solapan en las esquinas (NE/NW/SE/SW) y crean mezclas.
+ float sigma_along = 0.62;
+ float sigma_perp = 0.62;
float base = exp(-(along * along) / (2.0 * sigma_along * sigma_along)
-(perp_d * perp_d) / (2.0 * sigma_perp * sigma_perp));
// Textura noise animada por elemento.
@@ -344,7 +386,7 @@ vec3 element_cloud(vec2 p, vec2 tip, vec2 outward, vec3 color, float time, int k
// AGUA: ondulaciones grandes que viajan hacia afuera.
modulation = 0.50 + 0.50 * sin(time * 0.9 - along * 5.0 + n * 4.0);
}
- return color * base * max(modulation, 0.0) * 0.28;
+ return color * base * max(modulation, 0.0) * 0.26;
}
// Chacana de 2 escalones (mística clásica de Tiwanaku).
@@ -589,6 +631,73 @@ void main() {
}
";
+/// Capa overlay de nubes apenas visible, dibujada DESPUÉS de la chacana
+/// con `blend = SRC_ALPHA, ONE_MINUS_SRC_ALPHA` (compositing normal).
+/// Dos capas FBM en parallax distinto del fondo, alpha máximo ~0.10.
+/// Da sensación de niebla / cirros pasando por delante de la escena.
+///
+/// Uniforms: `u_resolution`, `u_time`, `u_parallax`.
+pub const FS_OVERLAY_CLOUDS: &str = "#version 300 es
+precision highp float;
+in vec2 v_clip;
+in vec2 v_uv;
+out vec4 fragColor;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec2 u_parallax;
+
+float hash21o(vec2 p) {
+ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+}
+float vnoise_o(vec2 p) {
+ vec2 i = floor(p);
+ vec2 f = fract(p);
+ f = f * f * (3.0 - 2.0 * f);
+ float a = hash21o(i);
+ float b = hash21o(i + vec2(1.0, 0.0));
+ float c = hash21o(i + vec2(0.0, 1.0));
+ float d = hash21o(i + vec2(1.0, 1.0));
+ return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+}
+float fbm_o(vec2 p) {
+ float v = 0.0;
+ float a = 0.55;
+ for (int i = 0; i < 4; i++) {
+ v += a * vnoise_o(p);
+ p = p * 2.10 + vec2(3.1, 9.4);
+ a *= 0.55;
+ }
+ return v;
+}
+
+void main() {
+ float aspect = u_resolution.x / max(u_resolution.y, 1.0);
+ vec2 uv = v_clip;
+ uv.x *= aspect;
+
+ // Parallax inverso (las nubes 'delante' se mueven al revés que las del
+ // fondo) → percepción de capa más cercana.
+ vec2 drift1 = vec2( u_time * 0.020, u_time * 0.007) - u_parallax * 0.05;
+ vec2 drift2 = vec2(-u_time * 0.028, u_time * 0.013) - u_parallax * 0.09;
+
+ // Escalas grandes (~0.55 y 1.30) = cúmulos amplios, no granulado.
+ float n1 = fbm_o(uv * 0.55 + drift1);
+ float n2 = fbm_o(uv * 1.30 + drift2);
+
+ // Densidad: sólo las crestas del noise se vuelven nube. Mucha del
+ // viewport queda transparente.
+ float dens = smoothstep(0.55, 0.88, n1) * 0.65
+ + smoothstep(0.50, 0.82, n2) * 0.35;
+
+ // Color levemente azul-blanco; con baja densidad tira a gris.
+ vec3 cloud_color = mix(vec3(0.55, 0.62, 0.74), vec3(0.90, 0.93, 1.00), dens);
+
+ // Alpha bajísimo: 0.10 máximo (apenas visible, como pidieron).
+ float alpha = dens * 0.10;
+ fragColor = vec4(cloud_color, alpha);
+}
+";
+
/// Geometría del quad fullscreen: dos triángulos en clip-space.
pub const FULLSCREEN_QUAD: [f32; 12] = [
-1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0,