Store vertex colors in mesh.

sandbox/embed_edges.html

@@ -15,6 +15,7 @@
 	<script type="text/javascript" src="../source/geometry/geometry.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord2d.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord3d.js"></script>
+	<script type="text/javascript" src="../source/geometry/coord4d.js"></script>
 	<script type="text/javascript" src="../source/geometry/quaternion.js"></script>
 	<script type="text/javascript" src="../source/geometry/box3d.js"></script>
 	<script type="text/javascript" src="../source/geometry/octree.js"></script>

sandbox/embed_filehost.html

@@ -15,6 +15,7 @@
 	<script type="text/javascript" src="../source/geometry/geometry.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord2d.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord3d.js"></script>
+	<script type="text/javascript" src="../source/geometry/coord4d.js"></script>
 	<script type="text/javascript" src="../source/geometry/quaternion.js"></script>
 	<script type="text/javascript" src="../source/geometry/box3d.js"></script>
 	<script type="text/javascript" src="../source/geometry/octree.js"></script>

sandbox/embed_selfhost_code.html

@@ -15,6 +15,7 @@
 	<script type="text/javascript" src="../source/geometry/geometry.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord2d.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord3d.js"></script>
+	<script type="text/javascript" src="../source/geometry/coord4d.js"></script>
 	<script type="text/javascript" src="../source/geometry/quaternion.js"></script>
 	<script type="text/javascript" src="../source/geometry/box3d.js"></script>
 	<script type="text/javascript" src="../source/geometry/octree.js"></script>

sandbox/embed_selfhost_errors.html

@@ -15,6 +15,7 @@
 	<script type="text/javascript" src="../source/geometry/geometry.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord2d.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord3d.js"></script>
+	<script type="text/javascript" src="../source/geometry/coord4d.js"></script>
 	<script type="text/javascript" src="../source/geometry/quaternion.js"></script>
 	<script type="text/javascript" src="../source/geometry/box3d.js"></script>
 	<script type="text/javascript" src="../source/geometry/octree.js"></script>

sandbox/embed_selfhost_externallibs.html

@@ -15,6 +15,7 @@
 	<script type="text/javascript" src="../source/geometry/geometry.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord2d.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord3d.js"></script>
+	<script type="text/javascript" src="../source/geometry/coord4d.js"></script>
 	<script type="text/javascript" src="../source/geometry/quaternion.js"></script>
 	<script type="text/javascript" src="../source/geometry/box3d.js"></script>
 	<script type="text/javascript" src="../source/geometry/octree.js"></script>

sandbox/embed_selfhost_fullscreen.html

@@ -14,6 +14,7 @@
 	<script type="text/javascript" src="../source/geometry/geometry.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord2d.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord3d.js"></script>
+	<script type="text/javascript" src="../source/geometry/coord4d.js"></script>
 	<script type="text/javascript" src="../source/geometry/quaternion.js"></script>
 	<script type="text/javascript" src="../source/geometry/box3d.js"></script>
 	<script type="text/javascript" src="../source/geometry/octree.js"></script>

sandbox/embed_selfhost_manual.html

@@ -15,6 +15,7 @@
 	<script type="text/javascript" src="../source/geometry/geometry.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord2d.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord3d.js"></script>
+	<script type="text/javascript" src="../source/geometry/coord4d.js"></script>
 	<script type="text/javascript" src="../source/geometry/quaternion.js"></script>
 	<script type="text/javascript" src="../source/geometry/box3d.js"></script>
 	<script type="text/javascript" src="../source/geometry/octree.js"></script>

sandbox/embed_selfhost_multiple.html

@@ -15,6 +15,7 @@
 	<script type="text/javascript" src="../source/geometry/geometry.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord2d.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord3d.js"></script>
+	<script type="text/javascript" src="../source/geometry/coord4d.js"></script>
 	<script type="text/javascript" src="../source/geometry/quaternion.js"></script>
 	<script type="text/javascript" src="../source/geometry/box3d.js"></script>
 	<script type="text/javascript" src="../source/geometry/octree.js"></script>

sandbox/embed_selfhost_single.html

@@ -14,6 +14,7 @@
 	<script type="text/javascript" src="../source/geometry/geometry.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord2d.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord3d.js"></script>
+	<script type="text/javascript" src="../source/geometry/coord4d.js"></script>
 	<script type="text/javascript" src="../source/geometry/quaternion.js"></script>
 	<script type="text/javascript" src="../source/geometry/box3d.js"></script>
 	<script type="text/javascript" src="../source/geometry/octree.js"></script>

sandbox/embed_selfhost_single_scroll.html

@@ -14,6 +14,7 @@
 	<script type="text/javascript" src="../source/geometry/geometry.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord2d.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord3d.js"></script>
+	<script type="text/javascript" src="../source/geometry/coord4d.js"></script>
 	<script type="text/javascript" src="../source/geometry/quaternion.js"></script>
 	<script type="text/javascript" src="../source/geometry/box3d.js"></script>
 	<script type="text/javascript" src="../source/geometry/octree.js"></script>

source/geometry/coord4d.js

@@ -0,0 +1,15 @@
+OV.Coord4D = class
+{
+	constructor (x, y, z, w)
+	{
+		this.x = x;
+		this.y = y;
+		this.z = z;
+        this.w = w;
+	}
+
+	Clone ()
+	{
+		return new OV.Coord4D (this.x, this.y, this.z, this.w);
+	}
+};

source/import/importergltf.js

@@ -121,6 +121,13 @@ OV.GltfBufferReader = class
             let z = this.ReadComponent ();
             this.SkipBytesByStride (3);
             return new OV.Coord3D (x, y, z);
+        } else if (this.dataType === OV.GltfDataType.VEC4) {
+            let x = this.ReadComponent ();
+            let y = this.ReadComponent ();
+            let z = this.ReadComponent ();
+            let w = this.ReadComponent ();
+            this.SkipBytesByStride (4);
+            return new OV.Coord4D (x, y, z, w);
         }
         return null;
     }
@@ -353,6 +360,15 @@ OV.GltfExtensions = class
                         attributeArray[i + 2]
                     ));
                 }
+            } else if (numComponents === 4) {
+                for (let i = 0; i < attributeArray.length; i += 4) {
+                    processor (new OV.Coord4D (
+                        attributeArray[i + 0],
+                        attributeArray[i + 1],
+                        attributeArray[i + 2],
+                        attributeArray[i + 3]
+                    ));
+                }
             }
             draco._free (attributePtr);
         }
@@ -385,6 +401,7 @@ OV.GltfExtensions = class
         }
 
         let hasVertices = (extensionParams.attributes.POSITION !== undefined);
+        let hasVertexColors = (extensionParams.attributes.COLOR_0 !== undefined);
         let hasNormals = (extensionParams.attributes.NORMAL !== undefined);
         let hasUVs = (extensionParams.attributes.TEXCOORD_0 !== undefined);
 
@@ -400,6 +417,13 @@ OV.GltfExtensions = class
             mesh.AddVertex (vertex);
         });
 
+        if (hasVertexColors) {
+            EnumerateComponents (this.draco, decoder, dracoMesh, extensionParams.attributes.COLOR_0, (vertexColor) => {
+                let color = new OV.Color (vertexColor.x * 255.0, vertexColor.y * 255.0, vertexColor.z * 255.0);
+                mesh.AddVertexColor (color);
+            });
+        }
+
         if (hasNormals) {
             EnumerateComponents (this.draco, decoder, dracoMesh, extensionParams.attributes.NORMAL, (normal) => {
                 mesh.AddNormal (normal);
@@ -778,6 +802,7 @@ OV.ImporterGltf = class extends OV.ImporterBase
         }
 
         let hasVertices = (primitive.attributes.POSITION !== undefined);
+        let hasVertexColors = (primitive.attributes.COLOR_0 !== undefined);
         let hasNormals = (primitive.attributes.NORMAL !== undefined);
         let hasUVs = (primitive.attributes.TEXCOORD_0 !== undefined);
         let hasIndices = (primitive.indices !== undefined);
@@ -807,6 +832,18 @@ OV.ImporterGltf = class extends OV.ImporterBase
             return;
         }
 
+        if (hasVertexColors) {
+            let accessor = gltf.accessors[primitive.attributes.COLOR_0];
+            let reader = this.GetReaderFromAccessor (gltf, accessor);
+            if (reader === null) {
+                return;
+            }
+            reader.EnumerateData ((data) => {
+                let color = new OV.Color (data.x * 255.0, data.y * 255.0, data.z * 255.0);
+                mesh.AddVertexColor (color);
+            });
+        }
+
         if (hasNormals) {
             let accessor = gltf.accessors[primitive.attributes.NORMAL];
             let reader = this.GetReaderFromAccessor (gltf, accessor);

source/import/importerply.js

@@ -97,38 +97,9 @@ OV.PlyMaterialHandler = class
     constructor (model)
     {
         this.model = model;
-        this.vertexColors = [];
         this.colorToMaterial = {};
     }
 
-    AddVertexColor (color)
-    {
-        this.vertexColors.push (color);
-    }
-
-    GetTriangleColor (v0, v1, v2)
-    {
-        let vertexCount = this.vertexColors.length;
-        if (v0 >= vertexCount || v1 >= vertexCount || v2 >= vertexCount) {
-            return null;
-        }
-        return this.vertexColors[v0];
-    }
-
-    GetTriangleFaceMaterialIndex (color)
-    {
-        return this.GetMaterialIndexByColor (color);
-    }
-
-    GetTriangleVertexMaterialIndex (v0, v1, v2)
-    {
-        let color = this.GetTriangleColor (v0, v1, v2);
-        if (color === null) {
-            return null;
-        }
-        return this.GetMaterialIndexByColor (color);
-    }
-
     GetMaterialIndexByColor (color)
     {
         let materialName = 'Color ' +
@@ -397,7 +368,7 @@ OV.ImporterPly = class extends OV.ImporterBase
                     let z = ReadByFormat (reader, element.format[2]);
                     let color = SkipAndGetColor (reader, element.format, 3);
                     if (color !== null) {
-                        materialHandler.AddVertexColor (color);
+                        this.mesh.AddVertexColor (new OV.Color (color[0], color[1], color[2]));
                     }
                     this.mesh.AddVertex (new OV.Coord3D (x, y, z));
                 }
@@ -411,9 +382,7 @@ OV.ImporterPly = class extends OV.ImporterBase
                         let v2 = vertices[i + 2];
                         let triangle = new OV.Triangle (v0, v1, v2);
                         if (faceColor !== null) {
-                            triangle.mat = materialHandler.GetTriangleFaceMaterialIndex (faceColor);
+                            triangle.mat = materialHandler.GetMaterialIndexByColor (faceColor);
-                        } else {
-                            triangle.mat = materialHandler.GetTriangleVertexMaterialIndex (v0, v1, v2);
                         }
                         this.mesh.AddTriangle (triangle);
                     }

source/model/material.js

@@ -100,6 +100,8 @@ OV.MaterialBase = class
 
         this.name = '';
         this.color = new OV.Color (0, 0, 0);
+
+        this.vertexColors = false;
     }
 
     IsEqual (rhs)
@@ -116,6 +118,9 @@ OV.MaterialBase = class
         if (!OV.ColorIsEqual (this.color, rhs.color)) {
             return false;
         }
+        if (this.vertexColors !== rhs.vertexColors) {
+            return false;
+        }
         return true;
     }
 };

source/model/mesh.js

@@ -4,6 +4,7 @@ OV.Mesh = class extends OV.ModelObject3D
     {
         super ();
         this.vertices = [];
+        this.vertexColors = [];
         this.normals = [];
         this.uvs = [];
         this.triangles = [];
@@ -14,6 +15,11 @@ OV.Mesh = class extends OV.ModelObject3D
         return this.vertices.length;
     }
 
+    VertexColorCount ()
+    {
+        return this.vertexColors.length;
+    }
+
     NormalCount ()
     {
         return this.normals.length;
@@ -45,6 +51,22 @@ OV.Mesh = class extends OV.ModelObject3D
         return this.vertices[index];
     }
 
+    AddVertexColor (color)
+    {
+        this.vertexColors.push (color);
+        return this.vertexColors.length - 1;
+    }
+
+    SetVertexColor (index, color)
+    {
+        this.vertexColors[index] = color;
+    }
+
+    GetVertexColor (index)
+    {
+        return this.vertexColors[index];
+    }
+
     AddNormal (normal)
     {
         this.normals.push (normal);

source/model/modelfinalization.js

@@ -1,6 +1,6 @@
 OV.FinalizeModel = function (model, getDefaultMaterial)
 {
-    function FinalizeMesh (mesh, getDefaultMaterialIndex)
+    function FinalizeMesh (model, mesh, getDefaultMaterialIndex)
     {
         function CalculateCurveNormals (mesh)
         {
@@ -104,6 +104,17 @@ OV.FinalizeModel = function (model, getDefaultMaterial)
         if (status.calculateCurveNormals) {
             CalculateCurveNormals (mesh);
         }
+
+        let hasVertexColors = (mesh.VertexCount () === mesh.VertexColorCount ());
+        if (hasVertexColors) {
+            for (let i = 0; i < mesh.TriangleCount (); i++) {
+                let triangle = mesh.GetTriangle (i);
+                if (triangle.mat !== null) {
+                    let material = model.GetMaterial (triangle.mat);
+                    material.vertexColors = true;
+                }
+            }
+        }
     }
 
     let defaultMaterialIndex = null;
@@ -123,7 +134,7 @@ OV.FinalizeModel = function (model, getDefaultMaterial)
             i = i - 1;
             continue;
         }
-        FinalizeMesh (mesh, getDefaultMaterialIndex);
+        FinalizeMesh (model, mesh, getDefaultMaterialIndex);
     }
 
     let rootNode = model.GetRootNode ();

source/threejs/threeconverter.js

@@ -122,9 +122,13 @@ OV.ConvertModelToThreeObject = function (model, params, output, callbacks)
 
 		let material = model.GetMaterial (materialIndex);
 		let baseColor = new THREE.Color (material.color.r / 255.0, material.color.g / 255.0, material.color.b / 255.0);
+		if (material.vertexColors) {
+			baseColor.setRGB (1.0, 1.0, 1.0);
+		}
 
 		let materialParams = {
 			color : baseColor,
+			vertexColors : material.vertexColors,
 			opacity : material.opacity,
 			transparent : material.transparent,
 			alphaTest : material.alphaTest,
@@ -210,9 +214,10 @@ OV.ConvertModelToThreeObject = function (model, params, output, callbacks)
 		let threeGeometry = new THREE.BufferGeometry ();
 		let meshThreeMaterials = [];
 		let meshOriginalMaterials = [];
-		let modelToThreeMaterials = {};
+		let modelToThreeMaterials = new Map ();
 
 		let vertices = [];
+		let vertexColors = [];
 		let normals = [];
 		let uvs = [];
 
@@ -222,7 +227,8 @@ OV.ConvertModelToThreeObject = function (model, params, output, callbacks)
 			end : -1
 		});
 
-		let meshHasUVs = mesh.TextureUVCount () > 0;
+		let meshHasVertexColors = (mesh.VertexCount () === mesh.VertexColorCount ());
+		let meshHasUVs = (mesh.TextureUVCount () > 0);
 		for (let i = 0; i < triangleIndices.length; i++) {
 			let triangleIndex = triangleIndices[i];
 			let triangle = mesh.GetTriangle (triangleIndex);
@@ -232,6 +238,17 @@ OV.ConvertModelToThreeObject = function (model, params, output, callbacks)
 			let v2 = mesh.GetVertex (triangle.v2);
 			vertices.push (v0.x, v0.y, v0.z, v1.x, v1.y, v1.z, v2.x, v2.y, v2.z);
 
+			if (meshHasVertexColors) {
+				let vc0 = mesh.GetVertexColor (triangle.v0);
+				let vc1 = mesh.GetVertexColor (triangle.v1);
+				let vc2 = mesh.GetVertexColor (triangle.v2);
+				vertexColors.push (
+					vc0.r / 255.0, vc0.g / 255.0, vc0.b / 255.0,
+					vc1.r / 255.0, vc1.g / 255.0, vc1.b / 255.0,
+					vc2.r / 255.0, vc2.g / 255.0, vc2.b / 255.0
+				);
+			}
+
 			let n0 = mesh.GetNormal (triangle.n0);
 			let n1 = mesh.GetNormal (triangle.n1);
 			let n2 = mesh.GetNormal (triangle.n2);
@@ -247,10 +264,8 @@ OV.ConvertModelToThreeObject = function (model, params, output, callbacks)
 			}
 
 			let modelMaterialIndex = triangle.mat;
-			let materialIndex = modelToThreeMaterials[modelMaterialIndex];
+			if (!modelToThreeMaterials.has (modelMaterialIndex)) {
-			if (materialIndex === undefined) {
+				modelToThreeMaterials.set (modelMaterialIndex, meshThreeMaterials.length);
-				materialIndex = meshThreeMaterials.length;
-				modelToThreeMaterials[modelMaterialIndex] = materialIndex;
 				meshThreeMaterials.push (modelThreeMaterials[modelMaterialIndex]);
 				meshOriginalMaterials.push (modelMaterialIndex);
 				if (i > 0) {
@@ -266,6 +281,9 @@ OV.ConvertModelToThreeObject = function (model, params, output, callbacks)
 		groups[groups.length - 1].end = triangleCount - 1;
 
 		threeGeometry.setAttribute ('position', new THREE.Float32BufferAttribute (vertices, 3));
+		if (vertexColors.length !== 0) {
+			threeGeometry.setAttribute ('color', new THREE.Float32BufferAttribute (vertexColors, 3));
+		}
 		threeGeometry.setAttribute ('normal', new THREE.Float32BufferAttribute (normals, 3));
 		if (uvs.length !== 0) {
 			threeGeometry.setAttribute ('uv', new THREE.Float32BufferAttribute (uvs, 2));

test/testfiles/gltf/BoxVertexColors/README.md

@@ -0,0 +1,8 @@
+# Box Vertex Colors
+## Screenshot
+
+![screenshot](screenshot/screenshot.png)
+
+## License Information
+
+Donated by Michael Feldstein for glTF testing.

test/testfiles/gltf/BoxVertexColors/glTF-Embedded/BoxVertexColors.gltf

@@ -0,0 +1,220 @@
+{
+    "accessors": [
+        {
+            "bufferView": 0,
+            "byteOffset": 0,
+            "componentType": 5123,
+            "count": 36,
+            "type": "SCALAR"
+        },
+        {
+            "bufferView": 1,
+            "byteOffset": 0,
+            "componentType": 5126,
+            "count": 24,
+            "max": [
+                0.5,
+                0.5,
+                0.5
+            ],
+            "min": [
+                -0.5,
+                -0.5,
+                -0.5
+            ],
+            "type": "VEC3"
+        },
+        {
+            "bufferView": 2,
+            "byteOffset": 0,
+            "componentType": 5126,
+            "count": 24,
+            "type": "VEC3"
+        },
+        {
+            "bufferView": 3,
+            "byteOffset": 0,
+            "componentType": 5126,
+            "count": 24,
+            "type": "VEC4"
+        },
+        {
+            "bufferView": 4,
+            "byteOffset": 0,
+            "componentType": 5126,
+            "count": 24,
+            "type": "VEC2"
+        }
+    ],
+    "asset": {
+        "generator": "FBX2glTF",
+        "version": "2.0"
+    },
+    "bufferViews": [
+        {
+            "buffer": 0,
+            "byteLength": 72,
+            "byteOffset": 0,
+            "target": 34963
+        },
+        {
+            "buffer": 0,
+            "byteLength": 288,
+            "byteOffset": 72,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 288,
+            "byteOffset": 360,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 384,
+            "byteOffset": 648,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 192,
+            "byteOffset": 1032,
+            "target": 34962
+        }
+    ],
+    "buffers": [
+        {
+            "byteLength": 1224,
+            "uri": "data:application/octet-stream;base64,AAABAAIAAQAAAAMABAAFAAYABwAEAAYACAAJAAoACwAJAAgADAANAA4ADQAMAA8AEAARABIAEAASABMAFAAVABYAFAAWABcAAAAAvwAAAD8AAAC/AAAAPwAAAD8AAAA/AAAAPwAAAD8AAAC/AAAAvwAAAD8AAAA/AAAAvwAAAD8AAAA/AAAAvwAAAD8AAAC/AAAAvwAAAL8AAAC/AAAAvwAAAL8AAAA/AAAAPwAAAD8AAAA/AAAAvwAAAL8AAAA/AAAAPwAAAL8AAAA/AAAAvwAAAD8AAAA/AAAAPwAAAD8AAAC/AAAAPwAAAL8AAAA/AAAAPwAAAL8AAAC/AAAAPwAAAD8AAAA/AAAAPwAAAL8AAAC/AAAAvwAAAL8AAAC/AAAAvwAAAD8AAAC/AAAAPwAAAD8AAAC/AAAAPwAAAL8AAAA/AAAAvwAAAL8AAAA/AAAAvwAAAL8AAAC/AAAAPwAAAL8AAAC/AAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAHekGMHp6JTz+/38/UdInMBHtfz9SNZs6rTHKPJsTwTrvy00/XMpNP0HLTT8AAIA/3ssCP4z/fz+gF+43whYUON7LAj+M/38/oBfuN8IWFDgd6QYwenolPP7/fz9R0icw6vR/PwjDNTqNSsY80xtiOu/LTT9cyk0/QctNPwAAgD8R7X8/UjWbOq0xyjybE8E678tNP1zKTT9By00/AACAP6bmIzurlgY+BNh/P0ziSzveywI/jP9/P6AX7jfCFhQ478tNP1zKTT9By00/AACAP6bmIzurlgY+BNh/P0ziSzsSAI885Oh+PxdguT574rE8Ee1/P1I1mzqtMco8mxPBOhIAjzzk6H4/F2C5PnvisTzq9H8/CMM1Oo1KxjzTG2I6HekGMHp6JTz+/38/UdInMO/LTT9cyk0/QctNPwAAgD+m5iM7q5YGPgTYfz9M4ks778tNP1zKTT9By00/AACAP+r0fz8IwzU6jUrGPNMbYjoSAI885Oh+PxdguT574rE8AACAPgAAAAAAAAA/qqqqPgAAAD8AAAAAAACAPqqqqj4AAIA+qqqqPgAAAACqqqo+AAAAAKqqKj8AAIA+qqoqPwAAAD+qqqo+AACAPqqqKj8AAAA/qqoqPwAAgD6qqqo+AABAP6qqqj4AAAA/qqoqPwAAQD+qqio/AAAAP6qqqj4AAEA/qqoqPwAAgD+qqio/AACAP6qqqj4AAEA/qqqqPgAAAD+qqio/AACAPqqqKj8AAIA+AACAPwAAAD8AAIA/"
+        }
+    ],
+    "materials": [
+        {
+            "name": "Default",
+            "pbrMetallicRoughness": {
+                "baseColorFactor": [
+                    0.800000011920929,
+                    0.800000011920929,
+                    0.800000011920929,
+                    1.0
+                ],
+                "metallicFactor": 0.100000001490116,
+                "roughnessFactor": 0.990000005960464
+            }
+        }
+    ],
+    "meshes": [
+        {
+            "name": "Cube",
+            "primitives": [
+                {
+                    "attributes": {
+                        "COLOR_0": 3,
+                        "NORMAL": 2,
+                        "POSITION": 1,
+                        "TEXCOORD_0": 4
+                    },
+                    "indices": 0,
+                    "material": 0,
+                    "mode": 4
+                }
+            ]
+        }
+    ],
+    "nodes": [
+        {
+            "children": [
+                1,
+                2,
+                3
+            ],
+            "name": "RootNode",
+            "rotation": [
+                0.0,
+                0.0,
+                0.0,
+                1.0
+            ],
+            "scale": [
+                1.0,
+                1.0,
+                1.0
+            ],
+            "translation": [
+                0.0,
+                0.0,
+                0.0
+            ]
+        },
+        {
+            "name": "Mesh",
+            "rotation": [
+                0.0,
+                0.0,
+                0.0,
+                1.0
+            ],
+            "scale": [
+                1.0,
+                1.0,
+                1.0
+            ],
+            "translation": [
+                0.0,
+                0.0,
+                0.0
+            ]
+        },
+        {
+            "mesh": 0,
+            "name": "Cube",
+            "rotation": [
+                0.0,
+                0.0,
+                0.0,
+                1.0
+            ],
+            "scale": [
+                1.0,
+                1.0,
+                1.0
+            ],
+            "translation": [
+                0.0,
+                0.0,
+                0.0
+            ]
+        },
+        {
+            "name": "Texture Group",
+            "rotation": [
+                0.0,
+                0.0,
+                0.0,
+                1.0
+            ],
+            "scale": [
+                1.0,
+                1.0,
+                1.0
+            ],
+            "translation": [
+                0.0,
+                0.0,
+                0.0
+            ]
+        }
+    ],
+    "samplers": [
+        {}
+    ],
+    "scene": 0,
+    "scenes": [
+        {
+            "name": "Root Scene",
+            "nodes": [
+                0
+            ]
+        }
+    ]
+}

test/testfiles/gltf/BoxVertexColors/glTF/BoxVertexColors.gltf

@@ -0,0 +1,220 @@
+{
+    "accessors": [
+        {
+            "bufferView": 0,
+            "byteOffset": 0,
+            "componentType": 5123,
+            "count": 36,
+            "type": "SCALAR"
+        },
+        {
+            "bufferView": 1,
+            "byteOffset": 0,
+            "componentType": 5126,
+            "count": 24,
+            "max": [
+                0.5,
+                0.5,
+                0.5
+            ],
+            "min": [
+                -0.5,
+                -0.5,
+                -0.5
+            ],
+            "type": "VEC3"
+        },
+        {
+            "bufferView": 2,
+            "byteOffset": 0,
+            "componentType": 5126,
+            "count": 24,
+            "type": "VEC3"
+        },
+        {
+            "bufferView": 3,
+            "byteOffset": 0,
+            "componentType": 5126,
+            "count": 24,
+            "type": "VEC4"
+        },
+        {
+            "bufferView": 4,
+            "byteOffset": 0,
+            "componentType": 5126,
+            "count": 24,
+            "type": "VEC2"
+        }
+    ],
+    "asset": {
+        "generator": "FBX2glTF",
+        "version": "2.0"
+    },
+    "bufferViews": [
+        {
+            "buffer": 0,
+            "byteLength": 72,
+            "byteOffset": 0,
+            "target": 34963
+        },
+        {
+            "buffer": 0,
+            "byteLength": 288,
+            "byteOffset": 72,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 288,
+            "byteOffset": 360,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 384,
+            "byteOffset": 648,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteLength": 192,
+            "byteOffset": 1032,
+            "target": 34962
+        }
+    ],
+    "buffers": [
+        {
+            "byteLength": 1224,
+            "uri": "buffer.bin"
+        }
+    ],
+    "materials": [
+        {
+            "name": "Default",
+            "pbrMetallicRoughness": {
+                "baseColorFactor": [
+                    0.800000011920929,
+                    0.800000011920929,
+                    0.800000011920929,
+                    1.0
+                ],
+                "metallicFactor": 0.100000001490116,
+                "roughnessFactor": 0.990000005960464
+            }
+        }
+    ],
+    "meshes": [
+        {
+            "name": "Cube",
+            "primitives": [
+                {
+                    "attributes": {
+                        "COLOR_0": 3,
+                        "NORMAL": 2,
+                        "POSITION": 1,
+                        "TEXCOORD_0": 4
+                    },
+                    "indices": 0,
+                    "material": 0,
+                    "mode": 4
+                }
+            ]
+        }
+    ],
+    "nodes": [
+        {
+            "children": [
+                1,
+                2,
+                3
+            ],
+            "name": "RootNode",
+            "rotation": [
+                0.0,
+                0.0,
+                0.0,
+                1.0
+            ],
+            "scale": [
+                1.0,
+                1.0,
+                1.0
+            ],
+            "translation": [
+                0.0,
+                0.0,
+                0.0
+            ]
+        },
+        {
+            "name": "Mesh",
+            "rotation": [
+                0.0,
+                0.0,
+                0.0,
+                1.0
+            ],
+            "scale": [
+                1.0,
+                1.0,
+                1.0
+            ],
+            "translation": [
+                0.0,
+                0.0,
+                0.0
+            ]
+        },
+        {
+            "mesh": 0,
+            "name": "Cube",
+            "rotation": [
+                0.0,
+                0.0,
+                0.0,
+                1.0
+            ],
+            "scale": [
+                1.0,
+                1.0,
+                1.0
+            ],
+            "translation": [
+                0.0,
+                0.0,
+                0.0
+            ]
+        },
+        {
+            "name": "Texture Group",
+            "rotation": [
+                0.0,
+                0.0,
+                0.0,
+                1.0
+            ],
+            "scale": [
+                1.0,
+                1.0,
+                1.0
+            ],
+            "translation": [
+                0.0,
+                0.0,
+                0.0
+            ]
+        }
+    ],
+    "samplers": [
+        {}
+    ],
+    "scene": 0,
+    "scenes": [
+        {
+            "name": "Root Scene",
+            "nodes": [
+                0
+            ]
+        }
+    ]
+}

test/testfiles/gltf/VertexColorTest/README.md

@@ -0,0 +1,11 @@
+# Vertex Color Test
+
+## Screenshot
+
+![screenshot](screenshot/screenshot.png)
+
+## Description
+
+This model tests the attribute semantic `COLOR_0`, as defined in the glTF [Metallic Roughness Material](https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#metallic-roughness-material), to check if it has been multipled by `baseColor`.  For engines that read the vertex colors and apply them, you should see two rows of checkmarks, as shown in the screenshot.  The top row is the "Test" row, which has been multipled by red, green, and blue vertex colors to reveal checkmarks in the corresponding color channels.  The bottom row is a "sample pass" row, where checkmarks of each color are multiplied by white and should appear the same as the screenshot regardless of the rendering engine's ability to process vertex colors.
+
+For engines that ignore vertex colors, the top row of checks will look noticably mangled.  The red check has a cyan X, the green check has a magenta X, and the blue check has a yellow X, occupying the other two color channels of each test checkmark.  If you see these "X" marks fighting with the checkmarks, then you are seeing color channels that are supposed to have been zeroed out by the applied vertex colors on the mesh, and it means your rendering engine has not applied the vertex colors.

test/testfiles/gltf/VertexColorTest/glTF/VertexColorTest.gltf

@@ -0,0 +1,366 @@
+{
+    "accessors" : [
+        {
+            "bufferView" : 0,
+            "componentType" : 5121,
+            "count" : 36,
+            "max" : [
+                23
+            ],
+            "min" : [
+                0
+            ],
+            "type" : "SCALAR"
+        },
+        {
+            "bufferView" : 1,
+            "componentType" : 5126,
+            "count" : 24,
+            "max" : [
+                0.7554783821105957,
+                -0.8512416481971741,
+                0.9750328660011292
+            ],
+            "min" : [
+                -0.7045658230781555,
+                -0.8512417078018188,
+                -0.9611154794692993
+            ],
+            "type" : "VEC3"
+        },
+        {
+            "bufferView" : 2,
+            "componentType" : 5126,
+            "count" : 24,
+            "max" : [
+                0.0,
+                1.0,
+                -0.0
+            ],
+            "min" : [
+                0.0,
+                1.0,
+                -0.0
+            ],
+            "type" : "VEC3"
+        },
+        {
+            "bufferView" : 3,
+            "componentType" : 5126,
+            "count" : 24,
+            "max" : [
+                1.0,
+                7.121938949694595e-08,
+                1.5105192119335697e-07,
+                1.0
+            ],
+            "min" : [
+                1.0,
+                -1.4348813692777185e-07,
+                -1.1257676391096538e-07,
+                1.0
+            ],
+            "type" : "VEC4"
+        },
+        {
+            "bufferView" : 4,
+            "componentType" : 5126,
+            "count" : 24,
+            "max" : [
+                0.9999998807907104,
+                0.8010409474372864
+            ],
+            "min" : [
+                0.0,
+                0.05539727210998535
+            ],
+            "type" : "VEC2"
+        },
+        {
+            "bufferView" : 5,
+            "componentType" : 5121,
+            "count" : 72,
+            "max" : [
+                47
+            ],
+            "min" : [
+                0
+            ],
+            "type" : "SCALAR"
+        },
+        {
+            "bufferView" : 6,
+            "componentType" : 5126,
+            "count" : 48,
+            "max" : [
+                1.0000004768371582,
+                1.0,
+                0.48742246627807617
+            ],
+            "min" : [
+                -1.0000003576278687,
+                -1.0,
+                -0.1718665361404419
+            ],
+            "type" : "VEC3"
+        },
+        {
+            "bufferView" : 7,
+            "componentType" : 5126,
+            "count" : 48,
+            "max" : [
+                1.0,
+                1.0,
+                1.0
+            ],
+            "min" : [
+                -1.0,
+                -1.0,
+                -1.0
+            ],
+            "type" : "VEC3"
+        },
+        {
+            "bufferView" : 8,
+            "componentType" : 5126,
+            "count" : 48,
+            "max" : [
+                1.0,
+                7.940933880509066e-23,
+                4.470348358154297e-08,
+                1.0
+            ],
+            "min" : [
+                1.0,
+                -6.617444900424222e-24,
+                -0.0,
+                1.0
+            ],
+            "type" : "VEC4"
+        },
+        {
+            "bufferView" : 9,
+            "componentType" : 5126,
+            "count" : 48,
+            "max" : [
+                0.8361296057701111,
+                0.7666319012641907
+            ],
+            "min" : [
+                0.22613045573234558,
+                0.2321176528930664
+            ],
+            "type" : "VEC2"
+        },
+        {
+            "bufferView" : 10,
+            "componentType" : 5126,
+            "count" : 48,
+            "max" : [
+                1.0,
+                1.0,
+                1.0,
+                1.0
+            ],
+            "min" : [
+                0.0,
+                0.0,
+                0.0,
+                1.0
+            ],
+            "type" : "VEC4"
+        }
+    ],
+    "asset" : {
+        "copyright": "Copyright 2018 Analytical Graphics, Inc., CC-BY 4.0 https://creativecommons.org/licenses/by/4.0/ - Mesh and textures by Ed Mackey.",
+        "generator" : "Khronos Blender glTF 2.0 exporter",
+        "version" : "2.0"
+    },
+    "bufferViews" : [
+        {
+            "buffer" : 0,
+            "byteLength" : 36,
+            "byteOffset" : 0,
+            "target" : 34963
+        },
+        {
+            "buffer" : 0,
+            "byteLength" : 288,
+            "byteOffset" : 36,
+            "target" : 34962
+        },
+        {
+            "buffer" : 0,
+            "byteLength" : 288,
+            "byteOffset" : 324,
+            "target" : 34962
+        },
+        {
+            "buffer" : 0,
+            "byteLength" : 384,
+            "byteOffset" : 612,
+            "target" : 34962
+        },
+        {
+            "buffer" : 0,
+            "byteLength" : 192,
+            "byteOffset" : 996,
+            "target" : 34962
+        },
+        {
+            "buffer" : 0,
+            "byteLength" : 72,
+            "byteOffset" : 1188,
+            "target" : 34963
+        },
+        {
+            "buffer" : 0,
+            "byteLength" : 576,
+            "byteOffset" : 1260,
+            "target" : 34962
+        },
+        {
+            "buffer" : 0,
+            "byteLength" : 576,
+            "byteOffset" : 1836,
+            "target" : 34962
+        },
+        {
+            "buffer" : 0,
+            "byteLength" : 768,
+            "byteOffset" : 2412,
+            "target" : 34962
+        },
+        {
+            "buffer" : 0,
+            "byteLength" : 384,
+            "byteOffset" : 3180,
+            "target" : 34962
+        },
+        {
+            "buffer" : 0,
+            "byteLength" : 768,
+            "byteOffset" : 3564,
+            "target" : 34962
+        }
+    ],
+    "buffers" : [
+        {
+            "byteLength" : 4332,
+            "uri" : "VertexColorTest.bin"
+        }
+    ],
+    "images" : [
+        {
+            "uri" : "VertexColorTestLabels.png"
+        },
+        {
+            "uri" : "VertexColorChecks.png"
+        }
+    ],
+    "materials" : [
+        {
+            "doubleSided" : true,
+            "name" : "Label_Mat",
+            "pbrMetallicRoughness" : {
+                "baseColorTexture" : {
+                    "index" : 0
+                },
+                "metallicFactor" : 0.0,
+                "roughnessFactor" : 0.8999999761581421
+            }
+        },
+        {
+            "name" : "VC_Checks_Mat",
+            "pbrMetallicRoughness" : {
+                "baseColorTexture" : {
+                    "index" : 1
+                },
+                "metallicFactor" : 0.0,
+                "roughnessFactor" : 0.8999999761581421
+            }
+        }
+    ],
+    "meshes" : [
+        {
+            "name" : "LabelMesh",
+            "primitives" : [
+                {
+                    "attributes" : {
+                        "NORMAL" : 2,
+                        "POSITION" : 1,
+                        "TANGENT" : 3,
+                        "TEXCOORD_0" : 4
+                    },
+                    "indices" : 0,
+                    "material" : 0
+                }
+            ]
+        },
+        {
+            "name" : "VertexColorTestMesh",
+            "primitives" : [
+                {
+                    "attributes" : {
+                        "COLOR_0" : 10,
+                        "NORMAL" : 7,
+                        "POSITION" : 6,
+                        "TANGENT" : 8,
+                        "TEXCOORD_0" : 9
+                    },
+                    "indices" : 5,
+                    "material" : 1
+                }
+            ]
+        }
+    ],
+    "nodes" : [
+        {
+            "mesh" : 0,
+            "name" : "Labels",
+            "rotation" : [
+                0.7071068286895752,
+                0.0,
+                -0.0,
+                0.7071068286895752
+            ],
+            "translation" : [
+                0.0,
+                0.0,
+                0.9126079678535461
+            ]
+        },
+        {
+            "mesh" : 1,
+            "name" : "VertexColorTest",
+            "scale" : [
+                1.0,
+                1.0,
+                0.07413393259048462
+            ]
+        }
+    ],
+    "samplers" : [
+        {}
+    ],
+    "scene" : 0,
+    "scenes" : [
+        {
+            "name" : "Scene",
+            "nodes" : [
+                0,
+                1
+            ]
+        }
+    ],
+    "textures" : [
+        {
+            "sampler" : 0,
+            "source" : 0
+        },
+        {
+            "sampler" : 0,
+            "source" : 1
+        }
+    ]
+}

tools/config.json

@@ -5,6 +5,7 @@
 		"source/geometry/geometry.js",
 		"source/geometry/coord2d.js",
 		"source/geometry/coord3d.js",
+		"source/geometry/coord4d.js",
 		"source/geometry/quaternion.js",
 		"source/geometry/box3d.js",
 		"source/geometry/octree.js",

website/embed.html

@@ -21,6 +21,7 @@
 	<script type="text/javascript" src="../source/geometry/geometry.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord2d.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord3d.js"></script>
+	<script type="text/javascript" src="../source/geometry/coord4d.js"></script>
 	<script type="text/javascript" src="../source/geometry/quaternion.js"></script>
 	<script type="text/javascript" src="../source/geometry/box3d.js"></script>
 	<script type="text/javascript" src="../source/geometry/octree.js"></script>

website/index.html

@@ -23,6 +23,7 @@
 	<script type="text/javascript" src="../source/geometry/geometry.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord2d.js"></script>
 	<script type="text/javascript" src="../source/geometry/coord3d.js"></script>
+	<script type="text/javascript" src="../source/geometry/coord4d.js"></script>
 	<script type="text/javascript" src="../source/geometry/quaternion.js"></script>
 	<script type="text/javascript" src="../source/geometry/box3d.js"></script>
 	<script type="text/javascript" src="../source/geometry/octree.js"></script>

website/o3dv/js/sidebardetailspanel.js

@@ -80,9 +80,11 @@ OV.SidebarDetailsPanel = class extends OV.SidebarPanel
         this.AddProperty (table, new OV.Property (OV.PropertyType.Text, 'Type', typeString));
         this.AddProperty (table, new OV.Property (OV.PropertyType.Color, 'Color', material.color));
         if (material.type === OV.MaterialType.Phong) {
-            this.AddProperty (table, new OV.Property (OV.PropertyType.Color, 'Ambient', material.ambient));
+        this.AddProperty (table, new OV.Property (OV.PropertyType.Color, 'Ambient', material.ambient));
             this.AddProperty (table, new OV.Property (OV.PropertyType.Color, 'Specular', material.specular));
-        } else if (material.type === OV.MaterialType.Physical) {
+        }
+        this.AddProperty (table, new OV.Property (OV.PropertyType.Boolean, 'Vertex Colors', material.vertexColors));
+        if (material.type === OV.MaterialType.Physical) {
             this.AddProperty (table, new OV.Property (OV.PropertyType.Percent, 'Metalness', material.metalness));
             this.AddProperty (table, new OV.Property (OV.PropertyType.Percent, 'Roughness', material.roughness));
         }