Hacky Transparent Shadows using Sunlight

Introduction


It’s been a while since ROBLOX released Future is Bright, and so far there hasn’t been a feature observable on Voxel lighting technology added to it: Transparent shadows (shown above.) Roblox’s Future shadows had always been like an on and off switch for every pixel, no in-betweens. But, by using some magic (a.k.a hacky workarounds) we can -kind of- replicate that.

Before we go through the steps, let me address some of the drawbacks of this method:

  1. Adjusting light and object directions could cause the transparent shadows to fail, thus needing adjustment.
  2. Distance can show different shadow appearances, making adjusting a bit of a hassle.
  3. This works only for the sun’s light. PointLight, SurfaceLight, and SpotLight won’t work, almost.

Steps


To begin, prepare two parts for our transparent shadow effect. Observe the following:

Follow the configuration as stated in each part. The glass pane has to be placed on top of the transparent part, as shown in the top-right corner of the photo. This placement will be important in the next step.

Afterward, insert a Texture instance inside the transparent part. Set its Face to Top, or the face of it that meets the surface of the glass pane. This is essential, to hide the Texture we placed, thanks to the glass not rendering Decals, Textures, and other transparent parts. For the image, set the Texture property to the following: [ rbxassetid://6829067064 ]. This is an image of a single stripe.

Now, this is where the idea starts to make sense. Adding more stripes to block light allows for lines of shadows to be closer, up to the point they either touch (or even disappear if the lines are way too thin for the lighting engine to recognize.) To a minimal degree, the shadows’ darkness can be controlled.

By adjusting the StudsPerTileU, we can add more stripes, which will make the shadows appear better with higher Lighting.ShadowSoftness values. Observe:

Notice the harsh shadow stripes under the glass. Now, look at the following:

Shown here are different levels of shadow softness, and how it affects the shadows made by the Texture. Even when each line of shadow has a big gap between other lines, so long as the shadows are blurred it will appear to be transparent.

After playing around with the properties of the Texture and Lighting service, you have finished making your glass that can make transparent shadows. Interestingly, you can place another glass in front of another glass, and the shadows can add up (almost. Somewhat working.)

What Could Go Wrong?


The problems, unfortunately, start here. Moving the camera away can yield different results, as lower-quality shadow cascades start to appear.

Using 0.75 for StudsPerTileU isn’t that good for far distance viewing while using 1 is better, contrary to the earlier photo. Sun direction and object angles also affect how the shadows will look, although camera angles never harm the appearance.

And the worst drawback: This method favors sunlight more, while Light objects are harder to deal with. ShadowSoftness does not appear to affect other Light instances, so it is harder to control the shadows. It does work to some extent, but the light should be on some angle and position, far from the glass panes:

Closing


We’ve finally reached the end of this tutorial, and now you’ve learned a new trick to use for your builds. Thank you for taking the time to read my first tutorial! Let me know if there are some improvements to make.

Have a great day/afternoon/evening!

51 Likes

Amazing! This is one of the best resources I ever saw.

2 Likes

By far, one of the BEST tutorials I’ve found. I’m sure a lot of developers will be really happy for this tutorial!

Edit: If you want to make a good environment I recommend using MaterialService and this tutorial as it covers a lot about ShadowSoftness and other properties!

1 Like

Thanks for appreciating my tutorial! The new MaterialService is also quite interesting, although I have not much knowledge about making materials. I’ll definitely check that out too!

The tutorial you’ve done will match with the outdoor environment. So, we could use materials like Pebble, Concrete, grass etc. to make it neat.

1 Like

Just curious, what’s the lighting settings in your last image? That looks nothing like roblox and I’m jealous…

1 Like

For a second look, it actually does not look like Roblox. Anyways, the lighting effects and settings go like this:

game.Lighting


Ambient : [0, 0, 0]
Brightness : 4
EnvironmentDiff… : 0.385
EnvironmentSpec… : 0.538
OutdoorAmbient : [0, 0, 0]
ShadowSoftness : 0.23
Technology : Future
ClockTime : 0

Atmosphere


Density : 0.3
Offset : 0.25
Color : [255, 255, 255]
Decay : [177, 171, 157]
Glare : 2.13*
Haze : 3.44

Bloom


Intensity : 0.65
Size : 56
Threshold : 1.219

ColorCorrection


Contrast : 1.6
TintColor : [140, 140, 140]

1 Like

Thank you so much! Awesome tutorial btw

1 Like

Thank you too for reading my tutorial!

1 Like

This just looks too realistic

More:
Shadows Off:


Shadows On:

All thanks to @Y_VRN and his tutorial!

1 Like

Wow that was so detailed and cool! Sweet tutorial.

1 Like

Omg I love this, If I ever make a simi-realistic game I will definitely come back to this. Also I really wish roblox allowed us to do this without hacking it

1 Like

Stop “hacking” haha

Anyway, this tutorial is actually amazing, although I likely won’t use it in any major games, I might still use it in showcases. The worst drawback is the glass not rendering transparent stuff behind it, which is why I find it unlikely I’ll use it.

1 Like