Add 3d space

[muddv]

This solves the same problem as #69 but has a few additional features (and maybe some additional flaws):

• JS bundle for 3d model is loaded only when “Show 3d space" button is activated, a loader is shown while the bundle is loading
• If 3d model is displayed, this condition is saved in the url as ?3d
• 3d model changes depending on "Show P3", "Show Rec2020" and "OkLch/Lch" settings
• The size of added files is smaller, though this is somewhat counterbalanced by performance, because I do not save vertices.
• I use a different layout in my implementation, although this, is of course, somewhat easy to fix
• Model is generated using points, not solid surface. This also is easy to change.

I want to work on displaying currently active color from the 2d graphs on 3d model, along with several small fixes, although this will still take some time, maybe it can be done before one of the prs is in condition to be merged. Maybe the best course of action is to work on this jointly, I hope this implementation has something to it.

[ai]

Can you show a screenshot or screen recording (sorry, I am on the go to run PR locally)

[muddv]

The page looks like this:

[muddv]

Additionally: Medium screen layout: Small screen layout:

[ai]

Can you rebase to the main to fix pnpm audit error?

[ai]

There is a problem with a model. Did you create from set of slides?

[muddv]

Can you rebase to the main to fix pnpm audit error?

Resolved it. This reveals a problem with package size limit. Correct me if I'm wrong, it measures all scripts, including 3d. But if 3d is disabled, in network tab the size is almost the same as in main branch. Maybe a different test condition can be made as opposed to simply increasing size limit.

[muddv]

There is a problem with a model. Did you create from set of slides?

What kind of problem do you mean exactly? The model is made up from points converted from rgb (p3 rgb etc.). If you mean that bottom is not solid, there are some fixed that can be tried.

[ai]

Resolved it. This reveals a problem with package size limit. Correct me if I'm wrong, it measures all scripts, including 3d. But if 3d is disabled, in network tab the size is almost the same as in main branch. Maybe a different test condition can be made as opposed to simply increasing size limit.

Yes. Can we set some prefix for the 3D bundle and move it out of Size Limit check by something like !plot-*.js?

[ai]

What kind of problem do you mean exactly?

The problem is that the space doesn’t look like a solid structure in the bottom.

[ai]

There is still a problem with solid structure in the bottom (screenshot from latest commit)

There is also a problem with moving rotating space by mouse. Looks like the rotation center is not in the center of the space.

Also, current space is very small. Can you make it bigger and put just above all card (we anyway will not keep it as small card)?

[ai]

A few other problems:

1. There is no keyboard control of the space rotation.
2. P3/Rec2020 toggles to break the current position of the space (space is going to origin position).

[muddv]

There is still a problem with solid structure in the bottom (screenshot from latest commit)

Yes it was kind of a quick hack, I want to adjust point generation math further to make it look better.

P3/Rec2020 toggles to break the current position of the space (space is going to origin position)

I think this can be paired with syncing the current position on the 2d charts with 3d space

Also, current space is very small. Can you make it bigger and put just above all card (we anyway will not keep it as small card)?

Can 3d space take up position of current LCH charts + settings on large screen? I think it can look good this way.

[ai]

Yes, we fixed the problem with solid surface of the model. What we still have:

1. Strange ; file
2. Bad mouse control. Seems like rotation center is out of the model.
3. We can zoom too close (need to add limit).
4. The bottom of surface looks wrong.

How it looks now:

How it should look (like Hue graph on C=0):

[ai]

Next changes to fix:

1. P3/Rec2020 checkbox should not reset zoom and position.
2. The rotation control is not very easy. Seems like rotation center is not inside the model and controls are not very intuitive (compare to globe on sitnik.ru)

Grabación de pantalla desde 2023-02-15 18-21-51.webm

[muddv]

I think most of the issues mentioned previously are fixed.

• I moved object to the center and controls feel better now. We can also add keyboard controls. Should we use arrow keys or wasd or something else?
• LCH model is currently broken, working on a fix if we need it.
• Camera needs to stay in the same position if user regenerates objects by clicking 'Show Rec 2020' for example
• Obviously something needs to be done about styling

Is there anything else major that I'm missing?

[muddv]

Is there anything else major that I'm missing?

Sorry missed previous comment, some of the questions are already answered

[ai]

Nope, we are very close. I asked designers for design but I will add it by my own.

Let’s finish LCH, camera position on P3/Rec2020. It will be also nice to improve controls (see comment above).

[muddv]

Camera position is now remembered between renders. It would be easy to also add it to url if ?3d is included. Would it be a good idea to add it?

[ai]

While we are waiting for design, can we add a current slices to the space?

[ai]

@muddv here is a preview of design on top of your feature:

https://ai-oklch--pr85-v1-1-znr8xs52.web.app/#70,0.1,128,100

Do you have Twitter account to mention you in release tweet?

[muddv]

Looks great, thank you! My twitter is @null_preference, would appreciate a mention!