xephorium / halo3loadingscreen

A 4K remaster of the Halo 3 loading screen built in WebGL.

Halo 3 Loading Screen

A 4K remaster of Halo 3's loading screen built in WebGL.

Live Site        YouTube Loop        Wallpaper Engine

Render Options

Since this animation runs in real time, it supports a number of neat rendering options! The following flags can be appended to the URL to scale resolution, adjust speed, or disable individual draw calls. For example: xephorium.github.io/Halo3LoadingScreen?2k&halfspeed&nologo

Render Flag	Effect
sd	720p Resolution
(no flag)	1080p Resolution
2k	1440p Resolution
4k	4K Resolution
ultrawide	21:9 Aspect Ratio
megawide	32:9 Aspect Ratio
halfspeed	Slows Animation to 1/2 Speed
quarterspeed	Slows Animation to 1/4 Speed
nologo	Disables Logo
smalllogo	80% Logo Size
tinylogo	60% Logo Size
nogrid	Disables Background Grid
nolines	Disables Guide Lines
noblocks	Disables Blocks
noparticles	Disables Particles
novingette	Disables Vingette Effect

UltraHD Improvements

This remaster takes some creative license. After much tinkering, I found that the flurries of the original animation could become overwhelming in proper HD. So by default, particle size is slightly lowered. The background is also gently brightened to improve visual cohesion. That said, both of these artistic choices can be disabled using the following flags if you prefer the classic experience. For example: xephorium.github.io/Halo3LoadingScreen?classicbackground&classicparticles

Render Flag	Effect
classicbackground	Classic Black Background
classicparticles	Classic Particle Scale

Variants

Finally, in the spirit of Adrien Perez's legendary easter egg in Halo 3's original loading screen (happy birthday, Lauren!), this loop has a few fun variants. Each can be accessed with the following flags.

Variants
installation08
vergil
infinite
destiny
vintage

Credits & Resources

• This program was built atop a simple particle shader program provided by Henry Kang in UMSL's Topics in Computer Graphics course. He's a brilliant instructor and kind soul.
• A great interactive demo of DeCasteljau's bezier spline algorithm. (Adapted for this project's camera pathing.)

Were you blinded by its majesty?

halo3loadingscreen's Issues

Particles Jitter Slightly During Ring Assembly

The effect is particularly visible while using the quarterspeed and 2k flags. I suspect it has to do with the bit depth of the texture being used to store coordinate data. An issue with path interpolation is also possible, though less likely given that I used the same algorithm without issue in SplineInterpolator. 🤷‍♂️