Z sorting issue with createInstance

[0l4f]

Hello forum!

First post here, and I'm starting off with -probably- a newbie question:

I'm trying to optimize an experiment that uses a lot of textured planes, cloned with createInstance, but I'm getting weird z-sorting issues - as you can see here:

http://rocketclowns.com/canvas/babylon2/

 

The leaves are created with createInstance, like this:

var leavesMaterial = new BABYLON.StandardMaterial("leavesTexture", scene);
leavesMaterial.diffuseTexture = new BABYLON.Texture("textures/viny_leaves.png", scene);
leavesMaterial.diffuseTexture.hasAlpha = true;
leavesMaterial.useAlphaFromDiffuseTexture = true;

var leaves = BABYLON.Mesh.CreatePlane("plane", 75.0, scene);
leaves.scaling.y = 0.71;
leaves.material = leavesMaterial;

for (var l = 0; l < 128; l++) {			

    var newLeavesInstance = leaves.createInstance("iLeaves" + l);

    newLeavesInstance.position.x = 32 + Math.random() * 96;
    newLeavesInstance.position.z = Math.random() * 256;
}

 

Am I overlooking something that causes the weird z-sorting behaviour?

 

Many thanks in advance

[0l4f]

Narrowed it down: z-sorting issue only occurs with 

useAlphaFromDiffuseTexture = true

in combination with

createInstance

 

I've attached an image showing the behaviour.

 

Is this a bug?

Is there a workaround for this scenario?

 

Thanks again!

[adam]

The only fix that I know of is not to use instances when your mesh is not opaque.

I don't think it's a bug.

[jerome]

everything is explained here :

http://doc.babylonjs.com/tutorials/Transparency_and_How_Meshes_Are_Rendered

[adam]

There is a lot of good info there, but no mention of instances.

[jerome]

you're right, but I guess this is the same principle under the hood

[0l4f]

Hey jerome and adam, thanks for the info!

The link jerome posted clears up a lot, especially this part:

• Avoid having heavily-stretched alpha blended meshes (i.e. large planes); since the center of its bounding sphere is used for depth sorting, doing this may result in a mesh being sorted as far away from the camera but actually closer to many other meshes.

I think that's what we're seeing here?

[GameMonetize]

Almost correct Actually the problem here is that instances are not sorted at all because they are rendered in on batch (hence the performance gain)

 

Instances are really powerful but rather limited (Especially in your case). So my suggestion will be to use clones here instead of instances

[0l4f]

Hey Deltakosh!

Thanks for the info and the suggestion! Cloning turns out to be THE solution in this case: performance gain while retaining z-order

 

Updated demo using cloning here:  http://rocketclowns.com/canvas/babylon2cloning/

 

[jerome]

really nice