Galaxy of Universes & Spiral Nebula

A pure WebGL/GLSL universe visualization combining recursive Spherical Inversion fractals with multi-octave stochastic fields

Mathematical structure of sample-line integration, Differential Spiral Phase, Value Noise, FBM, and linear light compositing

1. Overview

This project provides three real-time shaders, each built on a different generative principle.

The three modes share the same Speed, Intensity, Field Zoom, Manual Rotation, and drag coordinate system, but they are not three approximations of the same physical phenomenon. Galaxy studies the orbital energy of iterated functions, Nebula studies the spatial correlation of stochastic fields, and Hybrid studies the combination of both results.

1.1 Authorship and Model Differences

Hybrid Universe is a custom shader designed and implemented directly by the author.

Dave Hoskins's Galaxy of Universes and the Kali-family Spherical Inversion represent the algorithmic lineage of the fractal branch, while Value Noise and FBM are the mathematical materials of the nebula branch.

The method of combining the two source visuals by merging their two layers within a shared coordinate, time, and exposure system is itself the original implementation of Hybrid.

The key difference in Hybrid lies in the following compositing formula:

Unlike simple addition $\mathbf Cg + \mathbf Cn$, nebula emission is further amplified in regions where fractal filaments are already bright,

while the dust field derived from FBM attenuates certain regions.

Therefore, the appearance of Hybrid cannot be reproduced by rendering Galaxy and Nebula separately and overlaying them with transparency. What matters is reproducing the compositing rule by which the two branches influence each other in linear light space, before exposure is applied.

2. Shared Screen Coordinates

2.1 Aspect Ratio Correction

For pixel coordinate $\mathbf x = (x, y)$ and resolution $\mathbf R = (Rx, Ry)$,

normalization is applied as shown. Dividing each axis separately by $Rx$ and $Ry$ is not used, because it stretches radially symmetric structures into ellipses depending on the screen's aspect ratio. Nebula uses $\min(Rx, Ry)$ normalization for the same purpose.

2.2 Zoom, Rotation, and Drag

$z$ is Field Zoom, $\theta_r$ is Manual Rotation, and $\mathbf m$ is the interpolated drag position. Hybrid applies a slightly larger drag offset of $0.35$.

3. Galaxy of Universes

Analysis of "Galaxy of Universes" — ShaderToy, a work by Dave Hoskins.

The structure of galaxy.frag is not a rigorous gravitational N-body or general relativistic simulation. It is a procedural fractal that advances a single pseudo-3D sample line from each screen pixel and accumulates the orbital energy obtained by applying recursive Spherical Inversion at each position.

3.1 Radius-Dependent Differential Spiral Phase

The rotational phase varies with the distance from center $r = |\mathbf u|$.

Closer to the center, the $1/(r + 0.07)$ term grows larger, causing inner orbits to wind more tightly while outer orbits rotate more gradually. This formula produces a visual differential swirl and is not a solution to the Kerr Metric or actual Frame Dragging.

3.2 Sample Line and Start-Point Jitter

Let $s_i$ be the accumulated distance; the sample position is then

constructed as shown. Up to 120 steps are available, but only as many as specified by the UI's Fractal Iterations are executed, with a default of 90. The step length is $0.035$ for Galaxy and $0.033$ for Hybrid.

Integrating at fixed intervals from a fixed starting point produces march bands in the form of contour rings. To disperse these with fine noise, the first position is perturbed using a per-pixel hash.

3.3 8-Iteration Recursive Spherical Inversion

Each sample performs the following transformation exactly 8 times.

This transformation combines three operations:

1. $|\mathbf p|$: folds all octants into the positive region.

2. $\mathbf p / (\mathbf p \cdot \mathbf p)$: performs Spherical Inversion with respect to the unit sphere.

3. $-0.659$: shifts the orbit away from the inversion center again.

During iteration, regions where $|\mathbf p|$ is small are greatly magnified while large regions are compressed. As a result, small differences in initial conditions are amplified into distinct orbital lengths and fine filaments.

3.4 Three Energy Accumulators

The orbital energy of a single sample is accumulated across three channels in different ways.

When Wave Modulation is enabled, the first wave is

and the second wave uses a higher spatial frequency and temporal speed.

This is a procedural density wave moving outward from the center, not a pulsar light curve.

3.5 Finite Support Radius

To prevent fractal energy from filling the entire screen uniformly, different Radial Windows are multiplied in.

The differences among the three radii separate the central core, the inner glow, and the outer filaments.

3.6 Color and Output Transform

Galaxy arranges $(v1, v2, v_3)$ in an asymmetric RGB combination. The final output is

where $\gamma_u$ is the UI's Intensity. This is not a physically radiance-preserving Tone Mapping but an artistic output transform that controls the contrast of fractal energy.

3.7 galaxy.frag Formula–Code Correspondence

The formulas below are not general illustrative expressions; they are canonical forms that directly reflect the constants and operation order of the current GLSL implementation.

Implementation — shaders/galaxy.frag, main()

float t = iTime * 0.1 * uSpeed
        + ((0.25 + 0.05 * sin(iTime * 0.1 * uSpeed))
        / (length(uv) + 0.07)) * 2.2;

p = s * vec3(uv, 0.0);
p.xy *= ma;
p += vec3(0.22, 0.3, s - 1.5 - sin(iTime * 0.13 * uSpeed) * 0.1);

for (int j = 0; j < 8; j++) {
    p = abs(p) / dot(p, p) - 0.659;
}

The final RGB combination also matches the code exactly.

vec3 col = vec3(
    v3 * (1.5 + sin(iTime * 0.2 * uSpeed) * 0.4),
    (v1 + v3) * 0.3,
    v2
) + smoothstep(0.2, 0.0, len) * 0.85
  + smoothstep(0.0, 0.6, v3) * 0.3;

col = min(pow(abs(col), vec3(uIntensity)), vec3(1.0));

Here $S$ is uSpeed and $I$ is uIntensity.

The implementation and GLSL are mapped one-to-one.

4. Spiral Nebula

nebula.frag does not use a recursive fractal; instead, it composites a spatially continuous stochastic field at multiple scales.

4.1 2D Value Noise

Coordinate $\mathbf p$ is split into integer cell $\mathbf i = \lfloor \mathbf p \rfloor$ and intra-cell coordinate $\mathbf f = \operatorname{fract}(\mathbf p)$. The hash values at the four corners are

constructed as shown, then bilinear interpolation is performed using the cubic Hermite Curve

to reduce the gradient discontinuities at cell boundaries that appear when only linear interpolation is used.

4.2 5-Octave FBM

Each octave doubles the frequency and halves the amplitude. Low-frequency octaves capture large gas clumps, while high-frequency octaves handle fine fluctuations at the edges.

4.3 Polar Spiral Warp

By sampling the noise in Cartesian coordinates at positions defined by this spiral coordinate, circular clouds acquire a wound-arm structure.

4.4 Gas Field at Three Spatial Frequencies

$n1$ and $n2$, moving in opposite directions, create shear in the arms, while $n_3$, sampled directly in screen coordinates, adds fine turbulence that is independent of the spiral.

The final density is

The smoothstep removes the sparse noise floor, and the exponential decay prevents the gas from continuing at the same density to the edge of the screen.

4.5 Color Space

Purple $\mathbf c1$, magenta $\mathbf c2$, and blue $\mathbf c_3$ are interpolated in two stages.

The color variation between interior and exterior is determined in the same coordinate space as the gas density calculation, not by a separate post-processing gradient.

4.6 Central Core and Exposure

After adding the core, exponential exposure is applied to the entire color.

$I$ is Intensity / Glow. This transform has no negative values and asymptotically compresses large luminance values toward 1, so it preserves color in the central region longer than a simple clamp would.

4.7 nebula.frag Formula–Code Correspondence

Implementation — shaders/nebula.frag, main()

float spiral = a + r * 4.0 - time * 0.5;
vec2 spiralCoord = vec2(cos(spiral), sin(spiral)) * r;

float n1 = fbm(spiralCoord * 3.0 + time * 0.1);
float n2 = fbm(spiralCoord * 5.0 - time * 0.15);
float n3 = fbm(uv * 8.0 + vec2(time * 0.05, 0.0));

float nebula = n1 * 0.5 + n2 * 0.3 + n3 * 0.2;
nebula = smoothstep(0.2, 0.8, nebula) * exp(-r * 0.8);

The final color corresponds, in code order, to

vec3 finalColor = mix(color1, color2, n1);
finalColor = mix(finalColor, color3, smoothstep(0.3, 0.7, r))
           * nebula * 2.0;
float core = exp(-r * 3.0) * (1.0 + 0.3 * sin(time * 3.0));
finalColor += vec3(1.0, 0.95, 0.9) * core * 2.0;
finalColor *= 1.0 - r * 0.3;
finalColor = 1.0 - exp(-finalColor * uIntensity);
finalColor = pow(finalColor, vec3(0.85));

as shown.

5. Hybrid Universe

hybrid.frag is an original compositing model I designed myself. Rather than alpha-blending finished renders of Galaxy and Nebula, it computes both density fields at the same $\mathbf u$ and $t_s$, then cross-modulates them in linear light space before exposure is applied.

5.1 Galaxy Branch

• Up to 120 samples, default 90 samples

• 8 Spherical Inversions per sample

• Asymmetric RGB combination of $(v1, v2, v_3)$

• Central core and outer filament Radial Windows

5.2 Nebula Branch

Hybrid uses three denser FBM fields.

5.3 Linear Light Compositing

Nebula emission responds more strongly in regions where fractal filaments are already bright. Because the two branches are not tone-mapped separately before addition, the central luminance and color blending order are preserved.

5.4 Dust Attenuation

High-frequency gas partially darkens interior regions that exceed a certain threshold, preventing every structure from appearing like a plastic surface with only additive emission.

5.5 Final Exposure

In Hybrid, Intensity is applied only once, after linear light compositing.

5.6 hybrid.frag Canonical Formula–Code Correspondence

The originality of Hybrid lies not merely in having two branches, but in the order and functions used to combine them. The following is the complete compositing sequence of the current implementation.

Galaxy Branch

Implementation — shaders/hybrid.frag, main()

vec3 galaxyCol = vec3(
    v3 * (1.6 + sin(time * 0.2) * 0.4) + v1 * 0.2,
    (v1 + v3) * 0.38 + v2 * 0.15,
    v2 * 1.1 + v1 * 0.25
);
galaxyCol += smoothstep(0.2, 0.0, len) * 0.95;
galaxyCol += smoothstep(0.0, 0.6, v3) * 0.35;

Nebula Branch

float nebulaGas = n1 * 0.5 + n2 * 0.35 + n3 * 0.15;
nebulaGas = smoothstep(0.2, 0.78, nebulaGas) * exp(-len * 0.9);
vec3 nebulaCol = mix(nebColor1, nebColor2, n1);
nebulaCol = mix(nebulaCol, nebColor3, smoothstep(0.3, 0.8, len))
          * nebulaGas * 1.6;

Cross-Modulation

vec3 col = galaxyCol + nebulaCol * (0.6 + galaxyCol * 0.8);

The multiplication and addition operate per RGB component. That is, bright blue fractal regions amplify the blue component of the nebula, and bright red regions amplify the red component, each differently.

Core and Dust

float core = exp(-len * 3.5) * (1.0 + 0.25 * sin(time * 3.0));
col += vec3(1.0, 0.96, 0.92) * core * 1.8;

float dust = smoothstep(0.4, 0.7, n2)
           * (1.0 - smoothstep(0.05, 0.6, len));
col *= 1.0 - dust * 0.25;

Single Output Transform

col = 1.0 - exp(-col * uIntensity * 1.15);
col = pow(col, vec3(0.85));

This boxed formula is executed exactly once, after all compositing, core, and dust calculations are complete.

6. Mathematical Errors Corrected with AI Assistance During Implementation

6.1 Aspect Ratio Distortion

The original $[-0.5, 0.5]^2$ coordinates stretched radially symmetric structures horizontally on widescreen displays. The current implementation divides both axes together by $Ry$ or $\min(Rx, R_y)$ to preserve the meaning of circular distance $r$.

6.2 Color Interpolation No-Op

A previous version of Hybrid contained the following pattern:

mix(nebColor3, nebColor3, weight)

Both arguments were identical, so the interpolation had no effect, and it also overwrote the blend of two colors computed in the preceding line. The current version is

mix(mix(nebColor1, nebColor2, n1), nebColor3, radialWeight)

structured so that all three colors actually reach the output.

6.3 Fixed-Step Banding

Sample-line integration that started every pixel at $s = 0$ produced uniform circular bands. The current implementation applies a per-pixel Hash Jitter to the first step.

6.4 Missing Hash Owner

A compile error where galaxy.frag called hash() for start-point jitter without defining it has been removed. Each fragment shader now owns the hash/noise functions it uses directly.

7. Parameters and Their Mathematical Effects

Fractal Iterations does not change the inner 8 repetitions of the Spherical Inversion. It only changes the number of outer samples evaluated along the ray. The boundary between the fractal definition itself and the integration quality is therefore preserved.

8. Runtime and Implementation Structure

galaxy-of-universes/
├── index.html # Three modes and parameter UI
├── style.css # Fullscreen canvas and off-canvas studio
├── README.md # Math and rendering documentation
├── js/
│ ├── shaders.js # Explicit GLSL URLs and preset registry
│   ├── renderer.js              # WebGL compile/link, uniforms, animation loop
│ ├── controls.js # drag/zoom/mode switching and accessibility state
│ └── main.js # Initialization and error boundary
└── shaders/
    ├── vertex.vert              # fullscreen triangle pair
    ├── hybrid.frag # Galaxy + Nebula Nonlinear Linear Light Blending
    ├── galaxy.frag # Recursive Spherical Inversion sample-line field
    └── nebula.frag              # spiral-warped FBM field

GLSL dependency files are declared explicitly so that both the static project bundler and the browser can resolve them.

const SHADER_URLS = {
  vertex: new URL('../shaders/vertex.vert', import.meta.url),
  hybrid: new URL('../shaders/hybrid.frag', import.meta.url),
  galaxy: new URL('../shaders/galaxy.frag', import.meta.url),
  nebula: new URL('../shaders/nebula.frag', import.meta.url)
};

All GLSL is fetched in parallel and compiled strictly at startup. Missing files, shader compile failures, and program link failures are not silently substituted with another mode.

9. Validation Criteria

The following criteria were used as validation targets throughout development.

1. The central core and Radial Window remain circular even when the aspect ratio changes.

2. Lowering Fractal Iterations reduces only the sample density; the 8-iteration Spherical Inversion structure is preserved.

3. Turning off Wave Modulation stops only the radial wave; the fractal orbits and FBM gas remain.

4. The Galaxy start-point bands appear as fine dithering rather than fixed circular rings.

5. Nebula's three noise fields move at different speeds and in different coordinate spaces.

6. All three palettes of Hybrid, blue, purple, and magenta, reach the screen.

7. When switching modes, each GLSL source viewer displays the actual active fragment source.

8. Missing files or GLSL errors surface clearly as initialization errors.

10. Controls

11. Interpretive Limitations

• The Spherical Inversion field is not the result of integrating an actual galaxy's mass distribution or stellar orbits.

• The $1/(r + 0.07)$ differential phase is a procedural warp that creates spiral structure, not a frame-dragging solution from general relativity.

• Spiral Nebula is a model of a 2D stochastic field wound in polar coordinates, not a radiation hydrodynamics simulation.

• The RGB palettes were not derived directly from spectroscopic observations.

• Intensity is an exposure/contrast control, not a unit of energy.

• Hash and Value Noise are deterministic pseudorandom functions and do not reproduce the full statistics of physical turbulence.

12. References and Algorithmic Lineage

Implemented together with AI

• Hybrid Universe: shared coordinate design for the fractal and nebula branches, luminance-responsive linear light compositing, FBM dust attenuation, the single-exposure pipeline, and final color design

Algorithmic Lineage and References

• "Galaxy of Universes" — ShaderToy, Dave Hoskins —

Foundation of the Galaxy of Universes fractal branch

• Kali — ShaderToy — lineage of the spherical-inversion iterated function system

• Inigo Quilez — reference for Value Noise, FBM, SDF, and raymarching mathematics