Questions re. sprites

[jdurrant]

I've been looking into sprites. This tutorial was very helpful: https://github.com/BabylonJS/Babylon.js/wiki/08-Sprites . I was able to add grass to my forest scene:

 

 

I have a few follow-up questions.

 

1) Is it now possible for sprites to cast shadows? This post suggested it was in the works: http://www.html5gamedevs.com/topic/4810-sprite-and-its-shadow-is-it-possible-at-moment/ 

 

2) I'm even more curious to know if sprites can receive shadows. I experimented with this a bit and wasn't able to get it to work. Is it even possible?

 

3) Sprites always face the camera. That's good for a lot of applications, but in some cases I'd like to restrict that rotation to the y axis. For example, grass generally points upward. Using sprites makes the grass look parallel to the ground when looking down on it from above.

 

4) Assuming 2) and 3) are not currently possible, one work-around would be to create a bunch of instanced planes with transparent textures. Assuming I didn't worry about things like rotating relative to the camera, would that solution be much slower than using sprites? In other words, I'm wondering if there's some special optimization in the sprite code that would make it render faster than a simple set of many instanced planes.

 

Thanks!

[Dad72]

If the herbs emit shadows, they can not receive what I understand. this is the case for any mesh.

 

I did not view property which forces the rotation on an axis by lookat (this could be a good idea for DK I think )

 

I try there is some time to create herbs and compare what is the optimal / fast. sprites is the best with the use of Instances, and  texture also optimizing 256 * 256 for loaded quickly.

[GameMonetize]

Hey!

 

1.Sprites cannot cast shadows (But I have something for you:))

2.neither (but i have anoter option )

3. Not possible (but...)

4. yes and that's part of my solution

 

 

Instead of using sprites, you should use billboards

 

Billboards are regular meshes (instances work as well) that are always facing the camera. The interesting thing is that you can decide to only face regarding specific axis:

https://github.com/BabylonJS/Samples/blob/master/Scenes/Customs/test.js#L35

 

Then use a material with alpha testing and you're ready to go!

 

Instances will be as least as fast as sprites, so only good news!

[jdurrant]

Well that's a perfect solution if I ever saw one! I implemented it into my scene, and it works great. In case it's helpful for others, here are all the billboard options, which can be applied to any mesh (including a plane in my case):

 

BILLBOARDMODE_ALL

BILLBOARDMODE_NONE

BILLBOARDMODE_X

BILLBOARDMODE_Y

BILLBOARDMODE_Z

 

Taken from http://www.sokrate.fr/documentation/babylonjs/BABYLON.AbstractMesh.html

 

You can apply it to a mesh this way:

 

myMesh.billboardMode = BABYLON.Mesh.BILLBOARDMODE_ALL;

 

or to an instance:

 

myInstance.billboardMode = BABYLON.Mesh.BILLBOARDMODE_ALL;

 

Thanks for the great solution!

[jdurrant]

Got to thinking I should provide more details, in case someone else has this same question. Here's how I implemented my "sprite" workaround, using billboards instead of actual sprites. First I create a plane mesh that is suitable for use as a billboard:

var size = 10;// create plane meshvar plane = BABYLON.Mesh.CreatePlane(meshName, size, gameWorld.scene);plane.setPivotMatrix( BABYLON.Matrix.Translation(0.0, 0.5 * size, 0.0) ); // move the pivot point to the bottom of the plane// make the materialvar planeMat = new BABYLON.StandardMaterial(meshName + "Mat", gameWorld.scene);planeMat.diffuseTexture = new BABYLON.Texture(texFileName, gameWorld.scene);planeMat.specularColor = new BABYLON.Color3(0, 0, 0);planeMat.diffuseTexture.hasAlpha = true; //Have an alpha// if the plane is always facing the camera (i.e., no other rotations applied), backFaceCulling is not needed.//planeMat.backFaceCulling = false;// add the material to the objectplane.material = planeMat;

Then, I create many instances of that mesh, and make each of them actual billboards:

for (var index=0; index<50; index++) {        // make an instance of the mesh object        var newInstance = plane.createInstance("planeInst." + index.toString());                // make it a billboard (that rotates only about the y axis in my case)        newInstance.billboardMode = BABYLON.Mesh.BILLBOARDMODE_ALL;                // move newInstance        newInstance.position = new BABYLON.Vector3(100.0 * Math.random(), 100.0 * Math.random(), 100.0 * Math.random());}

I expected to use BABYLON.Mesh.BILLBOARDMODE_Y, but in practice BABYLON.Mesh.BILLBOARDMODE_ALL worked best for me. I cast shadows on to these billboards, and the shadows appeared only when I used BABYLON.Mesh.BILLBOARDMODE_ALL for reasons I don't fully understand (probably something to do with the billboard angle relative to the shadow generator when rotation is only allowed about the y axis). I'm not sure how BABYLON.Mesh.BILLBOARDMODE_ALL positions the planes differently than sprites are positioned, but there does seem to be a difference.

 

Hope this helps!

[fenomas]

This feature looks really useful, but trying it in my project caused a bug:

https://github.com/BabylonJS/Babylon.js/issues/445

[GameMonetize]

I'll fix that quickly

[fenomas]

Cool, thanks.