How to change mesh/gui opacity based on the camera angle

Questions
, , ,
1

I am new to babylon js and not sure if there is any way to change multiple mesh/gui opacity based on the camera angel, for example, when the mesh is front facing, opacity should be 1, when the camera turns, the opacity should drop, each mesh should have its own opacity based on where it is

2

Hello and welcome!

Here is a small draft example - Babylon.js Playground
The opacity (material.alpha) is changing in proportion to camera.beta value.

1 Like
3

Thank you for your quick apply, the playground is helpful for me understand. I just changed my question to be more detailed. I found one example Front Facing Div Labels | Babylon.js Playground (babylonjs.com) is closer to what I need, but I need multiple mesh opacity change based on camera angel instead of behind the mesh, I see from line 128 - line 144 in this example, it is calculating the opacity, is that what I need? Not sure how this works

4

You would basically need to check for a few points around how far you are as well and average the result to provide you with a progressive alpha. It is a bit like what happens with soft shadow maps.

This is all just a guess :slight_smile:

5

Could you explain more about “how far you are”, which property can track this?

6

For ArcRotate camera, as in your example, “how far” is defined by current camera.radius

7

Hi @pigga just checking in, do you have any more questions? :slightly_smiling_face: