fix(obj): Improved vertex colors parsing

CHANGELOG.md

@@ -116,6 +116,10 @@
 
 ## v3.4
 
+### v3.4.9
+
+- fix(obj): Improved OBJ vertex colors parsing (#2569)
+
 ### 3.4.2
 
 - docs: Upgrade guide for `WMSCapabilities` type, link to CHANGELOG for patch release info

docs/modules/obj/README.md

@@ -9,6 +9,12 @@ npm install @loaders.gl/obj
 npm install @loaders.gl/core
 ```
 
+## Loaders and Writers
+
+| Loader                                                   |
+| -------------------------------------------------------- |
+| [`OBJLoader`](/docs/modules/obj/api-reference/obj-loader) |
+
 ## Attribution
 
 OBJLoader is a port of [three.js](https://github.com/mrdoob/three.js)'s OBJLoader under MIT License.

docs/modules/obj/api-reference/obj-loader.md

@@ -25,3 +25,11 @@ const data = await load(url, OBJLoader, options);
 
 | Option | Type | Default | Description |
 | ------ | ---- | ------- | ----------- |
+
+Remarks:
+
+- vertex colors are parsed as a `COLOR_0` attribute when red, green and blue values are included after x y and z (this precludes specifying w). The color values range from 0 to 1.
+
+## Attribution
+
+OBJLoader is a port of [three.js](https://github.com/mrdoob/three.js)'s OBJLoader under MIT License.

modules/obj/src/lib/parse-obj-meshes.ts

@@ -343,7 +343,7 @@ export function parseOBJMeshes(text) {
       switch (data[0]) {
         case 'v':
           state.vertices.push(parseFloat(data[1]), parseFloat(data[2]), parseFloat(data[3]));
-          if (data.length === 8) {
+          if (data.length >= 7) {
             state.colors.push(parseFloat(data[4]), parseFloat(data[5]), parseFloat(data[6]));
           }
           break;

modules/obj/test/data/cube-vertex-colors.obj

@@ -0,0 +1,24 @@
+# OBJ file format with vertex colors
+
+o cube
+v 1.000000 1.000000 -1.000000 0.2801 0.4429 0.8987
+v 1.000000 -1.000000 -1.000000 0.6907 0.2524 0.8987 
+v 1.000000 1.000000 1.000000 0.2801 0.4429 0.8987
+v 1.000000 -1.000000 1.000000 0.6907 0.2524 0.8987
+v -1.000000 1.000000 -1.000000 0.2801 0.4429 0.8987
+v -1.000000 -1.000000 -1.000000 0.6907 0.2524 0.8987
+v -1.000000 1.000000 1.000000 0.2801 0.4429 0.8987
+v -1.000000 -1.000000 1.000000 0.6907 0.2524 0.8987
+vn -0.0000 1.0000 -0.0000
+vn -0.0000 -0.0000 1.0000
+vn -1.0000 -0.0000 -0.0000
+vn -0.0000 -1.0000 -0.0000
+vn 1.0000 -0.0000 -0.0000
+vn -0.0000 -0.0000 -1.0000
+s 0
+f 1//1 5//1 7//1 3//1
+f 4//2 3//2 7//2 8//2
+f 8//3 7//3 5//3 6//3
+f 6//4 2//4 4//4 8//4
+f 2//5 1//5 3//5 4//5
+f 6//6 5//6 1//6 2//6

modules/obj/test/obj-loader.spec.js

@@ -4,10 +4,12 @@ import {validateLoader, validateMeshCategoryData} from 'test/common/conformance'
 
 import {OBJLoader, OBJWorkerLoader} from '@loaders.gl/obj';
 import {setLoaderOptions, load} from '@loaders.gl/core';
+import {equals} from '@math.gl/core';
 
 const OBJ_ASCII_URL = '@loaders.gl/obj/test/data/bunny.obj';
 const OBJ_NORMALS_URL = '@loaders.gl/obj/test/data/cube.obj';
 const OBJ_MULTI_PART_URL = '@loaders.gl/obj/test/data/magnolia.obj';
+const OBJ_VERTEX_COLOR_URL = '@loaders.gl/obj/test/data/cube-vertex-colors.obj';
 
 setLoaderOptions({
   _workerType: 'test'
@@ -76,6 +78,36 @@ test('OBJLoader#parseText - multi-part object', async (t) => {
   t.end();
 });
 
+test('OBJLoader#parseText - object with vertex colors', async (t) => {
+  const data = await load(OBJ_VERTEX_COLOR_URL, OBJLoader);
+  validateMeshCategoryData(t, data);
+
+  t.equal(data.attributes.POSITION.value.length, 108, 'POSITION attribute was found');
+  t.equal(data.attributes.POSITION.size, 3, 'POSITION attribute was found');
+  t.equal(data.attributes.NORMAL.value.length, 108, 'NORMAL attribute was found');
+  t.equal(data.attributes.NORMAL.size, 3, 'NORMAL attribute was found');
+  t.equal(data.attributes.COLOR_0.value.length, 108, 'COLOR_0 attribute was found');
+  t.equal(data.attributes.COLOR_0.size, 3, 'COLOR_0 attribute was found');
+
+  // Test two verticies with different colors.
+  const vertex1Color = [0.2801, 0.4429, 0.8987];
+  t.ok(
+    vertex1Color.every((value, index) =>
+      equals(data.attributes.COLOR_0.value[index], value, 0.0001)
+    ),
+    'vertex 1 color parsed as float rgb'
+  );
+
+  const vertex2Color = [0.6907, 0.2524, 0.8987];
+  t.ok(
+    vertex2Color.every((value, index) =>
+      equals(data.attributes.COLOR_0.value[index + 18], value, 0.0001)
+    ),
+    'vertex 2 color parsed as float rgb'
+  );
+  t.end();
+});
+
 test('OBJWorkerLoader#parse(text)', async (t) => {
   if (typeof Worker === 'undefined') {
     t.comment('Worker is not usable in non-browser environments');