# Sorting of mesh with vertex colors and custom shader

**URL:** <https://forum.babylonjs.com/t/sorting-of-mesh-with-vertex-colors-and-custom-shader/39345>\
**Category:** Questions\
**Created:** [March 25, 2023, 3:45pm UTC](https://forum.babylonjs.com/t/sorting-of-mesh-with-vertex-colors-and-custom-shader/39345 "2023-03-25T15:45:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![schweppie](https://avatars.discourse-cdn.com/v4/letter/s/2bfe46/32.png) [@schweppie](https://forum.babylonjs.com/u/schweppie)\
**Post date:** [March 25, 2023, 3:45pm UTC](https://forum.babylonjs.com/t/sorting-of-mesh-with-vertex-colors-and-custom-shader/39345/1 "2023-03-25T15:45:18Z")

</div>

Hello all,

I’m having a mesh with custom vertex colors which I use for another purpose than my question/problem.

It seems that the sorting of the mesh is incorrect. I think it is due to the use of vertex colors, which come with the exported model file.

This is the material setup to illustrate the issue:

> **[Babylon.js Node Material Editor](https://nme.babylonjs.com/#PLJYD9%231)**
>
> Babylon.js Node material editor - shader-based materials editor for Babylon.js

[Edit]: I just notice that the mesh doesn’t stay in the material editor once the link has been made, I’ll upload the mesh separately  
[Edit #2]: I can’t seem to upload a file as attachement yet, since I’m a new user 😕

Is there a way I can force the material to not use any alpha blend mode, so it renders opaque always?

Thanks!

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 26, 2023, 2:42pm UTC](https://forum.babylonjs.com/t/sorting-of-mesh-with-vertex-colors-and-custom-shader/39345/2 "2023-03-26T14:42:34Z")

</div>

Welcome aboard!

It will be easier to understand the problem and help you if you can setup a repro in the [playground](https://playground.babylonjs.com/). Here’s a page that will help you using an external asset in the Playground: [Using External Assets In the Playground | Babylon.js Documentation](https://doc.babylonjs.com/toolsAndResources/thePlayground/externalPGAssets)

> [@schweppie](#):
>
> Is there a way I can force the material to not use any alpha blend mode, so it renders opaque always?

You can try something like `yourMaterial.needAlphaBlending = () => false;`.

---

<div class="post-metadata">

**Author:** ![schweppie](https://avatars.discourse-cdn.com/v4/letter/s/2bfe46/32.png) [@schweppie](https://forum.babylonjs.com/u/schweppie)\
**Post date:** [March 27, 2023, 5:57pm UTC](https://forum.babylonjs.com/t/sorting-of-mesh-with-vertex-colors-and-custom-shader/39345/3 "2023-03-27T17:57:21Z")

</div>

Thank you for your reply!

I did some further digging. It seems that it really has to do with using vertex colors or not.

![vertexColorsIssue](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/d/7dabad3fdaea21b0af82e214fb1dadb4598a17e4.gif)

Both the meshes are the same other than the exported vertex colors. You can see that the sorting goes bad on one of them, not on the other. Maybe it is a Babylon bug?

I’m using this as a test material to show the problem:

```auto
material = new BABYLON.StandardMaterial("", this.scene);
material.disableLighting = true;

var matCapTexture = new BABYLON.Texture("https://i.imgur.com/tQMdzOt.jpg", this.scene);
matCapTexture.coordinatesMode = BABYLON.Texture.SPHERICAL_MODE;

material.reflectionTexture = matCapTexture;
material.needAlphaBlending = () => false;

```

This shows the vertex colors I’m using:

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/e/0eb2eb2c565fd9a44a97c851bb318c59a907ed7c.png)

I use the vertex colors as a mask to resize the mesh on specific width/height etc

I also tried disabling the use of vertex colors (to test/debug) using:

```auto
mesh.useVertexColors = false;

```

This didn’t seem to affect anything.

An other option I have is to create an external data file to describe which vertices are having which ‘color’ or ‘data’ so to speak. So the meshes won’t have any vertex colors. But that is a bit of a hassle of course.

Thank you again!

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 27, 2023, 6:25pm UTC](https://forum.babylonjs.com/t/sorting-of-mesh-with-vertex-colors-and-custom-shader/39345/4 "2023-03-27T18:25:23Z")

</div>

> [@schweppie](#):
>
> Both the meshes are the same other than the exported vertex colors. You can see that the sorting goes bad on one of them, not on the other. Maybe it is a Babylon bug?

The bad mesh is considered as transparent, so it won’t write to the depth buffer and the faces will be displayed in a “random order” (actually, in the order they are defined in the mesh geometry).

Make sure that `mesh.hasVertexAlpha == false` and `mesh.visibility == 1`, else the mesh will be considered to have transparency.

---

<div class="post-metadata">

**Author:** ![schweppie](https://avatars.discourse-cdn.com/v4/letter/s/2bfe46/32.png) [@schweppie](https://forum.babylonjs.com/u/schweppie)\
**Post date:** [March 27, 2023, 6:30pm UTC](https://forum.babylonjs.com/t/sorting-of-mesh-with-vertex-colors-and-custom-shader/39345/5 "2023-03-27T18:30:58Z")

</div>

This fixes it indeed!

```auto
mesh.hasVertexAlpha = false;
mesh.visibility = 1;

```

Thank you so much, this had me debugging for ages!