3D CSS Periodic table with three.js

Yes, we do. I've just reported an issue with this page (a crash), and we are specifically working to improve our blur algorithm (which is use to make the box-shadow in CSS).

afaik, it's not a specific position to read the CSS posts that make the front page on Hacker News, but a lot of people read HN and other similar websites, and we usually open tickets and/or bug the right people.

Because Mozilla is an open organization, you could even file a bug [1], or come and tell us on irc [2], if you care. That would be much appreciated and falls into the category of things people have to do for us all to get a better Firefox.

[1]: https://bugzilla.mozilla.org/enter_bug.cgi [2]: irc.mozilla.org, #gfx for rendering speed, #developers if you have no idea why it is slow

box-shadow and the transitions make it extremely slow on FF: https://twitter.com/mrdoob/statuses/262526881813917696

This other css3d demo runs perfectly smooth on FF17/Win7: https://dl.dropbox.com/u/7508542/sandbox/threejs/css3d/css3d...

im on an iMac using Chrome (with a magic mouse).

Had the exact same experience, otherwise, pretty nice.

Same problem with magic touch surface, it always disappears.

Browser/OS?

For those that are curious to know more about the product demo Mr. Doob was trying to emulate, check out these three articles:

http://techcrunch.com/2012/10/16/famo-us-reveals-more-detail...

http://techcrunch.com/2012/09/10/famo-us-is-a-gaming-engine-...

http://venturebeat.com/2012/10/12/famo-us-shows-off-a-magica...

There are two video demos available on http://famo.us/ and you can sign up there to stay informed about our progress and know when we publicly release our library.

There are a number of alternative period table layouts[1] that highlight different aspects of the relationships between elements. I taught chemistry for a bit, and I coveted this swooping three-dimensional spiral model that gorgeously showed how the electrons were filling out the different orbitals...

Doob is the man, and I was disappointed when I hit the spiral button and it was a demo of putting the things in a spiral, not the half-remembered spiral-esque model in my mind.

[1] http://en.wikipedia.org/wiki/Alternative_periodic_tables

Absolutely. This is a wasted opportunity.

In spiral mode the elements with the same valency should be in the same row.

In fact, every mode should take this into account.

H and Li should be in the same row. The same with Mg and Ca.

Uops! Fixed.

As per the arrangements, I agree. I was just trying to replicate the original demo.

IMHO, the biggest use case for 3D right now is to add affordances to current flat interfaces. Many interfaces already incorporate 3D affordances, usually demonstrating depth to help the user understand what is happening, but these affordances are almost always faked, the same way that 3D is often faked by photoshop wizards.

At famo.us, we hope to make it much easier for interface designers use real 3D effects to add affordances to their interface and explore how else 3D can be used. Previously, if you wanted to design a 3D interface you had to completely invest in 3D, which is expensive time-wise to do for the sake of experimentation. What we'd like to do at famo.us is bridge 2D and 3D in a way that you can build your interfaces using familiar 2D paradigms, but also give you the tooling to explore 3D using real content you already have in 2D.

As more designers explore 3D and more customers become familiar with 3D little by little, I think we'll see more and more examples of its utility.

Here's a video where 3D is used with a constrained z-depth and orthogonal camera position (i.e. elevation view).

http://famo.us/ (the video on the left)

Also take a look at Clear App to see small examples of how 3D has been used to add affordances to a mostly 2D interface.

http://www.realmacsoftware.com/clear/

The people at www.foldable.me use css animations for their cool editor 3D editor.

That's certainly in production but I don't know if counts as a "productive purpose".

It looks like CSS 3D transformed elements are rendered as bitmaps.

There is no "busy wait architecture" in three.js, how you handle updates is entirely up to the application layer.

For example Editor refreshes the screen just when the camera or object changes:

http://mrdoob.github.com/three.js/editor/

Library just gives you renderer with render function. It is up to you when and how you call it.

It's just that most of examples use requestAnimationFrame to call renderer.render, which gets called by browser when browser refreshes the screen (usually at 60 fps).

This makes sense when you can expect either changes in the scene or if a camera view changes all the time (most of examples are like this).

But if you know both your scene and camera will be static for a reasonable amount of time, you can update the rendering just at points of time when changes happen.

You can't use a busy wait for animations in JavaScript.

three.js schedules frames with the requestAnimationFrame or setTimout method. (Edit: actually you have to schedule frames yourself via these methods as bd's comment point out). There's no other way to flush the Canvas' drawing buffer than ending the currently running function and giving control back to the browser. If you'd implement a busy wait in JavaScript, the screen would never update and the browser will kill the script after a few seconds.

three.js knows nothing about the animation that is running and thus just attempts to draw at 60fps - whether or not there's anything new to show. You could pause the animation if there's no user inupt (and the animation wouldn't update on its own), but that's your obligation.

What bd said. That logic goes in the application layer and not in the lib.

In this case I hadn't yet optimised the app like that. But I've implemented it now, thanks for pointing it out!

This is false pedantry. Have you ever seen a spiral staircase?

http://www.merriam-webster.com/dictionary/spiral

Fixed. Thanks!

It's not intended to be useful as a periodic table. It's a technology demo.

They'd look damn good in a movie. :)