search

mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
102.43k stars 35.36k forks source link

lines disappear prematurely when they clip the bottom center of the camera #7

Closed D1plo1d closed 13 years ago

D1plo1d commented 14 years ago

When I zoom into a object (which I do by incrementing the z vector of the camera position in three.js) I find that once I get to close lines start disappearing while they should still be in the viewing area. Perhaps this is a problem with my near clip (0.000001) or far clip (1000000) being set poorly (those values were based on no real 3d programming experience) but it could also be a bug so I'm posting it here in hopes of some help with the issue.

The lines in the screenshots bellow use THREE.ColorStrokeMaterial and have overdraw set to true (btw. what does overdraw do?). I've drawn a 2d grid with a part on it (this is part of some CNC software I'm working on) but as you can see the grid lines that intersect the bottom of the camera are disappearing as i zoom into them.

A few screen shots of the problem (zooming into the object by incrementing camera.position.z): http://imgur.com/a/JA9ET/threejs_lines_disappearing_due_to_camera_clip_issue

Any advice on how to solve this problem would be greatly appreciated!

D1plo1d commented 14 years ago

update: although i didn't zoom in far enough to see it this has the same effect on the part's lines (since they are smaller i need to zoom in more to intersect them with the camera)

D1plo1d commented 14 years ago

forgot to add one critical detail, I'm fairly certain this is all going through the canvas renderer - the browser is Chrome 5.0.375.70 (48679) Ubuntu.

mrdoob commented 14 years ago

I can't seem to be able to open imgur images today... But I think I know what you mean.

This is because one of the points of the segment is outside the frustrum. That doesn't happen with the WebGLRenderer, but with the CanvasRenderer/SVGRenderer it needs a feature that I haven't had time to implement.

Frustrum Clipping http://blog.zupko.info/?p=170

Feeling like tackling this one? :)

PS: Overdraw extends the screen space positions of the vertices to avoid the antialias gaps between polygons that (unfortunately) all the browsers show. Each vertex is separated from the other 2 (or 3) by 0.5 pixels. It would be great if had a antialias = false option, but they decided not to put it. Actually. overdrawn shouldn't be an option on the StrokeMaterials as it's not an issue there. Will fix.

mrdoob commented 14 years ago

Specifically, the feature needed is FrustumClipping.NEAR. Which, may be a good idea to include by default on CanvasRenderer and SVGRenderer.

mrdoob commented 14 years ago

Thinking about it again, the Renderer class should be the one that does that. So it would split a polygon if needed, letting the CanvasRenderer and SVGRenderer just draw. If that's in place maybe CanvasRenderer/SVGRenderer wouldn't need to do 2d clipping...

D1plo1d commented 14 years ago

ok, good to know I'm not crazy, I'll take a look at FrustrumClipping.near later on and see if i'm up to it. Thanks again :)

jurjen commented 14 years ago

I believe this would also fix the issue with intersecting planes? I've modified the cube demo to spin in both the x and y axes, and when it intersects with the plane underneath, you get interesting rendering, where I think the foremost triangle is drawn over the top, and isn't clipped on the intersection line... If you change the number of segments used for the plane, the effect changes as well (more triangles, more intersections).

mrdoob commented 14 years ago

You mean when 2 objects "collide"? I think that's a different issue. Also hard to nail. There is some good "reading" here:

http://away.kiev.ua/away3d/techdemos/zorder/

mrdoob commented 13 years ago

Lines are now clipped. http://mrdoob.github.com/three.js/examples/lines_test.html