investigate rendering electrostatic potential without JSMol

[samreid]

Based on the conclusions in #6 and related to #15, we would like to investigate rendering the isosurfaces without JSMol.

@samreid said

Perhaps when @jonathanolson has some free time, he could help us investigate a webgl implementation for the iso surfaces like the ones in the java version of molecule polarity.

@jonathanolson said:

Presumably the hard part would be actually computing the iso surface. Is there a formula that determines the location, like (...) == constant? How does JMol compute it in the first place?

If there's a formula like above for determining the position of the iso surface, I can look into efficient ways of displaying it. I'd prefer to avoid (personally) trying to figure out that formula.

@samreid said:

According to http://jmol.sourceforge.net/docs/surface/ it looks like we can export the surface geometry.

@jonathanolson said:

Oh, is there a small enumerable list of exact geometries that would be needed? Could save the meshes in that case.

@samreid said:

Here's the isosurface render Java code: https://sourceforge.net/p/jmol/code/HEAD/tree/trunk/Jmol/src/org/jmol/rendersurface/IsosurfaceRenderer.java

[samreid]

Oh, is there a small enumerable list of exact geometries that would be needed? Could save the meshes in that case.

Yes, there are 19 molecules for this (at least in the Java sim).

[samreid]

Building on the demo linked from https://github.com/mikolalysenko/Isosurface/ I added this surface function:

  result[ 'Electrostatic Potential' ] = makeVolume(
    [ [ -10, 10, 0.25 ],
      [ -10, 10, 0.25 ],
      [ -10, 10, 0.25 ] ],
    function( x, y, z ) {
      var charges = [
        { x: -1.8, y: 0, z: 0, q: 2.1 },
        { x: 1.8, y: 0, z: 0, q: 4 }
      ];
      var v = 0;
      for ( var i = 0; i < charges.length; i++ ) {
        var charge = charges[ i ];
        var dx = x - charge.x;
        var dy = y - charge.y;
        var dz = z - charge.z;
        var r = Math.sqrt( dx * dx + dy * dy + dz * dz );
        v = v + charge.q / r;
      }
      return v - 2;
    }
  );

And it produced this isosurface:

We would still need to get the coloring right, but perhaps we are barking up the right tree? My main question is whether everything can be modeled using V=sum(q/r), as long as we get the charges and positions right.

@ariel-phet can you recommend a chemist @jonathanolson and I can chat with about this?

[pixelzoom]

The isosurface must support multiple maps and configurable opacity. We've used 3 of Jmol's color schemes in Molecule Polarity - BW, RWB, ROYGB. Respective screenshots from the Java version of Molecule Polarity below. Switching between RWB and ROYGB is done via the Options menu in the menu bar. Highly recommended to play around with Molecule Polarity.

[pixelzoom]

If you're interested in how Jmol isosurfaces are configured in the Java version of Molecule Polarity, see setSurfaceType in JmolViewerNode.java.

[ariel-phet]

@emily-phet was heavily involved with this simulation and would be the best person to talk to

[samreid]

@emily-phet can you please comment on whether sum(q_i/r_i)=constant is the appropriate equation for modeling the geometry of the isosurface? If not, what is the appropriate equation? Does the sim already include the q values and (x,y,z) coordinates for each atom? If not, where can we look them up? How do we assign colors over the surface for each of the color maps?

[emily-phet]

@samreid Kelly was lead on this, I only consulted. I have no idea how to isosurface was modeled. Perhaps Robert might be able to help out with this.

[pixelzoom]

I don't recall any of us having knowledge about how the isosurface was modeled. I turned on the feature in Jmol, and everyone on the design team said "yes, that's what we expect it to look like".

[samreid]

@ariel-phet how about scheduling a short "design" meeting between you, me, Robert and @jonathanolson?

@pixelzoom are the molecules rendered in scenery currently? In Java, did you embed the molecule within the isosurface (in 3d) or is it just "behind"? I'm trying to figure out if we have to break the geometry into two layer (front and back) and embed the scenery molecule in the middle z-layer.

[pixelzoom]

In the Java version, the entire 3D view (molecules, atoms, atom labels, bonds, surfaces, dipoles, charges) is rendered by Jmol. See JmolViewerNode.

In the JS version, litmus.JSmolViewNode was set up to use the same approach.

[pixelzoom]

In addition to playing with the Java version of Molecule Polarity... Highly recommended to read through JmolViewerNode to see what you're in for. Rendering the isosurface is one of the bigger challenges, but by no means the only issue. Without JSmol, this is going to be a large project.

[samreid]

Will the JS code from screens 1 and 2 be able to render the 3d molecules for screen 3? If not, do we have another plan for how to render the 3d molecules?

[pixelzoom]

No, the atoms in screens 1 & 2 are not appropriate for screen 3. They are simply Circles with a gradient fill. We also need transparency, perspective, z ordering, ...

[samreid]

Here's a list of features for screen 3, from https://github.com/phetsims/molecule-polarity/issues/15#issuecomment-57539678:

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

[pixelzoom]

If you're considering trying to implement the Real Molecules screen by faking the 3D using a 2D scenegraph, I don't think that's a viable option. Seems like a job for WebGL.

[pixelzoom]

Add to list of features:

• 3D lighting • Information related to specific atoms (color, relative size,...) - Jmol handles this • user interaction with a 3D model (rotation)

[samreid]

Without JSmol, this is going to be a large project.

Based on your feedback in https://github.com/phetsims/molecule-polarity/issues/6#issuecomment-55832203 it seems like this will be a large project even with JSMol (and "Plan on throwing this solution away in the future." doesn't sound great to me.)

Should we investigate other open source WebGL chemistry libraries, or have another try getting the licensing figured out?

[jonathanolson]

Most of the described 3D features seem fairly simple (spheres, cylinders, cones, etc., with fairly simple shading). The custom geometry (isosurfaces) seem like the most difficult by far (but can be handled fairly trivially if we can export the geometry).

Is there a type of rendering here that hasn't been done in Molecule Shapes (besides if we need a dynamically generated isosurface?)

[samreid]

@ariel-phet how about scheduling a short "design" meeting between you, me, Robert and @jonathanolson?

Perhaps a better plan would be to schedule a design meeting, including chemists + @jonathanolson @pixelzoom @samreid and @ariel-phet, and decide on the best course of action.

[jonathanolson]

Without JSmol, this is going to be a large project.

Do newer versions of JSMol have the same limitations that caused us to (tentatively) reject it for use?

[samreid]

Licensing limitations of JSMol are reported here: https://github.com/phetsims/special-ops/issues/63

 and are for a recent version. I wouldn't mind a 2nd opinion on the matter, if you want to take a closer look.

I'm not sure what version @pixelzoom was referring to in this list of technical limitations: https://github.com/phetsims/molecule-polarity/issues/6#issuecomment-55832203

[jonathanolson]

Just reviewed the technical limitations again (thanks), and I'd prefer to look into non-JSMol solutions.

Perhaps a better plan would be to schedule a design meeting, including chemists + @jonathanolson @pixelzoom @samreid and @ariel-phet, and decide on the best course of action.

Sounds helpful to me.

[ariel-phet]

@samreid @pixelzoom @jonathanolson agreed a design meeting would be good, but we will defer until @pixelzoom is finished with a few current sims (unit rates, function basics, graphing slope intercept). As well as good for JO to finish a few current sims before any serious investigation here.

[pixelzoom]

Yeah, I think it would be a good idea if I was in on this design meeting.

[pixelzoom]

@samreid said:

Based on your feedback in #6 (comment) it seems like this will be a large project even with JSMol (and "Plan on throwing this solution away in the future." doesn't sound great to me.)

Not so. I had this pretty much working with JSmol, as a direct port from Java. The main snags were (a) licensing and (b) packaging.

[samreid]

If the only remaining obstacles are licensing and packaging, perhaps we can figure out solutions to those problems. Is there a requirejs version where I can test this? Has in been past our QA team to make sure there are no other technical hurdles? Does it have canvas fallback etc? (not sure if it needs one).

[jonathanolson]

Is there a requirejs version where I can test this?

IIRC, see https://github.com/phetsims/litmus and get jsmol checked out under the relevant directory. I believe lint-everything will complain (so I removed my local copy a few months back). May need to grab old SHAs.

perhaps we can figure out solutions to those problems.

I recall things being fairly hard-coded to load from separate files. Would need to do surgery and fork JSMol to resolve the packaging. Presumably otherwise we'd need to patch all of our build-tools, phet-apps and website to deal specifically with the sim (I don't want to do that).

[pixelzoom]

litmus worked at one time, but has likely gotten crusty over time - I believe it was removed from active-repos some time ago.

[July 2107 update: litmus repo was deleted, JSmolViewerNode was moved to molecule-polarity.]

[pixelzoom]

@kathy-phet @ariel-phet @jonathanolson

At 10/25/19 status meeting, I was asked whether we have the model information needed for an isosurface. The answer is yes. Each molecule has a mol2 description (a common chemistry file format) of its structure and properties. See mol2Data.js. mol2 data is the model, the isosurface is the view (the visual representation of that model).

An isosurface is a 3D volume wrapped around the molecule's structure. The color of points on the surface are determined by 4 things: a property of interest (e.g. electrostatic potential, electron density); how the atoms closest to the surface relate to the property of interest; a color palette (e.g. RWB, ROYGBV); a mapping of property values to color values.

In the Java version, the Jmol viewer handled reading and interpreting the mol2 data, and generating the corresponding isosurface based on the color palette and property of interest. We will need to handle all of that ourselves in the HTML5 version.