Solid surface for BufferGeometry

I want to create a 3d shape which would represent sRGB color gamut in xyz space (for now I’m working with OkLab space)
I’ve set up a codesandbox with a somewhat working implementation.

Right now I loop through rgb values from 0 to 1 and plot that color and coordinate gamut position in color space (in main.js, getModelData() function). I think the general shape is correct, but I would like it to have a solid surface, right now you can clearly see it is made of a discrete set of points (at least I think that is what’s going on) if you zoom in. What would be the best way to achieve this?
I’ve seen a thread here where alpha shapes and Delaunay triangulations were mentioned, and I think this could help me, but maybe there is something more straightforward I can do, like changing some material properties or BufferGeometry attributes that would work with my current implementation

I am not really proficient in three.js (or color spaces or 3d in general), so I would appreciate any tips on what I can do differently. This is my first attempt to make something somewhat complicated in Three, so sorry if I’m missing something obvious.

Edit: since posting this I have replaced THREE.Mesh with Points (sandbox is updated accordingly). This represents the shape I need better, however the question remains: is there a good way to connect outer points, making surface appera solid?

If the shape is convex, there is THREE.ConvexGeometry object that can pack a cloud of points into a 3D convex shape.

If the shape is not convex, then some ray-tracing / marching-cubes technique might be useful.

Warning: now I put my crazy hat on: you can start with an RGB cube with many vertices (e.g. 100x100x100) and when you calculate the LCH color for each RGB vertex, you just move the vertex to a new LCH position. This will deform the surface of the cube into another surface. This idea will work if peripheral points of the RGB model are also peripheral points in the other model. Now I take off my crazy hat, and I’m back to normal.

FYI: I’m not able to see any image (see attached snapshot):

1 Like

Thank you for your answer. The shape is not convex, but I will look into ray tracing and marching cubes.
Crazy hat technique also sound very promising, will definitely try it and come back with results.

I think blank image is due to some codesandbox problem, I definitely was able to see it before, and now I can’t. Thanks for the heads up, will try to fix it.

Update: fixed the sandbox, but in case it breaks again, the shape in question looks like this:

1 Like

So what I ended up doing was plotting RGB points in 3d space and using Delaunay triangulation with delaunator library and example from this thread. So RGB cube idea worked out in part, but I could not figure out how to deal with empty space produced by surface deformation, so triangulation was a way to go. In the end it worked out pretty well in my opinion

Hope this helps anyone who finds this thread in future

2 Likes