Creating a Real Time Earth in Unity for WebGL

As part of my thesis I have been attempting to create a compelling view of the Earth. Due to NYU’s response to the Covid-19 pandemic I have lost access to the equipment this would have originally been rendered on, and have now shifted focus from the highest possible quality to something that runs in real time on the web. This is a brief overview of the CG elements of my project, at least where is currently stands.

Colour Map

The base colour, bump, and specular textures are from this website. A 10K resolution of the Earth is not bad for a distant view of the planet, but as soon as the viewer gets any semblance of close, the pixilation becomes obvious:

View of the 10K Earth texture from close up.

Noisy UV Sampling

The way I’ve gotten around this, at least on my budget, is to add a little distortion to the UV map before sampling the texture. Rather than sampling straight from the UV (which is just the default sphere UV projection), I add some 3D perlin noise to the UV map.

UV Map with no noise distortion
UV Map with noise distortion

Essentially this hides the pixelation behind a sort of painterly stylisation. This means that from far away the Earth look realistic and up close it transitions into looking stylistic.

I’ve done the same thing with the clouds, and added some animation to the noise layers. This way a very low resolution cloud texture can appear to be moving, shifting, changing, as real clouds do (although of course in a stylised way)


Atmosphere

One of the major things that I lost when shifting from high powered graphics to WebGL was volumetric scattering. Volumetric/Atmospheric scattering is what makes the sky blue, what gives the atmosphere a gradient from space, and what creates the burning orange clouds of sunset.

To recreate these effects cheaply, I focussed on two effects, Rayleigh scattering and the gradient falloff on the edge of space.

Falloff

To create the falloff effect around the edges, I added two Fresnel nodes. The “Outer” node, which has a higher exponent, is subtracted from the inner node. This provides the usual gentle Fresnel effect of seeming to highlight the edges, however there is a gentle gradient to darkness at the edge rather than the usual hard cutoff.

Rayleigh Scattering

Using the normal value of each pixel, I add a reddish hue to the areas most perpendicular to the main scene light This is a very janky approximation of the actual scattering, but is sot of mimics the effect of sunlight becoming redder the more atmosphere it has to travel through.

Both of these effects are applied (with alpha) to a transparent diffuse material, creating at atmosphere that looks somewhat like this:

Leave a Reply

Your email address will not be published. Required fields are marked *