Reshape SpotLight with a texture

[Kjue]

Hi! I'm hoping that someone else has tried this already. I want to reshape the texture in a projecting spotlight. I tried adjust the uScale and vScale on it and they did not work for me. I tried the same texture on a surface and obviously got the result I was looking for.

I'm looking for an effect where I can reshape the spotlight into other shape than circle really. I think I figured out why it is shaped like a circle because of the math involved. My idea was actually to produce a video projector scene very much like this PG here (Hit Run after loading for first time, otherwise video won't play): https://playground.babylonjs.com/#CQNGRK#7

I basically pasted in the video texture from elsewhere and thought to make a drive-in scene from that. Then the spherical light really would not do there. Help? Thanks!

[Guest]

Hello!

The circle shape is a circle because it comes from the spotlight actually. The texture is applied by projecting it where the light reaches the objects. So you won't be able to change the shape without changing the lighting equation

 

The projection matrix is computed here: https://github.com/BabylonJS/Babylon.js/blob/master/src/Lights/babylon.spotLight.ts#L253

[Kjue]

Thanks, that confirms I found the right spots at least. Any thoughts on changing the shape of the projected texture? Do you think it would make sense to manipulate that instead of the lighting equation? I'm thinking of applying uv-mapping like thing here or padding the sides to make the shape correct.

[Wingnut]

Hi guys.

http://www.babylonjs-playground.com/#1Z89KY#13

Wingnut goofin' around.  This requires shadowGenerator.

I can't make transplane2.visibility = 0, though.  Not so far.

Essentially, I'm shining light thru an inverse cookie-cutter.  Kludge. 

This is probably not helpful, but I thought I should show it.

Note:  This PG was contributed-to... by many people.   Line 44 - mat2trans.anisotropicFilteringLevel = 0;  ...is not understood by me.  Future users may wish to investigate its use/need.

 

[DylanD]

7 minutes ago, Wingnut said:

Hi guys.

http://www.babylonjs-playground.com/#1Z89KY#13

Wingnut goofin' around.  This requires shadowGenerator.

I can't make transplane2.visibility = 0, though.  Not so far.

Essentially, I'm shining light thru an inverse cookie-cutter.  Kludge. 

This is probably not helpful, but I thought I should show it.

 

I think this is a really good simple solution to the problem.  Not sure if it is exactly what OP wants though

[brianzinn]

I had the same idea as Wingnut, so not sure if you are after that same effect done another way (look up):
https://www.babylonjs-playground.com/#X3XD2C#3

[Kjue]

Thanks @Wingnut and @brianzinn those are helpful! I updated the playground (remember to hit Run!) to match those examples and took it a bit further. I noticed there are ways I can adjust the sort of U and V mapping of the texture being projected. This enabled me to clip the video to roughly match the size. @Wingnut you can always use the layerMask to exclude objects from the scene though they are in the renderlist for the shadow generator. I did that here.

You can imagine I'm slightly restless with this kludge though I can see it working. I will think if I can put into place the clipping into the light function directly. I found this example that does precisely that and I think others would love to have that in there too.

Edited July 10, 2018 by Kjue
Editor got temporarily broken.

[Wingnut]

50 minutes ago, Kjue said:

@Wingnut you can always use the layerMask to exclude objects from the scene though they are in the renderlist for the shadow generator.

Hey, thanks, Kjue.  I was wondering about that.  Good info... about the shadowMap renderLists not being layerMask-sensitive.

[Kjue]

Okay I fine tuned it more and made it feasible for my use I think. Still based on the same idea, the trouble was with box cutter not being exactly centered. Here is the last version. You should also notice, that the transparent center of the box is smaller than the sides so it can accommodate the circle being cut. I just made it significantly smaller also.

[Wingnut]

THAT ... is VERY cool!  haha.  Truly tasty mad-scientist stuff.  Time to open a VR movie theater, because kjue has built the projectors. 

[Wingnut]

Would you feel like editing your first post and adding 'projector' tag, and maybe some other tags (theater, movie, gel, etc)?  I can do it, too, if you like/approve.  

We want to be able to find this... with forum searches.

I bookmarked it locally... so hard that i broke my mouse button. 

[Kjue]

Yeah, I'll add them there!