Add 3d space by muddv · Pull Request #71 · evilmartians/oklch-picker

muddv · 2023-02-10T17:14:31Z

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 · 2023-02-10T17:23:20Z

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

muddv · 2023-02-10T17:25:47Z

The page looks like this:

muddv · 2023-02-10T17:30:44Z

Additionally:
Medium screen layout:

Small screen layout:

index.ts

stores/current.ts

ai · 2023-02-11T01:03:51Z

view/card/mixin.pug

      .card_range
        +range('a', ALPHA_MAX, ALPHA_STEP, 100)
+
+    else if type === 'model'


Let’s remove the card and just add the model above the cards. We will find another spot.

I moved the card to the model's mixin. I think some there are few more small changes that can be made to make css and page structure more consistent. Working on it

ai · 2023-02-11T01:13:50Z

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

ai · 2023-02-11T01:23:27Z

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

muddv · 2023-02-11T08:59:27Z

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 · 2023-02-11T09:11:27Z

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 · 2023-02-11T11:11:18Z

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 · 2023-02-11T11:11:57Z

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 · 2023-02-11T16:59:15Z

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 · 2023-02-11T17:00:45Z

A few other problems:

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

muddv · 2023-02-11T17:47:49Z

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 · 2023-02-12T22:51:29Z

view/model/index.ts

+      for (let z = 0.01; z <= 1; z += 0.01) {
+        let rgb: Rgb | P3 | Rec2020 = { mode, r: x, g: y, b: z }
+        let color
+        LCH ? (color = lch(rgb)) : (color = oklch(rgb))


You should use build() instead

https://github.com/evilmartians/oklch-picker/blob/main/lib/colors.ts#L44

view/model/index.ts

view/model/mixin.pug

view/settings/index.ts

vite.config.js

;

ai · 2023-02-14T19:29:33Z

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

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

How it looks now:

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

ai · 2023-02-15T17:23:00Z

Next changes to fix:

P3/Rec2020 checkbox should not reset zoom and position.
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)

Grabacion.de.pantalla.desde.2023-02-15.18-21-51.webm

muddv · 2023-02-15T17:24:49Z

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 · 2023-02-16T11:33:26Z

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 · 2023-02-21T19:28:26Z

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

ai · 2023-03-11T22:08:01Z

@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 · 2023-03-12T10:47:08Z

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

* Resolve merge conflict * Add 3d space condition to url * Dynamic import for model script * Move model to top * Fix model not loading when ?3d is in url * Move model event handlers * Adjust layout for different screens * Add loader * Tune camera and model generation settings * Hide model canvas when 3d space is disabled * Fixes: model card, unnecessary then * Resolve merge conflicts * Infer loader type from selector * Increase solidity of gamut's bottom * Convert grid to 2 letters * Resolve merge conflict * Move model to top * Exclude 3d model from size limit test * Fix model generation for LCH * Fix grid * Change model generation to make it solid * Make 3d space canvas visible * Delete unnecessary file * Refactor model generation, fix control center and bottom surface color * Fixes: add hash to model chunk, remove unneded async * Fix model generation for LCH * Save camera position between renders * Adjust controls --------- Co-authored-by: Andrey Sitnik <andrey@sitnik.ru>

ai reviewed Feb 11, 2023

View reviewed changes

index.ts Outdated Show resolved Hide resolved

ai reviewed Feb 11, 2023

View reviewed changes

stores/current.ts Outdated Show resolved Hide resolved

ai reviewed Feb 11, 2023

View reviewed changes

stores/current.ts Outdated Show resolved Hide resolved

ai reviewed Feb 11, 2023

View reviewed changes

muddv force-pushed the 3d-space branch from 8f8e6c8 to 9c8ef47 Compare February 11, 2023 09:49

muddv closed this Feb 11, 2023

muddv force-pushed the 3d-space branch from 814e706 to 3ba66ba Compare February 11, 2023 18:32

muddv reopened this Feb 11, 2023

ai reviewed Feb 12, 2023

View reviewed changes

view/model/index.ts Outdated Show resolved Hide resolved

ai reviewed Feb 12, 2023

View reviewed changes

view/model/mixin.pug Outdated Show resolved Hide resolved

ai reviewed Feb 12, 2023

View reviewed changes

view/settings/index.ts Outdated Show resolved Hide resolved

ai reviewed Feb 12, 2023

View reviewed changes

vite.config.js Outdated Show resolved Hide resolved

ai reviewed Feb 14, 2023

View reviewed changes

; Outdated Show resolved Hide resolved

muddv force-pushed the 3d-space branch from b11ed53 to e298dac Compare February 15, 2023 17:10

muddv added 20 commits February 16, 2023 13:36

Tune camera and model generation settings

9ae6f33

Hide model canvas when 3d space is disabled

01540a9

Fixes: model card, unnecessary then

2283677

Resolve merge conflicts

07bcb01

Infer loader type from selector

f477caf

Increase solidity of gamut's bottom

ca5acb2

Convert grid to 2 letters

a9c5e0c

Resolve merge conflict

1c07103

Move model to top

e6130e0

Exclude 3d model from size limit test

85d09e7

Fix model generation for LCH

6804943

Fix grid

2dbbc6c

Change model generation to make it solid

187ca4b

Make 3d space canvas visible

5756238

Delete unnecessary file

1ae065b

Refactor model generation, fix control center and bottom surface color

0cd4663

Fixes: add hash to model chunk, remove unneded async

0cfff8b

Fix model generation for LCH

5ffa546

Save camera position between renders

56e3317

Adjust controls

8106449

muddv force-pushed the 3d-space branch from e298dac to 8106449 Compare February 16, 2023 11:18

ai approved these changes Feb 20, 2023

View reviewed changes

ai changed the base branch from main to v1.1 March 10, 2023 16:41

Merge branch 'v1.1' into 3d-space

e5af6ba

ai merged commit 006a083 into evilmartians:v1.1 Mar 10, 2023

Conversation

muddv commented Feb 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ai commented Feb 10, 2023

Uh oh!

muddv commented Feb 10, 2023

Uh oh!

muddv commented Feb 10, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ai Feb 11, 2023

Choose a reason for hiding this comment

Uh oh!

muddv Feb 11, 2023

Choose a reason for hiding this comment

Uh oh!

ai commented Feb 11, 2023

Uh oh!

ai commented Feb 11, 2023

Uh oh!

muddv commented Feb 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

muddv commented Feb 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ai commented Feb 11, 2023

Uh oh!

ai commented Feb 11, 2023

Uh oh!

ai commented Feb 11, 2023

Uh oh!

ai commented Feb 11, 2023

Uh oh!

muddv commented Feb 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ai Feb 12, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ai commented Feb 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ai commented Feb 15, 2023

Uh oh!

muddv commented Feb 15, 2023

Uh oh!

muddv commented Feb 16, 2023

Uh oh!

ai commented Feb 21, 2023

Uh oh!

ai commented Mar 11, 2023

Uh oh!

muddv commented Mar 12, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

muddv commented Feb 10, 2023 •

edited

Loading

muddv commented Feb 11, 2023 •

edited

Loading

muddv commented Feb 11, 2023 •

edited

Loading

muddv commented Feb 11, 2023 •

edited

Loading

ai commented Feb 14, 2023 •

edited

Loading