Jump to content

Issue with Sprites seen through transperant mesh


Recommended Posts


I really love Babylonjs!  However we might not be able to use it due to an issue with how Babylon renders Sprites with and transperant mesh.


The problem we are having is that Sprites don't seem to be tinted when seen through a transperant mesh.  See the example Playground,  I would expect the sprites that are on the other side of the red sphere to be tinted Red:  http://www.babylonjs-playground.com/#HW4B6#4


The reason we are using SpriteManagager instead of particles is because in our game, they don't move.  The player moves around and things happen when they collide with a Sprite.  Having a reference to a sprite with it's position, color, etc, was much easier to work with than a particle emitter.


Does anyone know if there is a way to get the sprites to be tinted Red as if seeing them through the transperant mesh?


Babylonjs is awesome!


Thank you!

Link to comment
Share on other sites



We have billboard for "sprite mesh" http://www.babylonjs-playground.com/#HW4B6#5


But even better with SPS http://www.babylonjs-playground.com/#WCDZS#3 (You are not forced to update particles on every frame, you can literally control particles like sprite). See documentation here: http://doc.babylonjs.com/overviews/Solid_Particle_System

Link to comment
Share on other sites


Thank you so much for your time helping us find a solution to this problem!  I think we are so close, and I think the SPS might work depending on how well it performs with many many particles. 

I think it would be easier if I listed our requirements:



1.  We need to draw 125,000ish particles and have frame rate remain smooth > 20 fps.

2.  We need particles to be tinted when looking through a transperant mesh based on the color of the mesh, and particles between the camera and the mesh should render on top of the mesh.

3.  We need particles in an easy to use array so that we can check for collisions with the player.


Possible Solutions:

1. SpirteManager is excellent at #1 we can render over 125,000 sprites and frame rate and loading time is still very fast.  It is also good at #3, we have all of our sprites in a nice neat array.  However it fails at #2.  Hence this post.

2. Mesh based billboard plane.  Excellent at #2 and #3 but fails at #1, 125k of these and frame rate is terrible.

3. SPS definitely solves #2 and I think #3, however I'm not sure about #1.  Could you show me a version of this playground using SPS? http://www.babylonjs-playground.com/#HW4B6#6

That way I can play with the numbers to see how many I draw.


Thank you!!

Link to comment
Share on other sites

There is a double semicolon too which is dragging in the code with the last PR Deltakosh

Effect.prototype._cacheMatrix = function (uniformName, matrix) {            if (!this._valueCache[uniformName]) {                this._valueCache[uniformName] = new BABYLON.Matrix();            }            for (var index = 0; index < 16; index++) {                this._valueCache[uniformName].m[index] = matrix.m[index];            }        };        ;
Link to comment
Share on other sites

No, it used to be the opposite - particles drew on top of transparent meshes regardless of depth.


I think iiceman means "as before we decided to change the draw order several month ago". I seem to recall that in the beginning of the year we had similar discussion and the decision to draw particles above meshes was taken (but I'm not totally sure, I don't remember exactly), and now we've just reverted back.

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...