Managing Vertex / Face color on Geometry (r71 vs r73)

Question

I'm trying to upgrade the release version of ThreeJS in my app. I'm showing some meshes on a 3D scene and allow the user to set their colour mappings. Meshes can be coloured in two ways, by vertices or by faces.

When creating the material of the mesh, I set up the vertexColors attribute to THREE.VertexColors or THREE.FaceColors, depending on the behaviour I want.

On rev71, I implemented the change of the colour like this :

var geometry = mesh.geometry;
/* For each face, change it's face colour or vertex colour */
for(var i = 0; i < geometry.faces.length; i++) {
    if (colourFace) {
        geometry.faces[i].color = myColorFace;
    } else {
        geometry.faces[i].vertexColors =
            [myColorVert1, myColorVert2, myColorVert3];
    }
}

Everytime I change the current mapping of the mesh, it is updated on the scene.

On rev73, ThreeJS seems to only update the first mapping change (just before the Mesh and it's Geometry have been pushed to the GPU). The only clue I got is these lines on WebGLGeometries :

/* ... */
} else if ( geometry instanceof THREE.Geometry ) {
    if ( geometry._bufferGeometry === undefined ) {
        geometry._bufferGeometry =
            new THREE.BufferGeometry().setFromObject( object );
    }
    buffergeometry = geometry._bufferGeometry;
}
/* ... */

The buffergeometry attribute is then used by the WebGLRenderer to update WebGL array buffers (in my case, the color buffer). It seems that when updating the geometry from the mesh, it is never updated for the WebGLGeometry.

Does someone have a solution or should I post an issue or pull request to solve the problem?

Try r.74. Also instead of re-assigning colors with = use copy() or set(). — WestLangley
Still not working on rev73/74 after applying the changes, I took a quick look at ThreeJS code and it seems that after creating the BufferGeometry on WebGLGeometries in order to send it to the GPU, this BufferGeometry is never updated when it's associated geometry is modified. — Ludovic Bailly
Did you set the necessary needsUpdate flags? Otherwise, provide a simple working example of your issue by editing this fiddle. Code fragments are not sufficient. — WestLangley

WestLangley WestLangley · Accepted Answer · 2016-02-12T13:56:41

As I stated in my comment, you cannot reassign colors (using =), you must change the colors using copy() or set(). You also need to set the colorsNeedUpdate flag when the colors are changed.

Using your example, first create your geometry, and instantiate vertex colors arrays prior to rendering:

for (var i = 0; i < size; i++) {

    face = faces[i];
    var color = new THREE.Color( 1, 0, 1 );
    face.vertexColors = [ color, color, color ];

  }

After rendering, update the colors like so:

for (var i = 0; i < size; i++) {

    face = faces[i];
    var color = new THREE.Color().setHSL( (i / size) * 0.8, 1.0, 0.5 );
    // change colors
    face.vertexColors[ 0 ].copy( color );
    face.vertexColors[ 1 ].copy( color );
    face.vertexColors[ 2 ].copy( color );

}

mesh.geometry.colorsNeedUpdate = true;

fiddle: http://jsfiddle.net/akmcv7Lh/29/

three.js r.74

Managing Vertex / Face color on Geometry (r71 vs r73)

2 Answers