Fix camera perspective and other polish for openscad viewer #238

Merged

Irev-Dev merged 5 commits from kurt/237 into main 2021-03-13 07:14:47 +01:00

Conversation 4 Commits 5 Files Changed 3 +92 -60

Irev-Dev commented 2021-03-12 09:58:13 +01:00 (Migrated from github.com)

Copy Link

• I don't think you need that explanatory paragraph up top after this resolution right?

Yup gone.

• Trying it out I actually enjoyed having the image remain slightly visible while dragging the cube, maybe 20-30%,
  because I could better gauge how much I was changing the view. What are your thoughts?

I wasn't too keen on this, but I added it and yeah, I like it. 🥇

• I think we should update the default OpenSCAD camera state to match your ThreeJS camera, because as of now the
  initial render doesn't align to the view cube but it starts to after your first adjustment with the cube.

Yes, so this is whole topic that I might see if openscad folks have any insight into, the main thing that made it look bad was the fov is different between the two. so I've set the three.js fov to match openscad default fov and it looks good (though in the latest openscad it's possible to change the fov in code with which might cause headaches). One thing I can't get working is when you "move the shape" with right click, they axis and the shape no long line up. This seems like a simple matter of scale. I experimented with a number of things, the thing I had most luck with was changing the openscad camera distance to something very low (this line ) --camera=${px},${py},${pz},${rx},${ry},${rz},300 the last number currently 300, if I change that something very low, like 5 or less, than the moving situation becomes much better (not perfect but better), but making that very low also seems to change the (not sure of the right term) clipping distance, as in the distance at which the objects are out of sight of the camera, so it's not practical to have it that low.

There might not be a solution since we're really pushing openscad outside of its normal use. But maybe there's something we can do the three.js side too, some scaling factor?

Other things I've done.

• Changed the reference cube to a set of axes, What do you think?
• Added a loading animation
• Firing a new image load is debounced/deffered by 400 ms, makes scroll/zoom not fire off one million requests
• general polish. I added 500ms transitions to the opacity changes, too slow?

https://user-images.githubusercontent.com/29681384/110915333-9a654700-836b-11eb-83e5-29cdd7bb83df.mov

With the polish I've been doing I'm a bit concerned I'm designing in code, without having thought about what it should look like prior to. It might be a good idea to take a break and give that a proper thing (not that it can't be changed later). Maybe I should be more concerned with getting a MVP working 🤷

One simple design choice is what color scheme do we want for the openscad output? lol

Tomorrow night

Tomorrow

Solarized

DeepOcean

Nature

BeforeDawn

Starnight

Sunset

Metalic

Cornfield

resolves #237

> * I don't think you need that explanatory paragraph up top after this resolution right? Yup gone. > * Trying it out I actually enjoyed having the image remain slightly visible while dragging the cube, maybe 20-30%, because I could better gauge how much I was changing the view. What are your thoughts? I wasn't too keen on this, but I added it and yeah, I like it. 🥇 > * I think we should update the default OpenSCAD camera state to match your ThreeJS camera, because as of now the initial render doesn't align to the view cube but it starts to after your first adjustment with the cube. Yes, so this is whole topic that I might see if openscad folks have any insight into, the main thing that made it look bad was the fov is different between the two. so I've set the three.js fov to match openscad default fov and it looks good (though in the latest openscad it's possible to change the fov in code with which might cause headaches). One thing I can't get working is when you "move the shape" with right click, they axis and the shape no long line up. This seems like a simple matter of scale. I experimented with a number of things, the thing I had most luck with was changing the openscad camera distance to something very low ([this line](https://github.com/Irev-Dev/cadhub/blob/main/api/src/docker/openscad/runScad.js#L19) ) `--camera=${px},${py},${pz},${rx},${ry},${rz},300` the last number currently 300, if I change that something very low, like 5 or less, than the moving situation becomes much better (not perfect but better), but making that very low also seems to change the (not sure of the right term) clipping distance, as in the distance at which the objects are out of sight of the camera, so it's not practical to have it that low. There might not be a solution since we're really pushing openscad outside of its normal use. But maybe there's something we can do the three.js side too, some scaling factor? Other things I've done. - Changed the reference cube to a set of axes, What do you think? - Added a loading animation - Firing a new image load is debounced/deffered by 400 ms, makes scroll/zoom not fire off one million requests - general polish. I added 500ms transitions to the opacity changes, too slow? https://user-images.githubusercontent.com/29681384/110915333-9a654700-836b-11eb-83e5-29cdd7bb83df.mov With the polish I've been doing I'm a bit concerned I'm designing in code, without having thought about what it should look like prior to. It might be a good idea to take a break and give that a proper thing (not that it can't be changed later). Maybe I should be more concerned with getting a MVP working 🤷 One simple design choice is what color scheme do we want for the openscad output? lol Tomorrow night  Tomorrow  Solarized  DeepOcean  Nature  BeforeDawn  Starnight  Sunset  Metalic  Cornfield  resolves #237

franknoirot commented 2021-03-13 05:12:01 +01:00 (Migrated from github.com)

Copy Link

• Ah I see, so there will be some more finessing to do in future with the camera syncing. I like what you've done here as a solution for now, the first rendered frame looks good.
• I love the axes! One case where they're a little less clear than the cube is where they are all going out in equal directions, so I tried out adding a little indigo sphere and kinda liked it, wanted to see your thoughts (see attached). Seeing the intersection point between the axis boxes and the sphere gave me a bit more orientation, so I could tell which side of the origin I was on if that makes sense.
• the loading animation, debouncing, and fade animation work great. I would've thought 500ms would be too long but it feels nice.
• I think Deep Ocean and BeforeDawn could be good for building a brand around, Metallic has some character that fits with your current brand but idk if I would like that hot pink if there was a bunch of it in the model, hard to parse features looking at it.

https://user-images.githubusercontent.com/23481541/111018701-55034280-8388-11eb-85c1-b04c4a7ebc0b.mp4

- Ah I see, so there will be some more finessing to do in future with the camera syncing. I like what you've done here as a solution for now, the first rendered frame looks good. - I love the axes! One case where they're a little less clear than the cube is where they are all going out in equal directions, so I tried out adding a little indigo sphere and kinda liked it, wanted to see your thoughts (see attached). Seeing the intersection point between the axis boxes and the sphere gave me a bit more orientation, so I could tell which side of the origin I was on if that makes sense. - the loading animation, debouncing, and fade animation work great. I would've thought 500ms would be too long but it feels nice. - I think Deep Ocean and BeforeDawn could be good for building a brand around, Metallic has some character that fits with your current brand but idk if I would like that hot pink if there was a bunch of it in the model, hard to parse features looking at it. https://user-images.githubusercontent.com/23481541/111018701-55034280-8388-11eb-85c1-b04c4a7ebc0b.mp4

franknoirot (Migrated from github.com) approved these changes 2021-03-13 05:16:41 +01:00

franknoirot (Migrated from github.com) left a comment

Copy Link

I commented in with a question about a possible addition and one review comment about a change, but they´re minor if you want to merge.

I commented in with a question about a possible addition and one review comment about a change, but they´re minor if you want to merge.

web/src/components/IdeViewer/IdeViewer.js

franknoirot (Migrated from github.com) commented 2021-03-13 05:15:10 +01:00

Copy Link

It looks like you don't need this "opacity-" right?

It looks like you don't need this "opacity-" right?

web/src/components/IdeViewer/IdeViewer.js

franknoirot (Migrated from github.com) commented 2021-03-13 05:13:58 +01:00

Copy Link

Are you interested in using these colors for the brand?

Are you interested in using these colors for the brand?

web/src/helpers/hooks/useIdeState.js

franknoirot (Migrated from github.com) commented 2021-03-13 05:13:23 +01:00

Copy Link

Oh nice this is CAD package-agnostic I like that.

Oh nice this is CAD package-agnostic I like that.

Irev-Dev (Migrated from github.com) reviewed 2021-03-13 06:49:30 +01:00

web/src/components/IdeViewer/IdeViewer.js

Irev-Dev (Migrated from github.com) commented 2021-03-13 06:49:30 +01:00

Copy Link

Oh yup 100% thanks for pointing this out.

Oh yup 100% thanks for pointing this out.

Irev-Dev (Migrated from github.com) reviewed 2021-03-13 07:13:58 +01:00

web/src/components/IdeViewer/IdeViewer.js

Irev-Dev (Migrated from github.com) commented 2021-03-13 07:13:58 +01:00

Copy Link

Yeah that sounds great. I didn't change anything now but we can circle back and changes these soon.

I love the axes! One case where they're a little less clear than the cube is where they are all going out in equal directions, so I tried out adding a little indigo sphere and kinda liked it, wanted to see your thoughts (see attached). Seeing the intersection point between the axis boxes and the sphere gave me a bit more orientation, so I could tell which side of the origin I was on if that makes sense.

Would you like to change the axis colors along with the sphere at the base of the axes?

I think Deep Ocean and BeforeDawn could be good for building a brand around, Metallic has some character that fits with your current brand but idk if I would like that hot pink if there was a bunch of it in the model, hard to parse features looking at it.

Yup sweet, I've added deepOcean for now and changed the default script to add a difference so that some of the cut colour is present.

Yeah that sounds great. I didn't change anything now but we can circle back and changes these soon. > I love the axes! One case where they're a little less clear than the cube is where they are all going out in equal directions, so I tried out adding a little indigo sphere and kinda liked it, wanted to see your thoughts (see attached). Seeing the intersection point between the axis boxes and the sphere gave me a bit more orientation, so I could tell which side of the origin I was on if that makes sense. Would you like to change the axis colors along with the sphere at the base of the axes? >I think Deep Ocean and BeforeDawn could be good for building a brand around, Metallic has some character that fits with your current brand but idk if I would like that hot pink if there was a bunch of it in the model, hard to parse features looking at it. Yup sweet, I've added deepOcean for now and changed the default script to add a `difference` so that some of the cut colour is present.

Sign in to join this conversation.

Reviewers

No Reviewers

franknoirot

Irev-Dev

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

h3n3

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: h3n3/cadhub#238