Opened 3 years ago

Closed 6 weeks ago

Last modified 5 weeks ago

#22408 closed enhancement (fixed)

Make threejs / three.js the default 3d viewer instead of jmol

Reported by: egourgoulhon Owned by: embray
Priority: major Milestone: sage-9.0
Component: graphics Keywords: 3D, plot3d, threejs, three.js, jmol
Cc: paulmasson, novoselt, tmonteil, kcrisman, slelievre, was, embray, infinity0, fbissey, egourgoulhon, strogdon, gh-timokau, jipilab Merged in:
Authors: Paul Masson, Eric Gourgoulhon Reviewers: Dima Pasechnik
Report Upstream: N/A Work issues:
Branch: fcac479 (Commits) Commit:
Dependencies: Stopgaps:

Description (last modified by egourgoulhon)

Now that #22389 (Make Three.js work offline) and #22261 (Three.js: Default lighting) have been merged, it is time to make threejs the default 3d viewer, in replacement of jmol.

A discussion about this started in #22389. In addition, one may note the following:

pros:

  • three.js offers functionality absent in Jmol, notably axis labels
  • three.js works better with Jupyter than Jmol, see e.g. this report)
  • Jmol is a nightmare for packagers (for Debian, Windows, ...), see e.g. this discussion on debian-science-sagemath; in particular jsmol, which is invoked in Jupyter notebooks, is not packaged for Debian (see comment:49)
  • Jmol, as currently shipped with Sage, is broken with recent version of Java runtime environment, e.g. on Debian Buster and Ubuntu 18.04, see this ask.sagemath question

cons:

  • some features are still missing in three.js, like
    • converting the view to a png image in non-interactive mode (e.g. when generating the reference manual, cf. comment:66); NB: thanks to #27910 (merged in Sage 8.8.rc0), the png conversion is now possible in interactive mode; see this discussion
    • mesh plots ==> fixed by #28343 (merged in Sage 8.9.beta8)
    • vector field plots ==> fixed by #27932 (merged in Sage 8.9.beta0)
  • three.js has some issues:
    • faces of polytopes look rounded ==> fixed by #27836 (merged in Sage 8.8.beta7)
    • some opacity issues: cf. comment:75 and below

Attachments (2)

2018-08-29.png (36.6 KB) - added by embray 15 months ago.
dodecahedron_threejs.png (46.2 KB) - added by egourgoulhon 15 months ago.

Download all attachments as: .zip

Change History (104)

comment:1 Changed 3 years ago by paulmasson

  • Branch set to u/paulmasson/22408

comment:2 Changed 3 years ago by paulmasson

  • Commit set to 93b0b0e293645b46f409c3514df70d337b16a88e

For future reference, this simple alteration is all that is needed to change the default, but no rush about it. After #22389 the viewer does not work locally in notebooks: must fix!


New commits:

93b0b0eChange default

comment:3 follow-ups: Changed 3 years ago by novoselt

What do you mean it does not work locally anymore??? It did for me...

As for the default change, I move that this happens in 8.0 together with the change in default notebook (perhaps add this as a dependence?). Users will be so shocked, that they won't even notice ;-)

comment:4 in reply to: ↑ 3 Changed 3 years ago by egourgoulhon

  • Milestone changed from sage-7.6 to sage-8.0

Replying to novoselt:

As for the default change, I move that this happens in 8.0 together with the change in default notebook (perhaps add this as a dependence?).

+1

comment:5 in reply to: ↑ 3 ; follow-up: Changed 3 years ago by egourgoulhon

Replying to novoselt:

What do you mean it does not work locally anymore??? It did for me...

It does not for me in Sage 7.6.beta5, as reported in https://groups.google.com/d/msg/sage-release/jftcaPjaniM/KMiw3ZOXDAAJ

Paul, is it the issue that you mentioned in comment:2 ?

comment:6 in reply to: ↑ 5 ; follow-up: Changed 3 years ago by paulmasson

Replying to egourgoulhon:

Replying to novoselt:

What do you mean it does not work locally anymore??? It did for me...

It does not for me in Sage 7.6.beta5, as reported in https://groups.google.com/d/msg/sage-release/jftcaPjaniM/KMiw3ZOXDAAJ

Paul, is it the issue that you mentioned in comment:2 ?

Yup. I tested #22389 at the command line and neglected to test it in the notebooks. When a browser window is opened from the command line, it has access to the local file system to find the JavaScript files. The notebooks by contrast are sitting on a local web server that does not have the same access to the file system, so the JavaScript cannot be loaded.

The fix is to use the current display manager to determine if the rendered file will be viewed from a local web server or not and modify the script tags accordingly. Then I need to figure out how to add the local Three.js as notebook extensions as was done for JSmol.

comment:7 in reply to: ↑ 6 Changed 3 years ago by egourgoulhon

Replying to paulmasson:

Yup. I tested #22389 at the command line and neglected to test it in the notebooks. When a browser window is opened from the command line, it has access to the local file system to find the JavaScript files. The notebooks by contrast are sitting on a local web server that does not have the same access to the file system, so the JavaScript cannot be loaded.

The fix is to use the current display manager to determine if the rendered file will be viewed from a local web server or not and modify the script tags accordingly. Then I need to figure out how to add the local Three.js as notebook extensions as was done for JSmol.

Thanks for these explanations.

comment:8 follow-up: Changed 3 years ago by infinity0

After applying this patch I get many errors in the dochtml build:

Traceback (most recent call last):
  File "/usr/lib/python2.7/dist-packages/matplotlib/sphinxext/plot_directive.py", line 520, in run_code
    six.exec_(code, ns)
  File "/usr/lib/python2.7/dist-packages/six.py", line 699, in exec_
    exec("""exec _code_ in _globs_, _locs_""")
  File "<string>", line 1, in <module>
  File "<string>", line 3, in <module>
  File "<string>", line 8, in sphinx_plot
  File "sage/plot/plot3d/base.pyx", line 1631, in sage.plot.plot3d.base.Graphics3d.save (/build/sagemath-7JFEEo/sagemath-7.5.1/sage/src/build/cythonized/sage/plot/plot3d/base.c:21954)
    self.save_image(filename, **kwds)
  File "sage/plot/plot3d/base.pyx", line 1560, in sage.plot.plot3d.base.Graphics3d.save_image (/build/sagemath-7JFEEo/sagemath-7.5.1/sage/src/build/cythonized/sage/plot/plot3d/base.c:21425)
    self._save_image_png(filename, **kwds)
  File "sage/plot/plot3d/base.pyx", line 1527, in sage.plot.plot3d.base.Graphics3d._save_image_png (/build/sagemath-7JFEEo/sagemath-7.5.1/sage/src/build/cythonized/sage/plot/plot3d/base.c:21074)
    raise ValueError('cannot use viewer={0} to render image'.format(viewer))
ValueError: cannot use viewer=threejs to render image
/build/sagemath-7JFEEo/sagemath-7.5.1/sage/src/doc/en/reference/manifolds/sage/manifolds/chart.rst:1987: WARNING: Exception occurred in plotting chart-11
 from /build/sagemath-7JFEEo/sagemath-7.5.1/sage/src/doc/en/reference/manifolds/sage/manifolds/chart.rst:

Looking at the source code, it does seem indeed that Graphics3d._save_image_png does not support threejs output. Either the docbuild needs to use jmol by default, or threejs could be made to save png output.

(In Debian we explicitly fail the build if the dochtml.log contains "Error". We have to do this because the builder doesn't fail by itself. At this point I'm not sure if this is a Sage bug that also needs to be filed separately, because we patch the Sage dochtml build quite heavily to avoid segfaults and OOM, and I'm unsure if this interferes with any fail-on-error semantics that should be in there.)

Last edited 3 years ago by infinity0 (previous) (diff)

comment:9 in reply to: ↑ 8 Changed 3 years ago by egourgoulhon

Replying to infinity0:

Looking at the source code, it does seem indeed that Graphics3d._save_image_png does not support threejs output.

Indeed, this is listed in the 'cons' section of the ticket description.

comment:10 Changed 3 years ago by strogdon

Perhaps a corner case and perhaps not important but if I from a local machine (A) ssh (ssh -Y) to remote machine (B) where Sage is installed and then try to display graphics stuff (show(sphere(), viewer='threejs') on the display for local machine (A); say from sagenb, then the threejs viewer fails. In the JS console I see

THREE.WebGLRenderer 80
THREE.WebGLRenderer: Error creating WebGL context.

and nothing is displayed. Nothing is similarly displayed from the command line or jupyter notebook. The jmol viewer does work. Of course, one could always install Sage on the local machine (A) and get things to work.

comment:11 Changed 2 years ago by egourgoulhon

Paul, may I ask about any possible update on this, in particular regarding the cons listed in the ticket description? It would be so nice to have Three.js as the default viewer instead of Jmol!

comment:12 Changed 2 years ago by egourgoulhon

  • Description modified (diff)

comment:13 follow-ups: Changed 2 years ago by paulmasson

Eric, my main interest in adding Three.js to SageMath was so that I could see it in action in SageMathCell, which for a time I used on my website. There was unfortunately a rather unpleasant conversation earlier this year, the upshot of which was that I was only welcome to use SageMathCell if I did so precisely like everyone else. Not my style.

My response was to write a small library to replicate SageMath interacts in pure JavaScript for embedding in web pages, which is what I now use exclusively on my website. The only other part of SageMath I really used was mpmath for its special functions, so I am developing a second library to provide special functions in pure JavaScript as I need them.

Since I am no longer using SageMath, I have little inclination to work any further on the Three.js backend. That is not to say I never will again, but it is not a priority for me at this time. And if I choose to contribute further I would focus on features useful to the browser experience, not those oriented towards printing, so Three.js is unlikely to replace Jmol if there is no one else interested in developing those features.

comment:14 in reply to: ↑ 13 ; follow-up: Changed 2 years ago by kcrisman

Thanks for this reply, it is very informative about the current status.

Eric, my main interest in adding Three.js to SageMath was so that I could see it in action in SageMathCell, which for a time I used on my website. There was unfortunately a rather unpleasant conversation earlier this year, the upshot of which was that I was only welcome to use SageMathCell if I did so precisely like everyone else. Not my style.

For context, the issue was that running a bunch of cells automatically uses nontrivial amounts of computer resources, which costs money.

My response was to write a small library to replicate SageMath interacts in pure JavaScript for embedding in web pages, which is what I now use exclusively on my website.

That is a great idea - is it completely new code, or based on the Sagecell, or something else? If you don't need the heavy lifting of everything in Sage, this probably does make sense for you, and hopefully others can use it as well.

The only other part of SageMath I really used was mpmath for its special functions, so I am developing a second library to provide special functions in pure JavaScript as I need them.

Is there no other math library in JS? Seems like a lot of work to do correctly.

so Three.js is unlikely to replace Jmol if there is no one else interested in developing those features.

Thanks for the update, that is very helpful to assess the feasibility of this. Maybe it might end up as a summer student project sometime; if so, would you be willing to provide some feedback?

comment:15 in reply to: ↑ 13 Changed 2 years ago by egourgoulhon

Replying to paulmasson:

Thanks your detailed answer.

Since I am no longer using SageMath, I have little inclination to work any further on the Three.js backend. That is not to say I never will again, but it is not a priority for me at this time.

I really hope you'll be back in the near future. IMHO, you did such a great job in introducing Three.js in Sage and it would a pity if we remain with such a low quality (or at least unfitted for mathematical graphics) tool as Jmol.

And if I choose to contribute further I would focus on features useful to the browser experience, not those oriented towards printing, so Three.js is unlikely to replace Jmol if there is no one else interested in developing those features.

Yes I understand this. Printing output is a minor feature as compared with interactive display in the browser, but it seems required in at least two cases:

comment:16 in reply to: ↑ 14 Changed 2 years ago by paulmasson

Replying to kcrisman:

My response was to write a small library to replicate SageMath interacts in pure JavaScript for embedding in web pages, which is what I now use exclusively on my website.

That is a great idea - is it completely new code, or based on the Sagecell, or something else? If you don't need the heavy lifting of everything in Sage, this probably does make sense for you, and hopefully others can use it as well.

It is completely my own new open-source code, including an improved version of the Three.js template I wrote for here. It does require some knowledge of JavaScript to use, so it is perhaps not as simple as embedding a SageMathCell. It is really intended to replace the defunct Mathemtatica CDF plugin. Anyone who can write a Mathematica Manipulate will understand how to use my code. And because it works entirely in the browser, there are no server-side delivery lags or hosting issues.

The only other part of SageMath I really used was mpmath for its special functions, so I am developing a second library to provide special functions in pure JavaScript as I need them.

Is there no other math library in JS? Seems like a lot of work to do correctly.

There is one library with complex-valued special functions called Jmat, but it has an explicit caveat as to the accuracy of the code. It is also undocumented and not actively developed. The only other library I know that comes close is a transpilation of the GNU scientific library, but that does not support complex numbers and transpiling produces bloated code. One would expect Math.js to include special functions, but it only has the gamma and error functions, which are the simplest to implement.

comment:17 Changed 2 years ago by tmonteil

Note that giac (which is a standard package of Sage), was compiled into javascript with emscripten compiler, there might be interesting features to use from there.

comment:18 Changed 2 years ago by egourgoulhon

See this ask.sagemath question posted today for some example of limitation of Jmol:

https://ask.sagemath.org/question/39903/right-click-options-not-showing-up-for-jsmol/

comment:19 Changed 2 years ago by infinity0

We don't have emscripten in Debian because it uses a fork of LLVM, so until this situation is resolved we wouldn't be able to take advantage of a giac-emscripten viewer. Similarly JSMol isn't available in Debian because its JS tooling can't be packaged.

Neither giac nor jmol have very good code anyways, so I'd recommend against using them independently of the above packaging issues.

comment:20 Changed 2 years ago by fbissey

I have made a binary package for jmol/jsmol in sage-on-gentoo. I am fed up with jmol and just want it to go, to be honest.

comment:21 Changed 18 months ago by slelievre

  • Cc slelievre was added
  • Milestone changed from sage-8.0 to sage-8.3

There is a corresponding CoCalc issue:

  • CoCalc issue 1963: make viewer='threejs' be the default for 3d plots in jupyter notebooks with sage

https://github.com/sagemathinc/cocalc/issues/1963

comment:22 Changed 16 months ago by slelievre

  • Cc embray infinity0 added
  • Description modified (diff)
  • Keywords 3D plot3d threejs three.js added

comment:23 Changed 16 months ago by slelievre

  • Description modified (diff)
  • Summary changed from Make three.js the default 3d viewer to Make threejs / three.js the default 3d viewer instead of jmol

comment:24 Changed 16 months ago by slelievre

  • Cc fbissey arojas egourgoulhon strogdon added
  • Keywords jmol added

comment:25 Changed 16 months ago by gh-timokau

  • Cc gh-timokau added

comment:26 Changed 16 months ago by vdelecroix

  • Milestone changed from sage-8.3 to sage-8.4

update milestone 8.3 -> 8.4

comment:27 follow-up: Changed 15 months ago by embray

  • Owner changed from (none) to embray

Since the OP of this ticket appears to have flamed out I'll take this over. It appears there are a few other code updates necessary to use threejs in a few areas.

comment:28 follow-up: Changed 15 months ago by embray

For 3D graphics in the static documentation I don't know why we don't just use something like matplotlib. It outputs very nice 3D graphics these days. I can write the necessary adapters...

comment:29 in reply to: ↑ 27 ; follow-up: Changed 15 months ago by egourgoulhon

Replying to embray:

Since the OP of this ticket appears to have flamed out I'll take this over.

This is very good! Many thanks!

comment:30 in reply to: ↑ 28 ; follow-up: Changed 15 months ago by egourgoulhon

Replying to embray:

For 3D graphics in the static documentation I don't know why we don't just use something like matplotlib. It outputs very nice 3D graphics these days.

Indeed.

I can write the necessary adapters...

This would be nice! Moreover, why not using them not only for the documentation, but for any static display (as we already have with tachyon), by offering a new option: viewer='matplotlib' ?

Besides, one may note that 3D plots in the documentation do not have to be static: an example of (interactive) three.js rendering is at http://doc.sagemath.org/html/en/reference/plot3d/threejs.html So, as soon as threejs becomes the default, we could use those (except probably for pdf documentation).

comment:31 in reply to: ↑ 29 ; follow-up: Changed 15 months ago by was

Replying to egourgoulhon:

Replying to embray:

Since the OP of this ticket appears to have flamed out I'll take this over.

This is very good! Many thanks!

I might be able to help a little (I'll keep an eye on this), since I wrote a similar threejs renderer for Sage worksheets, so I have some three.js experience. Also, users of Jupyter notebooks in CoCalc? frequently complain when they use Jmol, due to the slow load time or lack of Java support in their browser, so switching to threejs in Jupyter would make CoCalcers? happier.

comment:32 in reply to: ↑ 31 Changed 15 months ago by tmonteil

Replying to was: [...]

Also, users of Jupyter notebooks in CoCalc? frequently complain when they use Jmol, due to the slow load time or lack of Java support in their browser, so switching to threejs in Jupyter would make CoCalcers? happier.

At least with Sage's Jupyter notebook they only need javascript support, because jSmol is used.

comment:33 Changed 15 months ago by tmonteil

Imho, the switch to threejs still requires quite a lot of work to render objects properly, i tried with polytopes, see:

d = dodecahedron()
d.show(viewer='threejs')

The polytope looks rounded.

Last edited 15 months ago by tmonteil (previous) (diff)

comment:34 Changed 15 months ago by tmonteil

  • Description modified (diff)

Changed 15 months ago by embray

comment:35 follow-up: Changed 15 months ago by embray

That might be browser or system related or something. It looks fine to me: I tried it on Chrome, Firefox, and Edge--all fine.

comment:36 Changed 15 months ago by was

some features are still missing in three.js

For what it is worth, I think the version in Sage worksheets in CoCalc? has all of these things that are missing... https://github.com/sagemathinc/cocalc/blob/master/src/smc-webapp/sagews/3d.coffee

To try it, open a cocalc Sage worksheet, then show 3d plots, but don't do (viewer='threejs'), since that will actually break it in Sage worksheets. E.g., just do

dodecahedron(mesh=2, color='green', opacity=.7)

When the mouse moves outside any plot it is replaced by a static png image. This is absolutely CRITICAL since otherwise if there are more than about 10 plots on the page, things break in subtle ways (at least that was the case when I developed this). If Jupyter Sage doesn't do this, then that's a problem.

To see that printing works, click any of the print buttons in the top right. It even should work with print to pdf, which grabs those png's mentioned above, sends them to the backend project, and embeds them in the latex document...

Last edited 15 months ago by embray (previous) (diff)

comment:37 Changed 15 months ago by was

Also possibly relevant: when we were writing this 3d rendering for cocalc, at some point Andrew Ohana (a student of mine at the time) put a fork of the code on github as a standalone project: https://github.com/ohanar/math3d.js

Changed 15 months ago by egourgoulhon

comment:38 in reply to: ↑ 35 Changed 15 months ago by egourgoulhon

Replying to embray:

That might be browser or system related or something. It looks fine to me: I tried it on Chrome, Firefox, and Edge--all fine.

On my side, I confirm the issue reported in comment:33: This is with Sage 8.4.beta2 + Firefox running on Ubuntu 18.04.1.

comment:39 Changed 15 months ago by arojas

  • Cc arojas removed

comment:40 Changed 15 months ago by embray

Then maybe this is a bug with WebGL on Linux, or at least a difference in defaults w.r.t. shading and norms interpolation. Do you know if your Firefox is using ANGLE? There's a setting under about:config for webgl.disable-angle.

comment:41 Changed 15 months ago by embray

Scratch that, I'm getting the same thing now too. Previously I was running Sage 8.3. So actually maybe something changed between Sage versions.

Update: Okay, really weird. I recently uninstalled and reinstalled Sage 8.3 on Windows (since I was testing a new version of the installer) and now my 8.3 has the same problem, whereas previously it did not. How strange.

I wish I still had my previous example open but it appears not.

Last edited 15 months ago by embray (previous) (diff)

comment:42 follow-up: Changed 15 months ago by embray

Adding shading: THREE.FlatShading to the polyhedron's material fixes it. I am still mystified as to why this worked for me earlier and then didn't.

comment:43 in reply to: ↑ 42 Changed 14 months ago by dimpase

Replying to embray:

Adding shading: THREE.FlatShading to the polyhedron's material fixes it. I am still mystified as to why this worked for me earlier and then didn't.

Given a moving target called "modern web browser", this is not surprising.

comment:44 follow-up: Changed 14 months ago by embray

It's entirely possible there was something messed up with my browser's GPU interface that for a moment it wasn't computing vertex normals, which would result in exactly this sort of flat shading??

Anyways, it's an easy patch to make. I've been meaning to get around to it soon. Once that's fixed is there any other reason not to make threejs the default 3D viewer?

comment:45 in reply to: ↑ 44 ; follow-up: Changed 14 months ago by egourgoulhon

Replying to embray:

Anyways, it's an easy patch to make. I've been meaning to get around to it soon.

Very good!

Once that's fixed is there any other reason not to make threejs the default 3D viewer?

See the first three items in the "cons" list in the ticket description.

comment:46 in reply to: ↑ 45 Changed 14 months ago by egourgoulhon

Replying to egourgoulhon:

See the first three items in the "cons" list in the ticket description.

The first of them means that

sage: g = sphere()
sage: g.save("sphere.png")

produces a png file depicting the Jmol initial view, while we have at the moment

sage: g = sphere(viewer='threejs')
sage: g  # OK: opens a threejs window in the browser
Launched html viewer for Graphics3d Object
sage: g.save("sphere.png")
...
ValueError: cannot use viewer=threejs to render image

comment:47 Changed 13 months ago by embray

  • Milestone changed from sage-8.4 to sage-8.5

comment:48 Changed 11 months ago by embray

  • Milestone changed from sage-8.5 to sage-8.7

Retargeting some of my tickets.

comment:49 Changed 10 months ago by thansen

In Debian we don't have jsmol so attempting 3D plotting in the notebooks just gives a message saying that one should use viewer='threejs'. Setting the default 3D viewer to threejs leads to a failing docbuild because of the missing png capability of threejs. Is there some workaround we could apply to fix 3D plotting in the notebooks in Debian? For example to use jmol on the command line and threejs in the notebooks by default?

comment:50 Changed 10 months ago by egourgoulhon

  • Description modified (diff)

comment:51 Changed 10 months ago by egourgoulhon

  • Description modified (diff)

comment:52 Changed 9 months ago by egourgoulhon

This is to point out that, in the current implementation, it is necessary to add the option online=True to viewer='threejs' to have three.js rendering in Jupyter notebooks on CoCalc, mybinder.org and nbviewer.jupyter.org. See the related discussion on sage-devel.

comment:53 Changed 9 months ago by embray

I know that with the Jupyter kernel it is possible for the kernel to serve files at a specific URL, though I don't know exactly how the mechanism works. We do this, for example, to serve the Sage HTML docs via the Jupyter kernel. We should do the same for any JavaScript files required for threejs, or any other widgets. That, I think, would solve the "online=True" debate. (In other words, properly implemented, it would mean we can use online=False, but the relative paths for the scripts would still be correct, even when run from binder, etc.)

comment:54 Changed 8 months ago by embray

  • Milestone changed from sage-8.7 to sage-pending

Removing most of the rest of my open tickets out of the 8.7 milestone, which should be closed.

comment:55 follow-up: Changed 8 months ago by embray

Please see #27592 for a bit of preliminary cleanup of the threejs rendering I would like to do.

I am still trying to find a solution for the issue mentioned in this ticket of rendering polyhedrons. As I mentioned in comment:42 the solution from the ThreeJS perspective is easy. But it's not clear to me how to pass something like a 'shading' option around Sage's plot3d framework in a generic manner that makes sense, or how this problem is handled by the other 3D renderers. If anyone with more experience with this codebase has any ideas I'd appreciate to hear them.

(I know there is a Texture object, but I'm not really sure how it's used. It doesn't have threejs support yet either, apparently, though I could probably add that.)

Last edited 8 months ago by embray (previous) (diff)

comment:56 Changed 6 months ago by egourgoulhon

  • Description modified (diff)

comment:57 Changed 5 months ago by egourgoulhon

  • Description modified (diff)

comment:58 Changed 3 months ago by egourgoulhon

  • Description modified (diff)

comment:59 in reply to: ↑ 55 Changed 3 months ago by embray

Replying to embray:

Please see #27592 for a bit of preliminary cleanup of the threejs rendering I would like to do.

I am still trying to find a solution for the issue mentioned in this ticket of rendering polyhedrons. As I mentioned in comment:42 the solution from the ThreeJS perspective is easy. But it's not clear to me how to pass something like a 'shading' option around Sage's plot3d framework in a generic manner that makes sense, or how this problem is handled by the other 3D renderers. If anyone with more experience with this codebase has any ideas I'd appreciate to hear them.

(I know there is a Texture object, but I'm not really sure how it's used. It doesn't have threejs support yet either, apparently, though I could probably add that.)

Oh, I hadn't seen that ticket before, but this was fixed already by #27836. Nice!

comment:60 follow-up: Changed 3 months ago by embray

Do we know of any other major blockers to throwing the switch on this?

comment:61 Changed 3 months ago by egourgoulhon

  • Description modified (diff)

comment:62 in reply to: ↑ 60 Changed 3 months ago by egourgoulhon

Replying to embray:

Do we know of any other major blockers to throwing the switch on this?

Not from my side, all the more that the last remaining "con", namely mesh plots, is being handled in #28343.

comment:63 in reply to: ↑ 30 Changed 3 months ago by paulmasson

Replying to egourgoulhon:

Replying to embray:

For 3D graphics in the static documentation I don't know why we don't just use something like matplotlib. It outputs very nice 3D graphics these days.

Indeed.

I can write the necessary adapters...

This would be nice! Moreover, why not using them not only for the documentation, but for any static display (as we already have with tachyon), by offering a new option: viewer='matplotlib' ?

3D plots in the documentation remain to be addressed. This new viewer sounds like a great idea.

comment:64 follow-up: Changed 3 months ago by embray

I might be missing your point, but I don't think changing the default viewer to threejs is really related to how plots in the documentation are generated. It would still be nice to improve them, but that's a separate issue.

comment:65 in reply to: ↑ 64 ; follow-up: Changed 3 months ago by paulmasson

Replying to embray:

I might be missing your point, but I don't think changing the default viewer to threejs is really related to how plots in the documentation are generated. It would still be nice to improve them, but that's a separate issue.

docbuild currently uses the default viewer. There are multiple comments on this ticket indicating errors when Three.js is set to the default.

comment:66 in reply to: ↑ 65 Changed 3 months ago by egourgoulhon

Replying to paulmasson:

Replying to embray:

I might be missing your point, but I don't think changing the default viewer to threejs is really related to how plots in the documentation are generated. It would still be nice to improve them, but that's a separate issue.

docbuild currently uses the default viewer. There are multiple comments on this ticket indicating errors when Three.js is set to the default.

It would suffice to make the following change to the code of sphinx_plot, in line 75 of src/sage/docs/conf.py:

-     graphics.save(fn)
+     graphics.save(fn, viewer='jmol')

to have all the documentation generated with Jmol, as it is currently. Of course the drawback is that the figures in the documentation will have an aspect different from what the user will get with threejs as the default. But maybe this is something we can live on at the moment...

comment:67 Changed 3 months ago by egourgoulhon

  • Description modified (diff)

comment:68 Changed 2 months ago by egourgoulhon

  • Description modified (diff)

comment:69 follow-up: Changed 2 months ago by charpent

In answer to comments to y answer to this ask.sagemath question: threejs still has problems handling transparencies and hidden-facets problems:

Test case: try to plot a plane and a paraboloid:

sage: P1=plot3d(lambda x,y:x^2+y^2,(-2,2),(-2,2), color="blue", opacity=0.5)
sage: P2=plot3d(lambda x,y:1,(-2,2),(-2,2), color="yellow", opacity=0.5)
sage: show(P1+P2, viewer="threejs")
Launched html viewer for Graphics3d Object

Now, in the browser window, try to change your point of view to look at the object from a little above the z==1 plane: the "lower" part of the paraboloid diseappears if no point of it can be "viewed directly". It should be seen "through the plane" (in a greenish shade...).

There are also points of view where the "directly visible" part of the paraboloid is visible but the part "hidden" by the plane is not see "through the plane" as it should.

Last, "rotating" the object exhibits moiré effects at some points of the movement.

comment:70 follow-up: Changed 2 months ago by jipilab

... sorry to interrupt the discussion.

I am very much looking forward to the improvements of this ticket!

I have one small issue concerning polytopes (which is a feature that apparently a lot of people use, I receive a lot of feedback):

http://doc.sagemath.org/html/en/thematic_tutorials/geometry/polytope_tikz.html

I would be happy to migrate this tutorial to the then default viewer (especially for people where jmol would not work). Since I do not know threejs that much I was wondering if there is an equivalent way to figure out the "angle of view data" used in the tutorial. Namely:

In jmol's console, if one clicks "State", one gets a list of three numbers next to moveto followed by an angle of rotation between 0 and 360. These 4 numbers essentially describe the 3D-2D projection.

Is there a (fairly) easy way to get this in threejs?

comment:71 Changed 2 months ago by jipilab

  • Cc jipilab added

comment:72 in reply to: ↑ 69 ; follow-ups: Changed 2 months ago by paulmasson

Replying to charpent:

In answer to comments to y answer to this ask.sagemath question: threejs still has problems handling transparencies and hidden-facets problems:

Transparency in Three.js is rendered based on the centers of meshes. When two transparent meshes intersect they will be treated as if located entirely at each respective center, so that the problems described will not go away any time soon. One approach would be to use the WebGL 2 renderer of Three.js, as it has additional features not available in WebGL, but unfortunately this API is not universally supported mostly due to Apple.

The question is whether transparency is more important than packaging issues. Besides, Jmol will remain available as a viewer option.

comment:73 in reply to: ↑ 70 Changed 2 months ago by paulmasson

Replying to jipilab:

In jmol's console, if one clicks "State", one gets a list of three numbers next to moveto followed by an angle of rotation between 0 and 360. These 4 numbers essentially describe the 3D-2D projection.

Is there a (fairly) easy way to get this in threejs?

The underlying information is available from the position of the camera relative to the midpoint of the scene. The question is how to make it easily accessible, since the Three.js OrbitControls use the mouse right click to pan the scene. Open possibility would be to add an additional icon like I did for downloading an image of the scene.

comment:74 follow-up: Changed 2 months ago by dimpase

I don't think we need to worry too much about a particular browser not supporting a feature (WebGL 2) - as long as there is a browser for the OS in question that does support the feature.

comment:75 in reply to: ↑ 72 ; follow-ups: Changed 2 months ago by charpent

Replying to paulmasson:

Replying to charpent:

In answer to comments to y answer to this ask.sagemath question: threejs still has problems handling transparencies and hidden-facets problems:

Transparency in Three.js is rendered based on the centers of meshes. When two transparent meshes intersect they will be treated as if located entirely at each respective center, so that the problems described will not go away any time soon. One approach would be to use the WebGL 2 renderer of Three.js, as it has additional features not available in WebGL, but unfortunately this API is not universally supported mostly due to Apple.

dimpase's answer is relevant...

The question is whether transparency is more important than packaging issues. Besides, Jmol will remain available as a viewer option.

Another (admittedly caricatural) example where the "transparency problem" clobbers the mathematical usefulness of the plot :

sage: P1=implicit_plot3d(E1.lhs().subs([a==2]),(x, -2, 2), (y, -2, 2), (z, -2, 2)
....: , color="blue", opacity=0.5)
sage: P2=implicit_plot3d(E2.lhs().subs([b==1]),(x, -2, 2), (y, -2, 2), (z, -2, 2)
....: , color="yellow", opacity=0.5)
sage: (P1.P2).show(viewer="threejs")

The part of the yellow cone inner to the sphere isn't visualized at all...

comment:76 in reply to: ↑ 74 ; follow-up: Changed 2 months ago by paulmasson

Replying to dimpase:

I don't think we need to worry too much about a particular browser not supporting a feature (WebGL 2) - as long as there is a browser for the OS in question that does support the feature.

I disagree very strongly on this point: if the viewer produces wildly different results in different browsers it will produce nothing but endless questions. That is the entire reason for the existence of libraries like jQuery to ensure conformity across browsers.

comment:77 in reply to: ↑ 75 ; follow-up: Changed 2 months ago by paulmasson

Replying to charpent:

Another (admittedly caricatural) example where the "transparency problem" clobbers the mathematical usefulness of the plot :

sage: P1=implicit_plot3d(E1.lhs().subs([a==2]),(x, -2, 2), (y, -2, 2), (z, -2, 2)
....: , color="blue", opacity=0.5)
sage: P2=implicit_plot3d(E2.lhs().subs([b==1]),(x, -2, 2), (y, -2, 2), (z, -2, 2)
....: , color="yellow", opacity=0.5)
sage: (P1.P2).show(viewer="threejs")

The part of the yellow cone inner to the sphere isn't visualized at all...

This example is incomplete. What are E1 and E2?

comment:78 in reply to: ↑ 77 Changed 2 months ago by charpent

Replying to paulmasson:

[ Snip... ]

This example is incomplete. What are E1 and E2?

Wups ! Compleed (and checked):

var("x, y, z, a, b")
E1 = x^2 + y^2 + z^2 - a^2 == 0
E2 = x^2 + y^2 - b^2*z^2 == 0
P1=implicit_plot3d(E1.lhs().subs([a==2]),(x, -2, 2), (y, -2, 2), (z, -2, 2),
                   color="blue", opacity=0.5)
P2=implicit_plot3d(E2.lhs().subs([b==1]),(x, -2, 2), (y, -2, 2), (z, -2, 2),
                   color="yellow", opacity=0.5)
(P1+P2).show(viewer="threejs")

comment:79 in reply to: ↑ 76 Changed 2 months ago by dimpase

Replying to paulmasson:

Replying to dimpase:

I don't think we need to worry too much about a particular browser not supporting a feature (WebGL 2) - as long as there is a browser for the OS in question that does support the feature.

I disagree very strongly on this point: if the viewer produces wildly different results in different browsers it will produce nothing but endless questions. That is the entire reason for the existence of libraries like jQuery to ensure conformity across browsers.

You either mean to say that WebGL 2 is dead and noone is using it, or you say it is technically impossible to print an error message on Safari as soon as WebGL 2 is used there...

I gather that Apple is unwilling to support WeGL 2. So what? Jupyter and SageNB never worked well in IE, and?

EDIT: jmol is just not working on some platforms (e.g. on Windows or in a VM, on various HPC clusters, etc), full stop. We are constantly helping users to work around this limitation. If something is not working in Safari, oh well, we can live with it, document, print warnings, and move on.

Last edited 2 months ago by dimpase (previous) (diff)

comment:80 in reply to: ↑ 75 ; follow-up: Changed 2 months ago by egourgoulhon

Replying to charpent:

The part of the yellow cone inner to the sphere isn't visualized at all...

IMHO, these opacity issues are very minor ones: in the two provided examples, it suffices to adjust the opacity parameter of the background object to fix them, e.g. opacity=1 in P1 of comment:75 and opacity=1 in P2 of comment:78.

Last edited 2 months ago by egourgoulhon (previous) (diff)

comment:81 in reply to: ↑ 80 Changed 2 months ago by charpent

Replying to egourgoulhon:

Replying to charpent:

The part of the yellow cone inner to the sphere isn't visualized at all...

IMHO, these opacity issues are very minor ones: in the two provided examples, it suffices to adjust the opacity parameter of the background object to fix them, e.g. opacity=1 in P1 of comment:75 and opacity=1 in P2 of comment:78.

Easy fix, indeed. But the (mathematical) point is that neither as "background". Not a problem here, more of a problem for visualizing, say, self-intersecting surfaces...

comment:82 Changed 2 months ago by egourgoulhon

  • Description modified (diff)

comment:83 Changed 2 months ago by egourgoulhon

I've updated the pros/cons section of the ticket description. I guess the question is not "is three.js perfect, so that it can become the default viewer?", but rather "is the ratio gain (pros) to loss (cons) high enough to make it the default viewer?". IMHO the answer is yes, given that jmol will remain available (when it works...) as an optional viewer. Probably there should be a poll on sage-devel. Before launching such a poll, I would like to test the workaround proposed in comment:66 for generating the doc. Do you have any other suggestion to deal with this last point?

Last edited 2 months ago by egourgoulhon (previous) (diff)

comment:84 in reply to: ↑ 72 ; follow-up: Changed 2 months ago by embray

Replying to paulmasson:

The question is whether transparency is more important than packaging issues. Besides, Jmol will remain available as a viewer option.

^ This. Different viewers will all have different issues, and fixing every known bug with ThreeJS (which is a problem beyond Sage since it involves browsers, WebGL libraries, operating systems, etc.) is not a viable blocker to making this change or it will never happen.

The ThreeJS viewer works for the most common cases, and most importantly for cases that are likely to arise in tutorials for new users, etc. For more niche applications, other viewers will still be available as alternatives until/unless the issue can be resolved with ThreeJS.

Last edited 2 months ago by embray (previous) (diff)

comment:85 in reply to: ↑ 84 ; follow-up: Changed 2 months ago by charpent

Replying to embray:

Replying to paulmasson:

The question is whether transparency is more important than packaging issues. Besides, Jmol will remain available as a viewer option.

^ This. Different viewers will all have different issues, and fixing every known bug with ThreeJS (which is a problem beyond Sage since it involves browsers, WebGL libraries, operating systems, etc.) is not a viable blocker to making this change or it will never happen.

The ThreeJS viewer works for the most common cases, and most importantly for cases that are likely to arise in tutorials for new users, etc. For more niche applications, other viewers will still be available as alternatives until/unless the issue can be resolved with ThreeJS.

I mostly agree with you both : in their current respective states, threejs is probably a more useful default than jmol (unless sudden progress on #25026 and related tickets miraculously happens...) . However :

Probably there should be a poll on sage-devel.

Seconded. Since it probably is already too late for 8.9 (which is at the "rc" stage), and since a doc-building test must be undertaken, this pool could proceed as soon as this tests well.

Other valuable suggestions have been made, such as the addition of some widget allowing to get the current view parameters, etc. (and I may have a couple, if I can take the time to *think about them...). Unless they are trivial, they probably would deserve ticket(s) of their own, less urgent than the proposed change of default.

comment:86 in reply to: ↑ 85 Changed 2 months ago by tmonteil

Replying to charpent:

I mostly agree with you both : in their current respective states, threejs is probably a more useful default than jmol (unless sudden progress on #25026 and related tickets miraculously happens...) . However :

Let the miracle happen, #25026 needs review !

I personally need that for SDL since next version is going to migrate to Debian buster.

comment:87 Changed 2 months ago by egourgoulhon

  • Authors set to Paul Masson, Eric Gourgoulhon
  • Branch changed from u/paulmasson/22408 to public/graphics/22408
  • Commit changed from 93b0b0e293645b46f409c3514df70d337b16a88e to fcac479a1d7d364973ecd571b949aecc1e9e06e7
  • Status changed from new to needs_review

Here is a first version of the complete code for making threejs the default viewer. With respect to the code in previous branch (which was only changing the 'viewer' value in the dict SHOW_DEFAULTS), this code makes viewer=None equivalent to viewer='threejs' and updates the documentation to reflect the change of the default viewer.

NB: for generating the reference manual, instead of the solution proposed in comment:66, I've made the method Graphics3d._save_image_png fall back on jmol if the viewer is threejs.

I've checked that both the html and pdf documentation are generated without any error (with png figures produced by jmol though...) and I am setting the ticket to 'needs review' to draw the attention of the patchbots.


New commits:

ca4852bMerge branch 'u/paulmasson/22408' of git://trac.sagemath.org/sage into Sage 8.9.rc0
fcac479Make threejs the default 3d viewer
Last edited 2 months ago by egourgoulhon (previous) (diff)

comment:88 Changed 8 weeks ago by dimpase

  • Reviewers set to Dima Pasechnik
  • Status changed from needs_review to positive_review

looks good to me, especially it's nice that it works in Jupyter notebooks and in sagenb. (on various Lines and on OSX 10.13.6)

Last edited 8 weeks ago by dimpase (previous) (diff)

comment:89 follow-up: Changed 8 weeks ago by egourgoulhon

  • Milestone changed from sage-pending to sage-8.9
  • Status changed from positive_review to needs_review

I am setting the ticket back to 'needs_review' and the milestone to sage-8.9 to draw the attention of the patchbots (apparently having 'sage-pending' prevented the patchbots to run on this ticket).

PS: I am also opening a poll on sage-devel.

comment:90 Changed 8 weeks ago by dimpase

  • Status changed from needs_review to positive_review

comment:91 in reply to: ↑ 89 Changed 8 weeks ago by egourgoulhon

Replying to egourgoulhon:

PS: I am also opening a poll on sage-devel.

This is https://groups.google.com/forum/#!topic/sage-devel/DmBa1bjUJ-I

comment:92 Changed 7 weeks ago by chapoton

  • Milestone changed from sage-8.9 to sage-9.0

moving milestone to 9.0 (after release of 8.9)

comment:93 Changed 6 weeks ago by vbraun

  • Branch changed from public/graphics/22408 to fcac479a1d7d364973ecd571b949aecc1e9e06e7
  • Resolution set to fixed
  • Status changed from positive_review to closed

comment:94 follow-up: Changed 5 weeks ago by chapoton

  • Commit fcac479a1d7d364973ecd571b949aecc1e9e06e7 deleted

comment:95 Changed 5 weeks ago by tmonteil

There is also an issue when the browser does not support OpenGL, there should be some fallback in such cases: see #28589.

comment:96 follow-up: Changed 5 weeks ago by jhpalmieri

Re the messages like

RuntimeError: Jmol failed to create file '/home/u1/chapoton/.sage/temp/atlas/38849/dir_j7p5z38w/preview.png', see '/home/u1/chapoton/.sage/temp/atlas/38849/tmp_9z6qo292.txt'

What did the txt files say?

comment:97 in reply to: ↑ 96 Changed 5 weeks ago by novoselt

Replying to jhpalmieri:

Re the messages like

RuntimeError: Jmol failed to create file '/home/u1/chapoton/.sage/temp/atlas/38849/dir_j7p5z38w/preview.png', see '/home/u1/chapoton/.sage/temp/atlas/38849/tmp_9z6qo292.txt'

What did the txt files say?

My random guess of the day is that it is caused by https://groups.google.com/d/topic/sage-devel/snx2Rr5W6xc/discussion

comment:98 Changed 5 weeks ago by jhpalmieri

Then it's due to #25026, I think. Would this be the right fix?

  • build/pkgs/jmol/spkg-install

    diff --git a/build/pkgs/jmol/spkg-install b/build/pkgs/jmol/spkg-install
    index 27798e6232..65dfa6df44 100644
    a b rm -f "${SAGE_LOCAL}/bin/jmol" 
    66# jsmol goes in a dedicated directory
    77sdh_install src/jsmol "${SAGE_SHARE}/"
    88rm -rf src/jsmol
     9chmod a+rx src
    910
    1011sdh_install -T src "${SAGE_SHARE}/jmol"
    1112sdh_install jmol "${SAGE_LOCAL}/bin/"

comment:99 Changed 5 weeks ago by jhpalmieri

Is there a trac ticket open for the jmol permissions issue?

comment:100 follow-up: Changed 5 weeks ago by novoselt

I don't think so, at least I didn't open one.

comment:101 in reply to: ↑ 100 Changed 5 weeks ago by jhpalmieri

Replying to novoselt:

I don't think so, at least I didn't open one.

#28596. In my opinion, you should have opened a ticket the same time you reported the problem on sage-devel: sage-devel threads can get lost pretty easily.

comment:102 in reply to: ↑ 94 Changed 5 weeks ago by jhpalmieri

Replying to chapoton:

This seems to have broken the doc building on some python3 sage:

see https://patchbot.sagemath.org/log/0/Ubuntu/16.04/x86_64/4.4.0-161-generic/atlas/2019-10-10%2016:18:22?plugin=docbuild

Could you try #28596 to see if Andrey's guess is right? With that branch, do sage -f jmol and see if it fixes your problems.

Note: See TracTickets for help on using tickets.