implement 3D molecule viewer for "Real Molecules" screen

[pixelzoom]

As noted in #6... We punted on JSmol. Either identify some other 3rd-party library that meets the needs of Molecule Polarity (and future chem sims?) or develop a custom library. If developing a custom library, it probably makes the most sense to grow what is being done by @jonathanolson for Molecule Shapes.

[pixelzoom]

ChemDoodle looks interesting: http://web.chemdoodle.com.

License is GPL, but they say "Contact us for alternate licensing options."
http://web.chemdoodle.com/installation/license.

[pixelzoom]

Requirements, based on Java/Jmol implementation:

• atoms
• bonds
• ball-and-stick
• bond dipoles
• molecular dipole
• partial charges
• electrostatic-potential isosurface (red-white-blue and rainbow color schemes)
• electron-density isosurface
• custom colors for atoms, bonds, dipoles, surfaces
• transparency for atoms, bonds, surfaces
• customization of dipoles (arrow size, tail size, scale, position)

[pixelzoom]

@jonathanolson What is the status of the 3D molecule code in Molecule Shapes? Is there anything general, or anything that we could start generalizing to meet the needs of Molecule Polarity?

[jonathanolson]

It's in a state where we could move our Three.js-related code to another shared repo, and hopefully meet the needs of Molecule Polarity.

It would be helpful to have a call sometime to discuss the current state and setup in Molecule Shapes.

[pixelzoom]

OK, not high priority. But it's been ~3 months since we punted on JSmol, and Molecule Polarity is otherwise complete. So it would be nice to get back to this at some point so that we have another sim to publish.

[pixelzoom]

Dev meeting 5/7/2015 note: The chemistry design team should start chipping away at requirements for a general molecule viewer. @ariel-phet suggested that Amy H. might take this on when she joins the team. Assigning to @ariel-phet to follow up.

[pixelzoom]

In phetsims/tasks#354 (comment), @ariel-phet said this regarding porting of Java sims:

@pixelzoom - more and more it seems Molecule Polarity will be the right one to attack next. Perhaps we should discuss at developer meeting. Seems like it would be good to coordinate this port with @jonathanolson working on Build a Molecule so that we can make nice progress on a 3d molecule viewer.

[jonathanolson]

Current 3D status:

• Build a Molecule: Current 3D view drawn in Canvas. Fun computations to determine exact elliptical shapes of each atom when drawn. Will need CAG or ellipticalArc-ellipticalArc intersections to fully support three atoms intersecting each other. Not suitable for many of the Molecule Polarity views.
• Molecule Shapes: Uses three.js, and many patterns that would be extracted to common code if used for Molecule Polarity. Should be able to handle most uses. Would be good to discuss drawbacks and advantages with @pixelzoom to determine whether it's suitable.

[pixelzoom]

There is currently no deadline for Molecule Polarity.

@ariel-phet said to assign this to @amyh-phet to define what features we may need for a 3D molecule library.

[ariel-phet]

@amyh-phet you and I should discuss a bit...but basically you will want to review all chemistry sims to see which ones use a 3d molecule viewer (definitely molecule shapes and build a molecule).

@pixelzoom made a pretty good list above of what requirements we had in Java. Ideally we want to anticipate as many features a possible. It would be good to have a list that is sort of "essential" "would be nice" and "wish list"

[amyh-phet]

@ariel-phet just let me know when you want to meet

@pixelzoom thanks for compiling the list of requirements in the Java sims

[amyh-phet]

@ariel-phet @pixelzoom

General requirements for molecule viewer:

Essential features:
• atoms
• bonds
• ball-and-stick
• space filling model
• bond dipoles
• molecular dipole
• partial charges
• electrostatic-potential isosurface (red-white-blue and rainbow color schemes)
• electron-density isosurface
• custom colors for atoms, bonds, dipoles, surfaces
• transparency for atoms, bonds, surfaces
• customization of dipoles (arrow size, tail size, scale, position)

Would be nice:
• structural formula (including lone electron pairs)

Wish-list:
• hybrid orbitals

[samreid]

Here's a MIT-licensed chemistry viewer which says there is also (under development?) support for electron density maps:
http://webglmol.osdn.jp/index-en.html

It probably wouldn't be "easy" but some things tricky in JMol may be easier here. Also, do we need to provide fallback support for canvas? Or OK to require webgl for this part? (May be a question for @ariel-phet).

[samreid]

Speck looks pretty nice:

And the three.js example does some things great! Probably has canvas fallback as well:

If we feel like it must look "exactly like" the Java one, then we should probably figure out JSMol licensing and technical issues. But I think part of the reason it was designed the way it was is because it was easy to do in JMol.

[samreid]

https://github.com/3dmol/3Dmol.js supports many of the features we need, including volume data.

[jonathanolson]

supports many of the features we need

Presumably a third-party solution would need to support all the features?

Due to the general PhET desire to be able to customize/change appearance, or add in features (like bond angle displays for Molecule Shapes), I would assume that either a phet-specific solution should be implemented, OR we would need to easily be able to change or add things in the display.

A library built on top of three.js (which essentially gives us a three.js node with the display) that supports most of what we need (and could be forked easily) would be ideal (as we could add in custom 3d components/surfaces/etc. around it).

[samreid]

Also, three.js provides the desirable feature that it provides a canvas fallback for many cases.

[pixelzoom]

I moved the discussion (and all related comments) about whether to publish without the Real Molecules screen to #27.

[pixelzoom]

@kathy-phet asked me via Slack:

• An estimate for 3rd screen of Molecule Polarity (if JO has now done the necessary work to support it?)

The Real Molecules screen is partially implemented, run with ?realMolecules to see what's been done. The part that's not done in the 3D molecule viewer, the subject of this issue. Requirements for the viewer are listed in #15 (comment). Based on @kathy-phet's question, it sounds like she is expecting that @jonathanolson is doing the work required to support those requirements.

It's also not clear to me what "the necessary work to support it" is. Is that the low-level 3D support? Or a library of 3D objects for chem sims like Molecule Polarity?

@jonathanolson What is the status?

[jonathanolson]

Current status for 3D work: fully supported and proven inDensity/Buoyancy as major elements (using three.js and the mobius common repo), seems browser-tested and code style works. phet-io seems best supported for the view by adding visibleProperty/inputEnabledProperty to model elements.

So it would be best to coordinate with me, but you essentially create the view in three.js using ThreeNode or ThreeIsometricNode (depending on the resize/zoom/etc. settings needed), add three.js content in the normal scene-graph manner (subtyping works, I've been using the View suffix since they aren't Nodes), and hook up update/layout items as needed.

Again as noted, I don't know how to compute certain 3D forms that would be required for molecules, but it's possible to construct any 3D form once you know the coordinates (and I can consult).

[jonathanolson]

Build a Molecule also uses this approach (using mobius/three.js) for its molecule view.

[jonathanolson]

To clarify: we should be able to display things in 3D, that code exists. The code to determine "where/what should be displayed" based on the chemistry is a design/code part that does not exist to my knowledge yet, and would have to be done.

[pixelzoom]

@kathy-phet If you'd like this to proceed, it sounds like we need a design meeting. I can't give an estimate because I don't know who is building the primitives (molecules, bonds, dipoles, surfaces, etc.) needed by Molecule Polarity. If I have to build those from three.js primitives, that's going to be a much larger estimate than if (for example) @jonathanolson is creating a library of 3D chemistry components that I can reuse.