Some time ago I started designing my own realistic 3D Earth in Three.js, trying to both replicate and improve a similar design of mine based on exported images from Blender. Everything worked fine and I’m happy with using just 30 MB for the entire realtime setup in Three.js compared to 4.7 GB via playing the images made with Blender (at the cost of a higher CPU / GPU usage, of course), not to mention the flexibility of being able to modify and add things on the fly and not relying on static assets.
One of the components of this setup is the atmosphere, where I’ve been able to assemble a 30 lines shader “chunk” replacing the #include <color_fragment>
from the Phong shader, which simulates the visuals of the actual atmosphere quite well (glow, fading “aura” outside, corresponding coloring based on the light and camera positions, etc.) via two simple gradients, one for “in” used to color Earth a bit, one for “out” for the aura / glow:
Recently though, after watching a related clip on YT, it occured to me that while my atmosphere looks realistic from the outside, it would be nice to make things realistic from the inside as well, meaning I’d have to create the “back side” of the mesh to look like the sky seen from the ground level.
Here comes my problem - what would be the best way to do it, then how would I do it:
- I tried to approach this in the shader first, by making the material
DoubleSide
and attempting to display a different view for the back side via the dot product between thenormal
and thecameraPosition
, but that didn’t quite work out as expected (it did display the expected color when I went “into” the atmosphere object, but didn’t really look like being the back side when at the margins). - alternatively, I tried to create two meshes: the “out” /
Front
side which I already had, and the “in” /Back
side which I tested out by making a similar butTHREE.BackSide
mesh colored Red to see what comes out of it, and adding them as a group to the scene. The problem is that since both sides or meshes are transparent (with some opacity, of course), when trying the two meshes approach I could see the color of the back side mesh through the front side one.
So, my question is: can a system of two transparent / translucent sides of a sphere be achieved, where the viewer only sees the side which is facing him (with the other being “invisible”)? In other words, can a sphere be made to look like our atmosphere from space when outside it, but like our sky from the ground level when inside it? I know a code to illustrate this would be good, but I’m only looking for a working direction in which to aim, or a very simple example that proves the concept and that it works. Just a simple transparent / translucent sphere reddish on the outside and blueish from the inside would suffice, I can take it and develop as desired from there.