Colors are too bright about vox-viewer

[tarakoKutibiru]

Hi.
Thanks for the great npm package. I use these codes in my work and they are very helpful.

I have looked into this color issue in detail and found the problem and will share the information.

It appears to be a color space issue, and applying an inverse gamma correction to correct the difference in color space between MagicaVoxel and THREE.js works fine.

let normalizedColors = componentizedColores.map((color) => color.map((c) => c / this.MAX_VALUE_OF_A_BYTE));
        
for (let i = 0; i < normalizedColors.length; i++) {
    let r = normalizedColors[i][0];
    let g = normalizedColors[i][1];
    let b = normalizedColors[i][2];
    
    // Inverse gamma correction
    r = Math.pow(r, 2.2);
    g = Math.pow(g, 2.2);
    b = Math.pow(b, 2.2);
    
    normalizedColors[i][0] = r;
    normalizedColors[i][1] = g;
    normalizedColors[i][2] = b;
}
     
let alignedColors = [[0, 0, 0], ...normalizedColors];
let flattenedColors = flatten(voxelValues.map((v) => alignedColors[v]));

To make the problem easier to understand, I rendered the image using MeshBasicMaterial and it looks like this

■Before

■After

This was the solution to the problem.
https://blenderartists.org/t/vertex-color-exported-by-gltf-glb-is-darker/1199970/4

[FlorianFe]

Awesome! It works! Thank you very much!

[FlorianFe]

most probable the error lays in this lines

    let vox = readVox(new Uint8Array(request.response));
  
    let voxelData = vox.xyzi.values;
    let size = vox.size;
    let rgba = vox.rgba.values;


    let componentizedColores = rgba.map((c) => [c.r, c.g, c.b])
    let voxels = zeros([size.x, size.y, size.z]);


    voxelData.forEach(({ x, y, z, i }) => voxels.set(x, y, z, i));


    voxels = voxels.transpose(1, 2, 0);


    let { vertices, normals, indices, voxelValues } = voxelTriangulation(voxels);


    let normalizedColors = componentizedColores.map((color) => color.map((c) => c / 2**8));
    let alignedColors = [ [0, 0, 0], ...normalizedColors ];
    let flattenedColors = flatten(voxelValues.map((v) => alignedColors[v]));


    let geometry = new BufferGeometry();


    geometry.setAttribute('position', new BufferAttribute(new Float32Array(vertices), 3));
    geometry.setAttribute('normal', new BufferAttribute(new Float32Array(normals), 3));
    geometry.setAttribute('color', new BufferAttribute(new Float32Array(flattenedColors), 3) );
    geometry.setIndex(new BufferAttribute(new Uint32Array(indices), 1));


    let material = new MeshStandardMaterial({ roughness: 1.0, metalness: 0.0 });
    let mesh = new Mesh(geometry, material);
    let exporter = new GLTFExporter();