Solid cross-sections in Zygote 3D Anatomy - how?

[Lindsay Kay]

Hi all,

check out Zygote's new anatomy browser mobile app: 

http://www.zygote.com/atlas/

It's not WebGL, but assuming they used OpenGL ES2, does anybody have any ideas on how they (efficiently) did those solid cross-sections?

I've managed to approximate solid cross-sections in WebGL by disabling reflective lighting on interior object surfaces, making them purely emissive, so when you see those interior surfaces through a cross-section, they appear flat. 

These seem to be real cross-sections, however I'd be very surprised if they are actually rebuilding meshes in real time, adding polygons to close them off...

cheers,

Lindsay

[Won]

Since the cross-sections are solid, my guess is that they are used a stencil-based technique, like:

ftp://ftp.sgi.com/opengl/contrib/blythe/advanced99/notes/node21.html

-Won

--
You received this message because you are subscribed to the Google Groups "WebGL Dev List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webgl-dev-lis...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Theo Armour]

Lindsay

>> Anybody have any ideas on how they (efficiently) did those solid cross-sections?

My guess is that a lot is done inefficiently. If it were me I would have numerous skulls and skull morsels at my disposal.

The body has 206 or so bones and 23 in the head. This is not a lot of assets to deal with. So it should be easy for Zygote to pick and choose what they need for a particular set up.

After that I agree with Won that constructive solid geometry with its Boolean operations is a typical way to go. If you need some typical source code to look at Chandler Prall's work: http://www.chandlerprall.com/2011/12/constructive-solid-geometry-with-three-js/. Just ignore the Three.js parts.  ;-)

Both of the above, cool as they may be, are way beyond my pay grade and/or competence.  I build demos. My credo, to paraphrase Duke Ellington, is: if it looks good, it IS good. So here's what I would do:

1. Decide where you want your section.
2. Place a camera perpendicular to the plane of the section.
3. Reduce the near and far depth of the frustum of the camera so they are very close - making a frustum as thin a possible. Or adjust it to show as much of the background as you want.
   

Bingo! You can makes sections faster miles an hour.

At oblique angles or from way deep down inside something or sections that move along a path.

Then you can have further fun with canvas.toBlob or CSS perspective.

Nowadays, you can put your frustum where it counts.

I can't find a good example of this technique that I have in the cloud, but I have a bad one:

http://jaanga.github.io/brainofrichard/

Open the camera options and uncheck 'cameraMoving' and fiddle with 'cameraCutoffNear' and 'cameraCutoffFar'

Traditionally we have used the frustum to help with reducing processing needs. Now that we can process more much faster, we can use the frustum in fun and engaging new ways...

Theo

[Lindsay Kay]

Thanks Theo - you guys have given me lots of head stretching to do - I'll check these out.

cheers!

LK