Three.js: Where are my vertex colors?

[huanghuan]

I want to use vertex colors in my shader. After spending a few minutes reading JSON Model format 3.0 I made this model manually:

{
    "metadata":
    {
    "sourceFile": "",
    "generatedBy": "3ds max ThreeJSExporter",
    "formatVersion": 3,
    "vertices": 4,
    "normals": 0,
    "colors": 4,
    "uvs": 0,
    "triangles": 2,
    "materials": 1
    },

    "materials": [
    {
    "DbgIndex" : 0,
    "DbgName"  : "dummy",
    "colorDiffuse"  : [0.5, 0.25, 0.25],
    "vertexColors" : true
    }

    ],

    "vertices": [-100,-100,0, 100,-100,0, -100,100,0, 100,100,0],

    "normals": [],

    "colors": [6808406,16777215,5197746,5197746],

    "uvs": [[]],

    "faces": [128, 0,1,2, 0,1,2, 128, 2,1,3, 2,1,3]

}

However it doesn't work with my shader:

"varying vec4 vColor;",
"void main() {",
"   vColor = vec4(color, 1.0);",
"   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
"}"

Strangely color is always solid white. I also tried a simple box exported by ThreeJSExported with "Export vertex colors" checked. Doesn't work either. So what shall I do?

BTW is it possible to include an alpha component in vertex colors?

[WestLangley]

See if this helps.

http://mrdoob.github.com/three.js/examples/webgl_geometry_colors_blender.html
http://mrdoob.github.com/three.js/examples/obj/cubecolors/cube_fvc.js

[huanghuan]

OK I'll try it tonight. Sadly that three.js is so poor in documentation. But thank God & Mr. Doob we still have excellent examples :-)

[huanghuan]

If I use MeshFaceMaterial then I get vertex colors. But if I use ShaderMaterial (with vertexColors = true) instead then I always get white (even with example cube_fvc.js). So a bug?

[alteredq]

In code vertexColors is not true / false, it's one of these three constants:

THREE.NoColors = 0;
THREE.FaceColors = 1;
THREE.VertexColors = 2;

https://github.com/mrdoob/three.js/blob/master/src/materials/Material.js#L37

I guess we should clean up this somehow. Booleans can work as they got type coerced to 0 and 1, but this is dirty and leads to problems like here.

I think what's going on is your model uses vertex colors, but shader tries to use face colors, which are white by default. If you use MeshFaceMaterial, it's JSONLoader which takes care of setting proper constant.

[huanghuan]

Thanks alteredq! Setting vertexColors = THREE.VertexColors does the trick. In ShaderMaterial constructor the code is like this

this.vertexColors = parameters.vertexColors !== undefined ? parameters.vertexColors : false; // set to use "color" attribute stream

That's why I think vertexColors is a boolean value. So I guess I am not to be blamed :-)

[alteredq]

Indeed, this was confusing. I changed it yesterday:

https://github.com/alteredq/three.js/commit/83a894e61c73cd0f02fc8ab0b9da13c8baf1b2bc

[air]

Hi @huanghuan, could you possibly post your source somewhere? I am seeing the exact same issue and I'm using vertexColors = THREE.VertexColors on my ShaderMaterial.

[dacre-denny]

Noticing the same issue also. Turns out the color is just a really big number. Multiplying it by 0.01 revealed that was the case, as white reduced down to correct colors at that point. Any ideas?

[donmccurdy]

@mooce for help and questions, could you post to the forum? It will also help to include details such as your code or source model (if any) for us to guess why your colors might have large values. :)

[dacre-denny]

@donmccurdy thanks for your prompt response! It was an error on our part - color was being multiplied by 255 in our vertex data