Tips on mimicking transparency effect of Samsung Virtual Home

Questions
1

Hello!

Looking for tips on how i can mimick the transparency effects of Samsung’s Smart Thing - Virtual Home app:

smart-things-sample
smart-things-sample1080×2340 258 KB

Specifically i’m interested in:

#1 When there are many walls occluding eachother, only the first wall is visible and any further walls does not impact the final color at all.

#2 Objects occluded by one or many walls gets rendered as if they were only occluded by 1 wall

Setup a small test where i’ve been playing around with depthtest & depthwrite etc but no success:

https://codepen.io/filipGG-the-styleful/pen/myemyoy

Any tips would be very much appreciated :slight_smile:

PS: What my project currently looks like:

walls-opacity-sample
walls-opacity-sample1096×857 66.3 KB

1 Like
2

You can extend the material and modify the shader to detect vertices with normals pointing up or down, then apply a custom opacity.

Here’s a working example on JSFiddle: https://jsfiddle.net/6cs72y80/

image
image1274×534 29.2 KB

1 Like
3

Thanks, for that problem I ended up removing the top face and just put a separate opaque plane instead.

for the “looking through many walls at the same time” problem I ended up creating custom shader where i first render the walls only so that i get the depth which i later can use to test if I should discard a fragment or not and it seems to work well:

https://codepen.io/filipGG-the-styleful/pen/myemyoy

The only issue that remains now from what i can see is sort order issues with the transparent sprites:

image
image931×521 12.9 KB

Where in some angles the sprite centroid is closer to the camera than the wall centroid…

I have been playing around with trying to use the same technique i did for the walls with checking if the pixel is occluded by a wall or not and then manually try to mix the colors properly… but cannot seem to get it right.

Also tried to sort the objects manually by checking line intersections between the camera → sprite and wallLeft → wallRight but realized pretty quickly that this will be way to hard to get proper due to different sprite sizes and also would be very expensive since I might have thousand walls and hundreds of sprites…

Another thought i had was to chop up the walls into smaller pieces but there will still be a lot of edge cases I think since the sprites ( that represents equipment readings ) might be placed very close to the wall and in corners etc…

Feels like it should be solvable with utilizing the walls depthTexture … if anyone has any ideas I would be very grateful :slight_smile: