Different front and back sides for a transparent layout

Questions
, , ,
1

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:

Atmosphere - Outside
Atmosphere - Outside584×584 92.3 KB

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 the normal and the cameraPosition, 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 but THREE.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. :wink:

2

Nevermind, I managed to get closer to my objective by using the appropriate Object3D.renderOrder on 3 sphere meshes (inner and back side, in between occlusive and invisible, outer and front side) and setting Material.colorWrite to False on the occlusive one (which must not have Material.depthWrite set to False in order to work as expected and occlude stuff). Still have some things to adjust here and there, but I’m on the right track, so I’ll consider this particular issue solved (I have no idea how to mark it as a solution but anyway).

I was pretty much aware of these properties and attempted to use them in this fashion, but for some reason mixed up the Renderer.sortObjects with Material.renderOrder properties and used it as Material.sortOrder which was obviously not a valid property and the result of me having too many tabs open and messing things up in my brain to create a non existing Three.js syntax. I finally realized the said misrepresentation and after that it all began to show some love… :sunglasses: