search

jupyter-widgets / pythreejs

A Jupyter - Three.js bridge
https://pythreejs.readthedocs.io
Other
936 stars 185 forks source link

combining large objects sometimes fail to render #276

Closed aliddell closed 5 years ago

aliddell commented 5 years ago

First some relevant info:

I have some large objects I want to display in the same scene. Viewing them individually is no problem, and viewing the large (7.5M) and small (192K) objects together is no problem, but I can't see the large and medium (3.7M) objects together, or the medium and small objects together. Also, if I set the children of the scene manually (after the scene is created) to be a list with all three objects, they're all rendered. But if you try to rerender the scene, it's just a black square. The gist should hopefully clarify everything.

vidartf commented 5 years ago

I haven't tried to run the code yet, but is there any output (error/warning) in the browser development console (typically accessible by pressing F12 key)?

aliddell commented 5 years ago

Nothing out of the ordinary. Here's when I try to run the first rendering cell (creating large_small):

TV(517589): unfreeze Renderable.js:437
TV(517589): ThreeView.acquiring... Renderable.js:437
RendererPool.acquiring... RendererPool.js:99
RendererPool.acquire(id=0) RendererPool.js:144
TV(517589): ThreeView.acquireRenderer(0) Renderable.js:437
TV(517589): setting up controls Renderable.js:437
TV(517589): Enable controls Renderable.js:437
TV(517589): renderScene Renderable.js:437
TV(517589): render Object3D Renderable.js:437
TV(517589): renderScene Renderable.js:437

And large_med:

TV(781963): unfreeze Renderable.js:437
TV(781963): ThreeView.acquiring... Renderable.js:437
RendererPool.acquiring... RendererPool.js:99
RendererPool.acquire(id=1) RendererPool.js:144
TV(781963): ThreeView.acquireRenderer(1) Renderable.js:437
TV(781963): setting up controls Renderable.js:437
TV(781963): Enable controls Renderable.js:437
TV(781963): renderScene Renderable.js:437
TV(781963): render Object3D Renderable.js:437
TV(781963): renderScene Renderable.js:437

And med_small:

TV(870344): unfreeze Renderable.js:437
TV(870344): ThreeView.acquiring... Renderable.js:437
RendererPool.acquiring... RendererPool.js:99
RendererPool.acquire(id=2) RendererPool.js:144
TV(870344): ThreeView.acquireRenderer(2) Renderable.js:437
TV(870344): setting up controls Renderable.js:437
TV(870344): Enable controls Renderable.js:437
TV(870344): renderScene Renderable.js:437
TV(870344): render Object3D Renderable.js:437
TV(870344): renderScene Renderable.js:437

Here's what happens when I manually set the children property:

TV(517589): renderScene Renderable.js:437
TV(517589): render Object3D Renderable.js:437

And here's what happens when I try to view the large_small scene again in a new cell:

TV(206641): unfreeze Renderable.js:437
TV(206641): ThreeView.acquiring... Renderable.js:437
RendererPool.acquiring... RendererPool.js:99
THREE.WebGLRenderer 97 three.js:179:128
RendererPool.acquire(id=3) RendererPool.js:144
TV(206641): ThreeView.acquireRenderer(3) Renderable.js:437
TV(206641): setting up controls Renderable.js:437
TV(206641): Enable controls Renderable.js:437
TV(206641): renderScene Renderable.js:437
TV(206641): render Object3D Renderable.js:437
TV(206641): renderScene Renderable.js:437

I see the ThreeView has a different ID each time, but otherwise I can't see any indication of a problem. Maybe you see something I don't.

aliddell commented 5 years ago

Is there a better place to ask questions, maybe an IRC or Slack channel where users can help each other? I'm having multiple issues displaying objects and I don't think they would count as bugs to be reported here.

vidartf commented 5 years ago

I don't know if there is somewhere better, but my best bet would be on stack overflow after this. I had a quick look at this, and some observations:

My initial thoughts from this is that something goes wrong in the preview when trying to automatically set up the camera. This is probably a bug (not sure if it is in pythreejs or threejs itself) that I'll want to look into. That being said, you should probably make a helper function to view your meshes. Here is the code I used:

large_small = Scene(children=[
    large_mesh,
    med_mesh,
    AmbientLight('white', 0.3),
    DirectionalLight(position=(1,0,0))
])
camera = PerspectiveCamera(near=550, far=550000, position=(5687., 3849., 26069.))
Renderer(scene=large_small, camera=camera, controls=[OrbitControls(controlling=camera)])

Ideally, you'd calculate the camera positions based on their dimensions.

vidartf commented 5 years ago

PR fixing the preview camera issue: #277.

aliddell commented 5 years ago

Thanks! I was wondering about how the Preview sets up its scene. I take it that the camera is looking in the direction of the origin when you give it a position that isn't at the origin and don't explicitly call lookAt (?), but where does it look if you just instantiate the camera without setting a position or target? In any case, you've helped me a lot, thanks again.

vidartf commented 5 years ago

Preview uses a quick-and-dirty bounding sphere calculation to figure out where the camera needs to go/look and its clipping planes.

vidartf commented 5 years ago

The defaults for position and rotation of the camera are those defined by threejs. According to the three.js docs:

Note: A camera looks down its local, negative z-axis

aliddell commented 5 years ago

Awesome. Thanks for your help.