babylonjs Shine a light on a transparent image only on the non transparent part

[yevo]

I have two images loaded. Once is scodix.jpg which is a regular jpg image and on top of that i have a scodix.png that is a transparent image with only a small part that has artwork. What im trying to accomplish is to have a light shining on the transparent image but only showing the actual image to have the light and shadow affect. below is the code i have but when the light shines its shining on the entire thing including the non transparent part or jpg part. Im trying to accomplish a scene where a user can rotate the image and the lighting will continue to follow the transparent image and possibly show a shadow. Can anyone help?

 var createScene = function () {
                    var scene = new BABYLON.Scene(engine);

                    //Create a light
                    var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);

                    //Create an Arc Rotate Camera - aimed negative z this time
                    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, 1.0, 210, BABYLON.Vector3.Zero(), scene, true);
                    camera.attachControl(canvas, true);

                    //Creation of a repeated textured material
                    var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
                    materialPlane.emissiveTexture = new BABYLON.Texture("images/scodix.jpg", scene);
                    //materialPlane.emissiveTexture = new BABYLON.Texture('images/scodix1.png', scene);
                    //materialPlane.useAlphaFromDiffuseTexture
                    materialPlane.specularColor = new BABYLON.Color3(0, 0, 0);
                    materialPlane.backFaceCulling = true;//Allways show the front and the back of an element
                    materialPlane.emissiveTexture.level = 1; //It is kind of z-index

                    var spotPlain = new BABYLON.StandardMaterial("texture", scene, true);

                    spotPlain.diffuseTexture = new BABYLON.Texture("images/scodix.png", scene);
                    spotPlain.anisotropicFilteringLevel = 0;
                    spotPlain.diffuseTexture.hasAlpha = true;
                    spotPlain.useAlphaFromDiffuseTexture;
                    spotPlain.hasAlpha = true;
                    spotPlain.specularColor = new BABYLON.Color3(0, 0, 0);
                    spotPlain.backFaceCulling = true;//Allways show the front and the back of an element

                    //Creation of a plane
                    var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width: 261, height: 153}, scene, true, BABYLON.MeshBuilder.FRONTSIDE);
                    plane.material = materialPlane;
                    var plane2 = BABYLON.MeshBuilder.CreatePlane("plane2", {width: 261, height: 153}, scene, true, BABYLON.MeshBuilder.FRONTSIDE);
                    plane2.material = spotPlain;
                    scene.debugLayer.show();
                    return scene;
                };
 

[Wingnut]

Hiya @yevo, welcome to the Babylon.JS forum.

Let's build a playground for your issue/challenge.

http://playground.babylonjs.com/#2DT16W#1

I took some liberties... tweaked a few things.  I think this is what you are seeking.  You want the silhouette of the non-transparent part of the front plane texture (the spirals)... to appear on the bricks plane.  Essentially, making the spotlight become a slide projector.    Am I describing it correctly?  Does the playground illustrate what you want to do?  (even though it is not being successful, yet)

To be truthful, I have never seen this done... and a few others have asked about it.  I don't think shadowGenerators honor transparency on textures of the mesh.  But I am certainly not a super-coder, so there may be better responses coming soon. 

The main thing... we got this playground done... showing the issue.  I hope this playground demo does that.  If not, we'll try something else, or let you adjust it and SAVE another version. 

Please feel free to make adjustments in the playground editor and hit RUN or SAVE as often as you like... you cannot damage anything in the playground.  Again, welcome.  Have fun... we'll talk again soon.

[adam]

http://playground.babylonjs.com/#2DT16W#3

[Sebavan]

@Wingnut http://playground.babylonjs.com/#2DT16W#2 can help with your request I guess.

[Wingnut]

Well look at that.  Works like a charm, thanks to @adam and @Sebavan.  Yay!  Well done, guys!  I should try to learn Babylon.js someday, eh? 

[yevo]

Thank you guys this is perfect 

[yevo]

Hi GUys does anyone know how to add a backside to this. For example have the same effect on the back side as well but different material images ?

[GameMonetize]

I would suggest using a second mesh then

[Wingnut]

DK... I think yevo got solution in a different thread.  This thread is "superseded" by the other.  (this thread is solved, I think)

But just in case...  http://playground.babylonjs.com/#1Z89KY#10