Hi everybody, I’m trying to adapt the GPGpu example in my project. I started off by replacing the current gltf models with my own model that I exported from Blender. It loads well and shows up fine in GLTFViewer. However, in the GPGpu example, the colors are completely washed out. I used the Parrot.glb model as a reference when coloring my model using Vertex Colors.
So, I tried importing the original Parrot model in Blender and simply exported it out as a new glb file with vertex colors. Same thing, it shows up fine in the GLTFViewer but colors are completely washed out in the GPGpu gltf example. I turned on everything while exporting the model UVs, vertex colors, normals, etc but no luck.
Here’s the screenshot of the washed out colors.
Original Parrot model that works fine in GPGpu example.
Parrot.glb (94.8 KB)
New Parrot model (which was just imported and re-exported from Blender). It looks washed out in the example.
New_Parrot.glb (93.1 KB)
I can’t figure out what exactly is the different between the two models and why one looks fine and the other looks like the above. Any help will be appreciated.
The difference is that the vertex colors from Blender are stored as normalized uint16 data instead of (larger) float32. That could be a bit better for filesize sometimes, but doesn’t seem to matter here. The GPGPU code would need to be adjusted to convert the normalized uint16 vertex color values to 0–1 floats – divide by 65535.0.
Before
After
1 Like
Thanks a tonne for your quick response @donmccurdy.
You totally pointed me in the right direction with that.
Another caveat that I saw was that the size of the color attribute exported from Blender is 4 rather than 3. It’s actually exporting an Alpha channel as well and it appears that there is no way to control that from the glb exporter.
So, here are the changes I made in the GPGPU code.
1: Update the birdColor and color attribute on the BufferGeometry with Uint16Array from Float32Array
BirdGeometry.setAttribute( 'birdColor', new THREE.BufferAttribute( new Uint16Array( color ), 3, true) );
BirdGeometry.setAttribute( 'color', new THREE.BufferAttribute( new Uint16Array( color ), 3, true ) );
2: Add a simple filter to remove alpha channels from the color array on the exported mesh.
// Filter alpha values from the color array.
let colArray = birdGeo.getAttribute( 'color').array;
let newColorArray = [];
let skip = 3;
for (let i = 0, j = 0; i < colArray.length; i++) {
if (i % skip === 0 && i !== 0) {
// Don't add this color value.
skip = skip + 4;
} else {
newColorArray[j] = colArray[i];
j++;
}
}
And then it worked…
1 Like
