Can anyone help me with applying lensflare to a gemstone?

[Junior]

I am trying to simulate lens-flare from a gem stone that is part of a jewelry ring. The model that was exported from Blender. The ring is rotating on its central axis. (The rotation was animated in Blender.)  I added the lensflare to the main gem mesh but the origin seem to be at the center of the ring instead of the center of the gem. (You can see it here . Each mesh has its own distinct origin in Blender.) The flares are also pointing  upward in the 'z' axis and they do not rotate with the ring. Is there a way to fix it so that:- 

1. The lens-flare can point in the 'x' or 'y' axis instead of the 'z' axis only.
2. The lens-flare can rotate when the ring rotates. 
3. The lens-flares can only be seen when the ring rotates at a certain angle to the camera, and then fade away when the angle changes. 

I have attached the complete Babylon.js project with the Blend file to this post. I would greatly appreciate the assistance of anyone who can help me. Thank you. 

3dring.zip

[GameMonetize]

Is this wiki helpful ?

https://github.com/BabylonJS/Babylon.js/wiki/How-to-use-lens-flares

[Junior]

I have followed the instructions as described in the wiki before I posted this request. I got stuck and could not find a solution to my challenge. I believe that it could be solved using vector coordinates. I am not sure how to do this but I hope that someone is able to assist me. 

[Wingnut]

Hi Junior!  I think I know what you are trying, and lens flare might not be a good tool.  But who knows?    I had a little fun trying some things...  http://www.babylonjs.com/playground/#1D6MP7#1  This one uses the camera as the emitter, and the camera then rotates around the "gem", as opposed to rotating the gem itself.

 

I had a limited amount of textures to choose-from in the playground, but maybe with the right textures (twinkles)... it might look ok.

 

Notice that all lights in that scene... have no intensity.  Interesting, huh?    Turn them ON, no major changes will happen.

 

Another approach... might be sprites.  What IS a sparkle/twinkle?  Well, its a flash of light that tends to blind the camera... for a QUICK moment.  So, if you placed sprites in front of the gem (sprites always face the camera), and then built a very short sprite animation of a "twinkle" growing from tiny spark, to large, and then back to nothing (using alpha transparency around the sparkle)... (much like the twinkles you show in the picture), that might work.

 

Junior's sparkle and twinkle workshop.  Part of the "Glitter and Faery Dust" series. 

 

Oh well, modify and make more saves to that playground scene, everyone, as wanted.  I didn't do so well at making twinkles, but we have a playground scene to experiment-with, now, so we can put the whole team of sparkle-masters on the case. 

 

You might get some interesting results with the demo url above... IF you make 4 lens flare systems (or more), but put only one (likely white) flare in each system's array-of-flares.  Use the camera for the emitter on all 4 (or more) systems.  *shrug*  This way, each lensFlareSystem makes one flash... and not a "string" of flares.

 

I had to try it:  http://www.babylonjs.com/playground/#1D6MP7#2    4-pack of lensFlareSystems...  *shrug*  Different size twinkles each time it is runned... because of the .random() calls.

[Junior]

Hello Wingnut,

This is exactly what I have been looking for. You have made my day. Thank you for sharing your 'sparkles' with me.

[Wingnut]

Cool!  I have a feeling that a single lensFlareSystem would do the exact same thing (with 1-4 child flares all positioned close-to or atop each other).  I don't know if light1 is used in the calculation of the flares.  Considering we had the .intensity of all lights set to zero, I tend to think no.

 

It would nice to be able to seriously adjust the occurrence-rate of the sparkles (from lots more to lots less).

 

If you experiment with those things, or learn from the code... tell us what you discover, okay?  Thanks!

 

See that last section in the lens flare tutorial?  "Babylon.js can also detect occlusions for you. A mesh can occlude the lens flares if the following conditions are met"...   I think, maybe, occlusion means 'blockage'.  And occlusion testing... is testing if some mesh in the scene... is blocking the lens flares.

 

I'm just guessing.  A wiki page about ambient occlusion might help.  Also, I found a talkie web page about someone working with lens flares in openGL.  The code is not applicable, but the talking is.