Sign in to follow this  
Kjue

Reshape SpotLight with a texture

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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 by Kjue
Editor got temporarily broken.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.  ;)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.