Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix clipping in webgl2_materials_texture3d #22649

Merged
merged 3 commits into from
Oct 8, 2021
Merged

Fix clipping in webgl2_materials_texture3d #22649

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9e87209
Fix clipping in webgl2_materials_texture3d
rlschuller Oct 6, 2021
7f9e721
Adjust frustrum and camera position
rlschuller Oct 6, 2021
6a75a17
Disable pan and adjust camera
rlschuller Oct 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions examples/webgl2_materials_texture3d.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@
// Create camera (The volume renderer does not work very well with perspective yet)
const h = 512; // frustum height
const aspect = window.innerWidth / window.innerHeight;
camera = new THREE.OrthographicCamera( - h * aspect / 2, h * aspect / 2, h / 2, - h / 2, 1, 1000 );
camera.position.set( 0, 0, 128 );
camera = new THREE.OrthographicCamera( - h * aspect / 2, h * aspect / 2, h / 2, - h / 2, 1, 2000 );
camera.position.set( -1000, 0, 128 );
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would camera.position.set( 0, 0, 256 ) work too?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It makes the camera higher, which would keep the object further away than using camera.position.set( 0, 0, 128 ). From what I understood, what matters is the initial Euclidean distance from the camera to the object's center.

I believe that it would fix the clipping due to rotation only, but not for rotation + horizontal movement.

With the frustrum size of 1000-1=999 (before), I couldn't find a distance that would reliably avoid clipping for rotation + horizontal movement. Either it would clip at the front or at the back.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Zooming also doesn't seem to affect the frustrum's near and far planes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let OOO be the object and C the camera.

changing only camera.position.set( 0, 0, 128 ); to camera.position.set( 0, 0, 256 ); would create the following situation:

O
O     C
O

to

O     C  
O
O

IMO, keeping the z of the camera aligned w/ the center of the exam (z=128) makes sense. But it is subjective.

Here follows the initial viewing angle for camera.position.set( 0, 0, 256 );:

image

Copy link
Contributor Author

@rlschuller rlschuller Oct 6, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From what I understood, any camera.position.set( x, y, z );, such that sqrt(x^2 + y^2 + (z-128)^2) is approx 1000 = half of the new distance for the frustrum's far plane will work fine.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can imagine it as a rotating table.

We don't want the camera to be just outside of the radius of the object:
image

But outside of the radius of the rotating table itself:
image

Copy link
Contributor Author

@rlschuller rlschuller Oct 6, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for camera.position.set( 0, 0, 256 );, small translations make the clipping appear again:

0_0_256

camera.up.set( 0, 0, 1 ); // In our data, z is up

// Create controls
Expand Down