{"record":{"id":"8df1ea60f8912376","repo":"BabylonJS/Babylon.js","slug":"context-invalid-number-of-components-compon","errorCode":null,"errorMessage":"${context}: Invalid number of components (${componentSize}) for COLOR_0 attribute","messagePattern":"(.+?): Invalid number of components \\((.+?)\\) for COLOR_0 attribute","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/dev/loaders/src/glTF/2.0/glTFLoader.pure.ts","lineNumber":1471,"sourceCode":"            let colors = null;\r\n            const componentSize = babylonVertexBuffer.getSize();\r\n            if (componentSize === 3) {\r\n                colors = new Float32Array((data.length / 3) * 4);\r\n                babylonVertexBuffer.forEach(data.length, (value, index) => {\r\n                    const pixid = Math.floor(index / 3);\r\n                    const channel = index % 3;\r\n                    colors[4 * pixid + channel] = data[3 * pixid + channel] + value;\r\n                });\r\n                for (let i = 0; i < data.length / 3; ++i) {\r\n                    colors[4 * i + 3] = 1;\r\n                }\r\n            } else if (componentSize === 4) {\r\n                colors = new Float32Array(data.length);\r\n                babylonVertexBuffer.forEach(data.length, (value, index) => {\r\n                    colors[index] = data[index] + value;\r\n                });\r\n            } else {\r\n                throw new Error(`${context}: Invalid number of components (${componentSize}) for COLOR_0 attribute`);\r\n            }\r\n            babylonMorphTarget.setColors(colors);\r\n        });\r\n\r\n        return await Promise.all(promises).then(() => {});\r\n    }\r\n\r\n    private static _LoadTransform(node: INode, babylonNode: TransformNode): void {\r\n        // Ignore the TRS of skinned nodes.\r\n        // See https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#skins (second implementation note)\r\n        if (node.skin != undefined) {\r\n            return;\r\n        }\r\n\r\n        let position = Vector3.Zero();\r\n        let rotation = Quaternion.Identity();\r\n        let scaling = Vector3.One();\r\n\r","sourceCodeStart":1453,"sourceCodeEnd":1489,"githubUrl":"https://github.com/BabylonJS/Babylon.js/blob/0592b347b8a4ee0236089ea86a749cacfdb266d8/packages/dev/loaders/src/glTF/2.0/glTFLoader.pure.ts#L1453-L1489","documentation":"Morph target COLOR_0 attributes must have 3 (RGB) or 4 (RGBA) components. When _loadMorphTargetVertexDataAsync builds the color Float32Array for a morph target and the per-vertex component size is anything else, it throws because Babylon colors can only be set as Vec3/Vec4 data.","triggerScenarios":"Loading a glTF whose morph target's COLOR_0 accessor has componentType/Type yielding componentSize other than 3 or 4 (e.g. a VEC2 or scalar color accessor).","commonSituations":"Hand-authored glTF with a malformed COLOR_0 accessor type; asset-conversion scripts that rewrite accessors incorrectly; exporter bugs emitting unsupported color vector sizes.","solutions":["Fix the asset so COLOR_0 accessors are type VEC3 or VEC4 (as the glTF spec requires)","Run the file through glTF-Validator to catch invalid accessor types before loading","Re-export the model and confirm color attribute types in the output JSON"],"exampleFix":"// before (in .gltf)\n// { \"attributes\": { \"COLOR_0\": 7 }, ... } // accessor 7 type: VEC2\n// after\n// accessor 7: { \"type\": \"VEC4\", \"componentType\": 5126 } // 3 or 4 components required","handlingStrategy":"validation","validationCode":"// Check COLOR_0 accessor types on morph targets before loading\nfor (const mesh of gltf.meshes ?? []) {\n  for (const p of mesh.primitives ?? []) {\n    for (const t of p.targets ?? []) {\n      if (t.COLOR_0 != null) {\n        const acc = gltf.accessors[t.COLOR_0];\n        if (!/^VEC[34]$/.test(acc.type)) throw new Error(`COLOR_0 accessor must be VEC3/VEC4, got ${acc.type}`);\n      }\n    }\n  }\n}","typeGuard":"function hasValidColorAccessor(gltf, accessorIndex) {\n  const acc = gltf.accessors?.[accessorIndex];\n  return !!acc && (acc.type === \"VEC3\" || acc.type === \"VEC4\");\n}","tryCatchPattern":"try {\n  await loader.loadAsync(url);\n} catch (e) {\n  if (e.message.includes(\"Invalid number of components\") && e.message.includes(\"COLOR_0\")) {\n    console.error(\"Fix morph target COLOR_0 accessor to VEC3/VEC4\");\n  } else throw e;\n}","preventionTips":["Validate accessor types with glTF-Validator in CI","Never hand-write COLOR_0 accessors; export colors from the DCC tool"],"tags":["gltf","morph-targets","color-attribute"],"backgroundTag":"gltf-invalid-accessor-type","analyzedSha":"0592b347b8a4ee0236089ea86a749cacfdb266d8","analyzedAt":"2026-08-30T15:11:20.442Z","schemaVersion":2},"datasetVersion":"2026-08-30T18:17:15.746Z"}