# Different front and back sides for a transparent layout

**URL:** <https://discourse.threejs.org/t/different-front-and-back-sides-for-a-transparent-layout/41580>\
**Category:** Questions\
**Tags:** transparency, materials, geometry, shaders\
**Created:** [August 18, 2022, 8:56pm UTC](https://discourse.threejs.org/t/different-front-and-back-sides-for-a-transparent-layout/41580 "2022-08-18T20:56:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yin\_Cognyto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yin_cognyto/32/28865_2.png) [@Yin\_Cognyto](https://discourse.threejs.org/u/Yin_Cognyto)\
**Post date:** [August 18, 2022, 8:56pm UTC](https://discourse.threejs.org/t/different-front-and-back-sides-for-a-transparent-layout/41580/1 "2022-08-18T20:56:52Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/c/8c7961c28b836c5daddbc838100c8b689528779f.jpeg)  
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. 😉

---

<div class="post-metadata">

**Author:** ![Yin\_Cognyto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yin_cognyto/32/28865_2.png) [@Yin\_Cognyto](https://discourse.threejs.org/u/Yin_Cognyto)\
**Post date:** [August 19, 2022, 4:03pm UTC](https://discourse.threejs.org/t/different-front-and-back-sides-for-a-transparent-layout/41580/2 "2022-08-19T16:03:59Z")

</div>

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… 🕶