Funky Rendered meshes

[Florian]

Hi guys ,
I'm fairly new to babylon and this forum.
But I already like it a lot. Thanks for the knowledge that is shared over here!

I'm trying to build my first little babylon experiment with a friend and we ran into a problem which we don't know how to solve.
It's a small scene with a couple of skeletal animations. You can find over here:
http://www.somewhere.gl/beta/AnimTest_v06.html

When its done it should be looking like this, ...Reference Frame

The meshes getting rendered in a funky manner/order  We think it has something to do with the alphaIndexes and all our non-opaque meshes. We already searched for it an read this article: about how things are rendered, but we still don't know the best way to fix this:

Some advice, best practices would be very welcome.
THANKS IN ADVANCE
flo

PS.: Had some trouble with building a working playground. (It always said that I need to have a camera.)

 

-- A LOT OF CODE WAS POSTED HERE --

 

Edited July 21, 2017 by Florian
get rid of the code

[GameMonetize]

It is nearly impossible to help you with just a dump of your code

We need a working playground

[GameMonetize]

But perhaps I have an idea.

Why do you need an opacity texture? This will force the mesh to be transparent and thus will generate the kind of artifacts you have

 

[Florian]

2 hours ago, Deltakosh said:

It is nearly impossible to help you with just a dump of your code

We need a working playground

Thanks for your fast reply. You're right. I'm sorry ...  Here the condensed Playground.
Playground: Funky Renderings

1 hour ago, Deltakosh said:

But perhaps I have an idea.

Why do you need an opacity texture? This will force the mesh to be transparent and thus will generate the kind of artifacts you have

 

For the character you're right. We can turn that off. First Problem solved, Thank you .
But I think we need the opacity textures for the gras for example. One gras object has two meshes:
1. is the straw
2. is a plane that generates the stylized "shadow"
We want to distribute the gras on a textured floor later. If we won't have an alpha there the transitions between plane and floor will be visible.

[GameMonetize]

For the grass you can rely on alpha testing instead of alpha blending

To do this you can use your alpha texture in the diffuseTexture channel and just set texture.hasAlpha = true

https://www.babylonjs-playground.com/#3N8DSJ#2

[Florian]

Thanks for your help David! Its really appreciated.
Would be awesome to have semitransparent areas for the transition between the elements. Is there a way without getting the render-order issues?
With the alpha testing method it seems as if there are either fully transparents or solid pixels.

[GameMonetize]

Yep you are correct.

As soon as you use transparency you can dig into render ordering issues

[Florian]

I see. Thanks! 

I think for now we gonna work with alpha testing method and adjust the textures for a betterlookin' transition to white.
In case I wanna dig into render ordering stuff. Any further advice what to read? Working examples to look at? Tips what to do?

We already found:
- Babylon Documentation: Renderordering article, Playground Example



 

[GameMonetize]

- As ordering is done per object, you can try to have multiple objects

- Ordering faces is an option but it has to be done manually by calling mesh.getIndices and updating them with mesh.setIndices