Jump to content

Questions re. sprites


Recommended Posts

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.



Link to comment
Share on other sites

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.

Link to comment
Share on other sites



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:



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!

Link to comment
Share on other sites

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):








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!

Link to comment
Share on other sites

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!

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...