Fixed vertex colors with 3 elements

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+### Fixed
+- Fixed an issue which caused some meshes not to render when using vertex colors.
+
 ## [2.1.0] - 2022-11-22
 ### Added
 - Added support for HDR cubemaps when using `ImageBasedLighting` or `Skybox` (encoded using the RGBE8 format).

src/gltf/gltf-attribute.ts

@@ -2,23 +2,23 @@
  * Represents data for a specific geometry attribute.
  */
 export class glTFAttribute {
-  constructor(public buffer: Uint32Array | Float32Array | Int8Array | Uint8Array | Int16Array | Uint16Array, public componentType: number, public stride = 0, public min?: number[], public max?: number[]) {
+  constructor(public buffer: Uint32Array | Float32Array | Int8Array | Uint8Array | Int16Array | Uint16Array, public componentType: number, public stride = 0, public componentCount: number, public min?: number[], public max?: number[]) {
   }
 
-  static from(componentType: number, buffer: ArrayBuffer, offset: number, size: number, stride?: number, min?: number[], max?: number[]) {
+  static from(componentType: number, componentCount: number, buffer: ArrayBuffer, offset: number, size: number, stride?: number, min?: number[], max?: number[]) {
     switch (componentType) {
       case 5125: return new glTFAttribute(
-        new Uint32Array(buffer, offset, size), componentType, stride, min, max)
+        new Uint32Array(buffer, offset, size), componentType, stride, componentCount, min, max)
       case 5126: return new glTFAttribute(
-        new Float32Array(buffer, offset, size), componentType, stride, min, max)
+        new Float32Array(buffer, offset, size), componentType, stride, componentCount, min, max)
       case 5120: return new glTFAttribute(
-        new Int8Array(buffer, offset, size), componentType, stride, min, max)
+        new Int8Array(buffer, offset, size), componentType, stride, componentCount, min, max)
       case 5121: return new glTFAttribute(
-        new Uint8Array(buffer, offset, size), componentType, stride, min, max)
+        new Uint8Array(buffer, offset, size), componentType, stride, componentCount, min, max)
       case 5122: return new glTFAttribute(
-        new Int16Array(buffer, offset, size), componentType, stride, min, max)
+        new Int16Array(buffer, offset, size), componentType, stride, componentCount, min, max)
       case 5123: return new glTFAttribute(
-        new Uint16Array(buffer, offset, size), componentType, stride, min, max)
+        new Uint16Array(buffer, offset, size), componentType, stride, componentCount, min, max)
       default: {
         throw new Error(`PIXI3D: Unknown component type "${componentType}".`)
       }

src/gltf/gltf-parser.ts

@@ -81,7 +81,7 @@ export class glTFParser {
     let buffer = this._asset.buffers[bufferView.buffer]
 
     return glTFAttribute.from(
-      accessor.componentType, buffer, offset, size, bufferView.byteStride, accessor.min, accessor.max)
+      accessor.componentType, componentCount[accessor.type], buffer, offset, size, bufferView.byteStride, accessor.min, accessor.max)
   }
 
   /**

src/material/standard/standard-material-feature-set.ts

@@ -26,10 +26,11 @@ export namespace StandardMaterialFeatureSet {
       features.push("WEBGL2 1")
     }
     if (geometry.colors) {
-      // Need to figure out how to detect if vec3 or vec4 should be
-      // used. For now disable vec4.
-      features.push("HAS_VERTEX_COLOR_VEC3 1")
-      // features.push("HAS_VERTEX_COLOR_VEC4 1") 
+      if (geometry.colors.componentCount === 3) {
+        features.push("HAS_VERTEX_COLOR_VEC3 1")
+      } else {
+        features.push("HAS_VERTEX_COLOR_VEC4 1")
+      }
     }
     if (geometry.normals) {
       features.push("HAS_NORMALS 1")

src/mesh/geometry/mesh-geometry-attribute.ts

@@ -23,5 +23,9 @@ export interface MeshGeometryAttribute {
      * is tightly packed. When two or more attributes use the same buffer, this
      * field must be defined.
      */
-     stride?: number
+    stride?: number
+    /**
+     * The number of elements in this attribute.
+     */
+    componentCount?: number
 }

src/mesh/mesh-shader.ts

@@ -49,7 +49,7 @@ export class MeshShader extends Shader {
     }
     if (geometry.colors) {
       result.addAttribute("a_Color", new Buffer(geometry.colors.buffer),
-        4, true, geometry.colors.componentType, geometry.colors.stride)
+        geometry.colors.componentCount, true, geometry.colors.componentType, geometry.colors.stride)
     }
     return result
   }

test/standard-material.test.mjs

@@ -76,4 +76,41 @@ describe("Standard material", () => {
       ]
     })
   })
+
+  it("should render correctly with 3 vertex colors using pixi *.*.*", async () => {
+    let render = (renderer, resources) => {
+      let model = PIXI3D.Model.from(resources["assets/cherry/cherry-color3.gltf"].gltf)
+      model.scale.set(0.25)
+      model.position.set(-2, -2, 0)
+      model.meshes.forEach(mesh => {
+        mesh.material.unlit = true
+        mesh.material.baseColor = new PIXI3D.Color(1, 0.5, 0.5)
+      })
+      renderer.render(model)
+    }
+    await expect(render).to.match("snapshots/clhhg.png", {
+      resources: [
+        "assets/cherry/cherry-color3.gltf"
+      ]
+    })
+  })
+
+  it("should render correctly with 4 vertex colors using pixi *.*.*", async () => {
+    let render = (renderer, resources) => {
+      let model = PIXI3D.Model.from(resources["assets/cherry/cherry-color4.gltf"].gltf)
+      model.scale.set(0.25)
+      model.position.set(-2, -2, 0)
+      model.meshes.forEach(mesh => {
+        mesh.material.unlit = true
+        mesh.material.baseColor = new PIXI3D.Color(0.5, 0.5, 1)
+      })
+      renderer.render(model)
+    }
+    await expect(render).to.match("snapshots/nldsg.png", {
+      resources: [
+        "assets/cherry/cherry-color4.gltf"
+      ]
+    })
+  })
+
 })