
3D CSS Periodic table with three.js - mmahemoff
http://mrdoob.com/lab/javascript/threejs/css3d/periodictable/
======
melling
Do Mozilla devs read HN? This is significantly slower in Firefox (Nightly)
than on Chrome (Canary). I hope it's someone's job to go through all the CSS
posts that make it near the top of HN and figure out what needs to be done to
make FF better.

~~~
padenot
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

~~~
chris_wot
I'd like to say: I appreciate the hard work you all put into Firefox :-)

------
calinet6
The first thing I did (by accidental movement on the trackpad) was mouse-
scroll zoom all the way out to make the thing almost invisible. Since the
scroll only triggers when the mouse is over the elements themselves, this made
it completely non-functional until I reloaded.

Make the scroll zoom far less sensitive, or at least make it trigger on the
whole canvas.

Othewise, yeah, looks cool.

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

Had the exact same experience, otherwise, pretty nice.

~~~
chromejs10
same here. wayyy too sensitive to scrolling

------
mmahemoff
Mr Doob wrote this to try emulating a TechCrunch Disrupt demo. Here is the
background:

[https://plus.google.com/113862800338869870683/posts/QcFk5HrW...](https://plus.google.com/113862800338869870683/posts/QcFk5HrWran)

~~~
malandrew
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/10/16/famo-us-reveals-more-details-
about-its-html5-turbo-charger/)

[http://techcrunch.com/2012/09/10/famo-us-is-a-gaming-
engine-...](http://techcrunch.com/2012/09/10/famo-us-is-a-gaming-engine-
for-3d-interfaces/)

[http://venturebeat.com/2012/10/12/famo-us-shows-off-a-
magica...](http://venturebeat.com/2012/10/12/famo-us-shows-off-a-magical-user-
interface-for-touch-devices/)

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.

------
EvanMiller
Looks nice, but arranging the elements as a sphere, spiral, etc. completely
defeats the purpose of the periodic table. Also, your atomic numbers are off
by one.

~~~
njl
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>

~~~
mrdoob2
Feel free to hack the code and implement these layouts. Should be pretty easy
^^

------
ewolf
Certainly a cool demo — but has anyone already seen a use of 3D in CSS/WebGL
for a productive purpose? I'd be really interested in that; showing the
atoms/molecules in 3D, as it is the suggested in one of the comments in the
link @mmahemoff posted, for example, seems like a great idea.

~~~
malandrew
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/>

~~~
crucialfelix
I'm starting development shortly on an app for which I really want this type
of interface (as seen in the video on famo.us)

Do you have any idea when developers will get access ? Is there any other
place to get information about it ?

~~~
malandrew
We're keeping everyone updated of our progress via our mailing list. You can
sign up for notifications at <http://famo.us/>

------
lifeisstillgood
I may well find myself moderated away but

Fuck Me.

I guess I am too out of touch but the sphere blew me away.

------
scotty79
If you can have 3d then this arrangement of elements makes much more sense:

<http://perfectperiodictable.com/novelty.html>

<http://perfectperiodictable.com/home031909.html>

Btw. anyone know why in this ADOMAH periodic table the hydrogen and helium are
bumped up to next section? It doesn't make any sense to me.

You can grow it further:
<http://en.wikipedia.org/wiki/Extended_periodic_table>

------
lovskogen
If it's all in CSS, how come the graphics looks smudgy like this?
<http://i.imgur.com/iuoUr.png>

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

------
sergiotapia
Using Firefox (latest) this runs extremely slow. I'm talking about 8 frames
per second. I'm also using a decent high range video card.

------
Kilimanjaro
Mr. Doob is god. Yes he is. I admire everything he does.

If anybody should be making a million bucks a year for playing with code, that
should be him.

------
clockwork_189
This looks amazing! This has inspired me to learn more about 3d interfaces in
javascript! Thank you!

------
Pwnguinz
When I first saw the title, I was thinking it was an implementation of the
ADOMAH Periodic Table _. But alas, it was not.

_<http://perfectperiodictable.com/home031909.html>

------
ditoa
Runs painfully slow on my Fx 16.0.2 install on Win7 x64 system :(

------
eta_carinae
three.js is an impressive library but sadly, they still haven't fixed their
busy wait architecture: if you do nothing and just stare at the page, it will
still peg your CPU.

~~~
bd
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.

------
repreprep
Then sometimes, maybe this...

[http://www.serenadawn.com/GITS-
InformationAge_clip_image003....](http://www.serenadawn.com/GITS-
InformationAge_clip_image003.jpg)

------
shoxty
Reminds me of Breaking Bad <http://www.youtube.com/watch?v=AinoCIHHp2M>

------
repreprep
Soon, I think of this...

<http://esellermedia.com/files/2012/08/hacking1.jpg>

------
phragg
This is very nice! love the different displays.

It'd be nice if you could click the element and information would display.

------
buddycasino
Nearly crashed my system by eating up all of the memory (Firefox), runs nice
in Chrome though.

------
shanelja
... That's just... cool. There is no other word for it. That's just really
cool.

------
asher_
This is fantastic looking. Very well done.

Minor nitpick; your spiral is a helix, not a spiral.

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

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

~~~
asher_
"While a "spiral" and a "helix" are distinct as technical terms, a helix is
sometimes described as a spiral in non-technical usage." -
<http://en.wikipedia.org/wiki/Spiral>

They are different, but people who don't know the difference often call
hexixes spirals, as is the case with spiral staircases.

~~~
shardling
I'm fairly certain that the non-technical sense by far predates the more
narrow technical definition. It's all about context, and there was nothing
here that would make helix more correct than spiral.

<http://www.etymonline.com/index.php?term=spiral>

------
doug1001
gorgeous. The 'grid' view that can be rotated along both orthogonal axes is
particularly nice.

had no idea that 'Krypton' is really an element.

------
SEJeff
This looks fantastic on an iPwn 4s. Well done.

------
I_AM_TACO
Too bad Firefox really sucks with it.

------
ddon
Works perfectly well on iPad 3 ios6

------
xutopia
This looks really cool from a geeky standpoint but how are these useful in a
UX way?

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

