create a 2 sided plane with different images and behavior on each side

[yevo]

Hello all

I have a weird scenario where i am stuck. I currently have 2 images that are used as textrue and i load both onto 2 planes where they show on the same side. Now i need to kind of show 2 different planes or a double sided plane where each side has its own image or texture. Please look at the code that i have. For some reason the plane and plane2 show fine but plan3 and plane4 do not show up

 

var scene = new BABYLON.Scene(engine);

                    //Create an Arc Rotate Camera - aimed negative z this time
                    var camera = new BABYLON.ArcRotateCamera("Camera", -2.5, 1.2, 350, BABYLON.Vector3.Zero(), scene, true);
                    camera.attachControl(canvas, true);

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

                    var spot = new BABYLON.SpotLight("spot", new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 0, 1), 0.8, 2, scene);

                    spot.diffuse = new BABYLON.Color3(1, 1, 1);
                    spot.specular = new BABYLON.Color3(1, 1, 1);
                    spot.intensity = 1;
                    spot.position = new BABYLON.Vector3(0, 0, -500);
                    // spot.setDirectionToTarget(new BABYLON.Vector3(0, 0, 0));

                    spotcone = BABYLON.Mesh.CreateCylinder("cone", 16, 12, 0, 8, 0, scene);
                    var conemat = new BABYLON.StandardMaterial("cone", scene);
                    conemat.diffuseColor = new BABYLON.Color3(0, 0, 2);
                    spotcone.rotation.x = Math.PI/2;
                    spotcone.bakeCurrentTransformIntoVertices();
                    spotcone.material = conemat;
                    spotcone.parent = spot;

                    var sURL = "images/scodix1.jpg";

                    var materialPlane = new BABYLON.StandardMaterial("solid", scene);
                    materialPlane.diffuseTexture = new BABYLON.Texture(sURL, scene);
                    // materialPlane.emissiveTexture = new BABYLON.Texture(sURL, 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;  // powerfulness

                    var tURL = "images/scodix1.png";

                    var spotPlain = new BABYLON.StandardMaterial("transp", scene, true);
                    spotPlain.diffuseTexture = new BABYLON.Texture(tURL, scene);
                    spotPlain.anisotropicFilteringLevel = 0;
                    spotPlain.diffuseTexture.hasAlpha = true;
                    spotPlain.useAlphaFromDiffuseTexture;
                    spotPlain.hasAlpha = true;
                    spotPlain.specularColor = new BABYLON.Color3.FromHexString("#ffffff");
                    spotPlain.backFaceCulling = true; // Always show the front and the back of an element

                    var sURL2 = "images/scodix2.jpg";

                    var materialPlane2 = new BABYLON.StandardMaterial("solid2", scene);
                    materialPlane2.diffuseTexture = new BABYLON.Texture(sURL2, scene);
                    // materialPlane.emissiveTexture = new BABYLON.Texture(sURL, scene);
                    //materialPlane.emissiveTexture = new BABYLON.Texture('images/scodix1.png', scene);
                    //materialPlane.useAlphaFromDiffuseTexture
                    materialPlane2.specularColor = new BABYLON.Color3(0, 0, 0);
                    materialPlane2.backFaceCulling = true;//Allways show the front and the back of an element
                    // materialPlane.emissiveTexture.level = 1;  // powerfulness

                    var tURL2 = "images/scodix2.png";

                    var spotPlain2 = new BABYLON.StandardMaterial("transp2", scene, true);
                    spotPlain2.diffuseTexture = new BABYLON.Texture(tURL2, scene);
                    spotPlain2.anisotropicFilteringLevel = 0;
                    spotPlain2.diffuseTexture.hasAlpha = true;
                    spotPlain2.useAlphaFromDiffuseTexture;
                    spotPlain2.hasAlpha = true;
                    spotPlain2.specularColor = new BABYLON.Color3.FromHexString("#ffffff");
                    spotPlain2.backFaceCulling = true; // Always show the front and the back of an element

                    var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width: 261, height: 153, sideOrientation: 2}, scene, true, BABYLON.MeshBuilder.DoubleSide);
                    plane.position = new BABYLON.Vector3(0, 0, 0.5);
                    plane.material = materialPlane;

                    var plane2 = BABYLON.MeshBuilder.CreatePlane("plane2", {width: 261, height: 153, sideOrientation: 2}, scene, true, BABYLON.MeshBuilder.DoubleSide);
                    plane2.material = spotPlain;

                    var plane3 = BABYLON.MeshBuilder.CreatePlane("plane3", {width: 261, height: 153, sideOrientation: 1}, scene, true, BABYLON.MeshBuilder.DoubleSide);
                    plane3.position = new BABYLON.Vector3(0, 0, 0.5);
                    plane3.material = materialPlane2;

                    var plane4 = BABYLON.MeshBuilder.CreatePlane("plane4", {width: 261, height: 153, sideOrientation: 1}, scene, true, BABYLON.MeshBuilder.DoubleSide);
                    plane4.material = spotPlain2;

                    var alpha = Math.PI;
                    scene.beforeRender = () => {
                      
                    }

                    return scene;

[jerome]

a playground example would be better to help you, please

well, a double-sided plane has ... two sides, but each holds the same texture. If you want a plane with two different sides, you can (for now, as long as the parameter faceUV doesn't exist for the Plane mesh), you could either :

- stick two different planes on the same position, one front-sided, the other back-sided, each one having its own material and texture ... so 2 meshes in final

- build a solid particle system with 2 plane particles only, set them at the same position but inverse orientation, and then set each plane particle its own image from a given texture (1 mesh only)

- or, at last, build a double-sided plane and use the multi-material on it (1 mesh only)

[yevo]

Please look at http://playground.babylonjs.com/#1Z89KY

 

You will notice i have some code commented the commented code is the one i want as the back side of what is showing now. Basically what the existing code for the showing images is doing i need the same affect on the back side but with different images. (thats the commented code i tried to do)

[Wingnut]

http://playground.babylonjs.com/#1Z89KY#1

Hi yevo!  Look ok?

You will need to remove bounding boxes and remove gaps... but this should work... maybe. 

The playground is great, eh?  No need to make long code-pastes to forum.  Hope this helps.

Aw heck, I guess we could parent all 4 planes to a gizmo, and do some spinning, hunh? 

[yevo]

ya that actually looks good. The only issue i see is the lighting only seems to work on one side. I assume i need to add another spot light and have it be on the back side? 

 

Ya sorry playground is great iv always had hard time finding images to work because of cors with playground but this time it worked

[Wingnut]

Good.  I will show you... a little secret... to find CORS-ok images.   Try http://tinyurl.com/gsybop2

Ignore -pixabay part. That is a filter for an annoying website.

Just change the word chicken.. to anything you like.  Notice MANY returns from 'wikipedia'?  All wikipedia/wikimedia images are CORS-ok.

Hope that is useful.

------------

http://playground.babylonjs.com/#1Z89KY#4

Here, I turned OFF spot, and turned ON hemisphericLight.groundColor (to full-power white).  The hemi's .groundColor is good to illuminate the sides (and bottoms) of a mesh.  Your planes are sides, yes?    So, you see, both sides lit the same, and quite well.  BUT... no specular shine (light reflection) on the planes, now.  Let's try another.

http://playground.babylonjs.com/#1Z89KY#5

This one, I turn OFF hemi, and activate spot, and parent spot to camera.  Specular shine has returned.

Perhaps best way is turn ON hemi, and ALSO parent single spot to camera.  *shrug*  Lights are fun to play-with.  Many options.

If you will use shadows/shadowGenerator... then yes, maybe 2 spotlights and 2 shadowGenerators (one shadowGenerator for each spot).  But maybe one shadowGenerator and one spot, parented to camera, too. 

Hemispheric Lights don't cast shadows.  They are often aimed upward, at atmosphere/hemisphere, and light disperses too widely to cast shadows (I think).

You are becoming a professional lighting tech (and a Babylon pro, too).    Party on!

[yevo]

Oh nice little trick thank you i didnt know about that. Thanks alot for all your help. Yes im completely new to 3D and babylon but so far with everyones help its been awesome. 

[Wingnut]

  Cool.

How about one more experiment? 

http://playground.babylonjs.com/#1Z89KY#7

(I changed some variable names and re-arranged some things)

Here, I reduce the gaps between planes, and turn OFF all lights.  No specular shine, (and no shadows cast-able) ...because no lights.

EmissiveColors are set on each material.  EmissiveColors/EmissiveTextures are for making materials self-illuminate.

Not many scenes... use all emissive colors/textures, and no lights.  It is rare.  But sometimes, it is handy for a material to self-illuminate. 

Shadows and specular shine is not possible... without lights. 

Also, emissiveColor/emissiveTexture do not "cast light".  The illumination will not shine light onto another mesh positioned nearby. 

Here's a big statement:  The light-rays/light-beams from all Babylon lights... continue forever, and cannot be blocked by any mesh... UNLESS that mesh is included in the renderList... of a shadowGenerator for that light.  Generally speaking, the light-rays from a Babylon light... are not easily blocked. 

Ok bye again.