A better way to achieve volume light

[renjianfeng]

What better way to achieve this effect？VolumetricLightScatteringPostProcess may not be able to achieve such effect，I noticed that The standard pipeline can be used, but The standard pipeline has very low FPS

.Do you have any better Suggestions?

 

 

[NasimiAsl]

so nice challenge 

i go on it in next day   maybe some geometry + shader can help

[V!nc3r]

The performance-cheapest way to get this effect will be probably to make a dedicated mesh using alpha-add in its material, like in this example: https://sketchfab.com/models/7582b986bf13493084e9bae9442b0638

[renjianfeng]

12 hours ago, NasimiAsl said:

so nice challenge 

i go on it in next day   maybe some geometry + shader can help

Superman, please start your work.

[renjianfeng]

11 hours ago, V!nc3r said:

The performance-cheapest way to get this effect will be probably to make a dedicated mesh using alpha-add in its material, like in this example: https://sketchfab.com/models/7582b986bf13493084e9bae9442b0638

Yes, a good idea, but if the moving object in the scene, the volume of light may need to be generated dynamically. It's like a shadow.

[V!nc3r]

Yep if the light is dynamic, forgot this tip

[NasimiAsl]

some wrong state i see but want show first demo

https://www.babylonjs-playground.com/#MVX6X5#3

https://www.babylonjs-playground.com/#MVX6X5#5

https://www.babylonjs-playground.com/#MVX6X5#4

 

*point you most design your svg path pattern_forLight.svg  (use exact this size and  make your paths)

*look line 209

var path2s =[
    {a:"m 532.09584,465.98716 -5.4239,4.27469 v -13.39969 c 1.85702,2.90736 4.46202,4.78922 5.4239,9.125 z",f:0,},
    {a:"m 519.90421,465.98716 5.4239,4.27469 v -13.39969 c -1.85702,2.90736 -4.46202,4.78922 -5.4239,9.125 z",f:0,},
    {a:"m 515.10937,471.67466 5.11261,3.788 4.01792,-4.68692 -4.93978,-3.92315 c -1.28845,2.09546 -2.77068,3.7277 -4.19075,4.82207 z",f:0,},
    {a:"m 536.89068,471.67466 -5.11261,3.788 -4.01792,-4.68692 4.93978,-3.92315 c 1.28845,2.09546 2.77068,3.7277 4.19075,4.82207 z",f:0,},
    {a:"m 525.32811,471.14341 v 4.78439 l -4.46874,0.49686 z",f:0,},
    {a:"m 526.67194,471.14341 v 4.78439 l 4.46874,0.49686 z",f:0,},
    {a:"m 544.01568,480.79966 c -3.79562,-2.24338 -7.8064,-3.62906 -12.125,-4.1875 l 5.9375,-4.5 c 2.92178,0.5575 4.15773,6.04862 6.1875,8.6875 z",f:0,},
    {a:"m 507.98437,480.79966 c 3.79562,-2.24338 7.8064,-3.62906 12.125,-4.1875 l -5.9375,-4.5 c -2.92178,0.5575 -4.15773,6.04862 -6.1875,8.6875 z",f:0,},
    {a:"m 526,526.17859 h -22.49998 v -35.44143 c 0,0 0.99996,-12.99037 22.49998,-12.99037 21.50002,0 22.75226,13.13602 22.75226,13.13602 v 35.29578 z",f:0,}, 
     
     ];

array format is = >   {a:'svg path d',f:1 /*flip 1- or not : 0*/}

* that make light on fxyz => y=0 

need some Postprocess or attach general part shader to all shader for make exact light effect with bump on floor

 

multi light

https://www.babylonjs-playground.com/#MVX6X5#7

[renjianfeng]

Great work. This effect is all up to expectations.