How to color triangels in custom Mesh?

CC 3.5.2

I created custom mesh

        let mesh = cc.utils.createMesh({ positions : positions, indices : indices, doubleSided : true });

and i would like a make color of every triangle with different color as on picture below
Screenshot 2023-02-27 at 17.45.09

How could I achieve it ?
right now Mesh uses color from Material and mesh filled with one color .

You can use colors property to define the vertex colors.

1 Like

I see, but which material i must to use then?
And how many colors must be?

Any standard material should do I believe. Just need to select use vertex color in material properties in inspector.

colors(vertexColors) should be equal to vertex count(positions).

Thanks, i will try it.

seems does’t work, my sample code below. @A_S Could you give me a working sample please?

..
        const colors = [];
        let color = cc.Color.YELLOW;

        for(let i = 0;i < positions.length;i += 3){
            pos.x = positions[i];
            pos.y = positions[i + 1];
            pos.z = positions[i + 2];
            Vec3.transformMat4(pos,pos,m4);
            positions[i] = pos.x;
            positions[i + 1] = pos.y;
            positions[i + 2] = pos.z;

            colors.push( color );
            colors.push( color);
            colors.push( color);
        }

        let mesh = cc.utils.createMesh({ positions : positions, indices : indices, doubleSided : true, colors: colors});
        let comp =  node.addComponent(cc.MeshRenderer);
        comp.mesh = mesh;
..
..

colors is the number array so I feel you should push RGB values separately, You can try replacing

            colors.push( color );
            colors.push( color);
            colors.push( color);

with

            colors.push(color.r, color.g, color.b);

Also be sure you have ticked the USE VERTEX COLOR property for the material.

I try to use in demo project, and seems this arg. colors is not fill the triangles or i don’t understand how it works in cocos , there is a project attached, can play.
In Safari on MacOs Ventura there is no rendered anything, only in Firefox or Chrome.

hex-map-sample.zip (387.5 KB)

I am not sure about why in builtin-standard effect vertex color is not applying, but when I tried builtin-unlit effect in hexmap material, it seems to be working.

Also the color value alpha values needed to be added.

Here is the demo project.

hex-map-sample 2.zip (402.4 KB)

1 Like

Awesome. Thank you so much!

About Materials issue i think there are bugs in Cocos Creator, cause i found unexpected behaviour during switch material on MeshRenderer, some time is not rendrered at all, i guess problem with format after upgrade a Cocos creator, so tired with cc bugs :pensive:

1 Like