Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

make viewer='threejs' be the default for 3d plots in jupyter notebooks with sage #1963

Closed
williamstein opened this issue May 17, 2017 · 7 comments
Closed

make viewer='threejs' be the default for 3d plots in jupyter notebooks with sage #1963

williamstein opened this issue May 17, 2017 · 7 comments
Labels
A-3d A-jupyter E-medium I-bug I-enhancement upstream

Comments

@williamstein
Copy link
Contributor

We may have to do this by simply modifying the sage source code.

The reason is that the jmol.js default is horrendously slow / inefficient / painful...

Uses jmol and hurts BAD, e.g., 1000x worse than threejs:

var('r ph')
g1 = parametric_plot3d([r*cos(ph), r*sin(ph), r], (r, 0, 1), (ph, 0, 2*pi))
g2 = parametric_plot3d([r*cos(ph), r*sin(ph), -r], (r, 0, 1), (ph, 0, 2*pi))
g = g1 + g2
g

Then with three.js, which is very fast and smooth!

show(g, viewer='threejs')

screen shot 2017-05-17 at 10 42 14 am
@williamstein
Copy link
Contributor Author

From Eric Gourgoulhon:

Note that there is already a trac ticket to make threejs the default 3D viewer for Sage: https://trac.sagemath.org/ticket/22408 The initial hope was to have it ready for Sage 8.0...

so marking this "upstream"

@williamstein
Copy link
Contributor Author

Security improvements have broken the install, so viewer='threejs' no longer works at all, with errors (in the console) like this: "a.html:16 GET https://cocalc.com/nbextensions/threejs/OrbitControls.js net::ERR_ABORTED 404; a.html:1 Refused to execute script from 'https://cocalc.com/nbextensions/threejs/OrbitControls.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled."

at least for me in Chrome 69.

Failed to load resource: the server responded with a status of 502 ()
1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6 GET https://cocalc.com/4a5f0542-5873-4eed-a85c-a18c706e8bcd/raw/.smc/jupyter/kernels/kernel_info?path=support%2F2018-08-17-093059-three.ipynb 504
send @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
ajax @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
t._ajax @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
f @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
n @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
function.e._wrapper.e._wrapper @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
setTimeout (async)
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
cb @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
success @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
c @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
fireWith @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
M @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
(anonymous) @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
load (async)
send @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
ajax @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
t._ajax @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
f @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
n @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
exports.retry_until_success @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
t.set_backend_kernel_info @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
(anonymous) @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
Ue.iterate.Ge.iterate @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
Fe.__iterate @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
cn.__iterate @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
forEach @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
t.__syncdb_change @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
t._syncdb_change @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
n.emit @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
value @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
value @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
t._set @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
t.set_kernel @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
t._syncdb_init_kernel @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
cb @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
n @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
n.emit @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
u @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
p._throttle_changes.p.emit_change @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
value @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
cb @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
cb @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
cb @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
value @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
value @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
emit @ VM137:1
done @ VM137:1
transform @ VM137:1
transforms @ VM137:1
decoding @ VM137:1
decoder @ VM137:2
message @ VM137:1
emit @ VM137:1
next @ VM137:1
defer @ VM137:2
function.e._wrapper.e._wrapper @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
setTimeout (async)
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
parse @ VM137:2
emitter @ VM137:1
1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6 GET https://cocalc.com/4a5f0542-5873-4eed-a85c-a18c706e8bcd/raw/.smc/jupyter/kernels/kernel_info?path=support%2F2018-08-17-093059-three.ipynb 504
send @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
ajax @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
t._ajax @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
f @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
n @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
function.e._wrapper.e._wrapper @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
setTimeout (async)
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
cb @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
c @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
fireWith @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
M @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
(anonymous) @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
load (async)
send @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
ajax @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
t._ajax @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
f @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
n @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
function.e._wrapper.e._wrapper @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
setTimeout (async)
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
cb @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
success @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
c @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
fireWith @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
M @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
(anonymous) @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
load (async)
send @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
ajax @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
t._ajax @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
f @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
n @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
exports.retry_until_success @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
t.set_backend_kernel_info @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
(anonymous) @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
Ue.iterate.Ge.iterate @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
Fe.__iterate @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
cn.__iterate @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
forEach @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
t.__syncdb_change @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
t._syncdb_change @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
n.emit @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
value @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
value @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
t._set @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
t.set_kernel @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
t._syncdb_init_kernel @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
cb @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
n @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
n.emit @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
u @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ 1-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:6
p._throttle_changes.p.emit_change @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
value @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
cb @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
cb @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
cb @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
value @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
value @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
emit @ VM137:1
done @ VM137:1
transform @ VM137:1
transforms @ VM137:1
decoding @ VM137:1
decoder @ VM137:2
message @ VM137:1
emit @ VM137:1
next @ VM137:1
defer @ VM137:2
function.e._wrapper.e._wrapper @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
setTimeout (async)
(anonymous) @ smc-ee41a9a80267ed33e7e6.cacheme.js?ee41a9a80267ed33e7e6:5
parse @ VM137:2
emitter @ VM137:1
a.html:15 GET https://cocalc.com/nbextensions/threejs/three.min.js net::ERR_ABORTED 404
a.html:1 Refused to execute script from 'https://cocalc.com/nbextensions/threejs/three.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
a.html:16 GET https://cocalc.com/nbextensions/threejs/OrbitControls.js net::ERR_ABORTED 404
a.html:1 Refused to execute script from 'https://cocalc.com/nbextensions/threejs/OrbitControls.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
a.html?sha1=5a84ee29db4397f8c91d9912693d27ab558d4e48&attempts=0:18 Uncaught SyntaxError: Invalid or unexpected token
a.html?sha1=5a84ee29db4397f8c91d9912693d27ab558d4e48&attempts=0:26 Uncaught ReferenceError: THREE is not defined
    at a.html?sha1=5a84ee29db4397f8c91d9912693d27ab558d4e48&attempts=0:26

@thoka
Copy link

thoka commented Oct 16, 2018

Is it possible to set threejs as default viewer from inside a notebook ?

@williamstein
Copy link
Contributor Author

williamstein commented Mar 26, 2019 •
edited
Loading

Any use of three.js at all with the Sage kernel from Jupyter is still completely broken.

https://share.cocalc.com/share/4a5f0542-5873-4eed-a85c-a18c706e8bcd/support/2019-03-26-125317-3d.ipynb?viewer=share

@williamstein williamstein mentioned this issue Mar 27, 2019
Open
@embray
Copy link
Contributor

embray commented Apr 2, 2019

I haven't actually encountered this specific issue. In Sage 8.7 at least ThreeJS in the Jupyter Notebook is working fine for me, even on Windows. That's when running locally at least. There is a known problem with this when running Notebooks in Binder. I haven't looked too deeply into it yet but I know it's a major blocker (though that problem also affects using JSmol).

The problem I'm trying to fix right now is the long-standing problem with shading of polytopes mentioned at: https://trac.sagemath.org/ticket/22408#comment:33 The fix to that from the ThreeJS perspective is easy enough: Use flat shading. What I'm not clear is what the best way is, through Sage's 3D graphics framework, to pass that rendering detail around in a generic manner. I'm still trying to understand how things are supposed to work in the plot3d module.

But in any case that's just a 3D rendering detail, and not the more tedious, mundane kind of problems we have with server/browser/file path interactions.

@AlbyF
Copy link

AlbyF commented Apr 10, 2019

embray for me, as williamstein indicates , in the Jupyter notebook threejs doesn't work (produces no image) while it works fine in a sage worksheet (this is on CoCalc).
I haven't tried it running locally as there is a separate issue I have had with installing Sagemath on my Mac with High Sierra- lots of attempts but still not working right.

One of the problems is I want to be able to save the html of a 3d image, and apparently that can only be done from the Jupyter notebook, so...Catch-22 !!!

Thanks for any help or suggestions!
jmol and tachyon also fail badly.

williamstein suggested to me that I write to sage support, which I will also do...

@williamstein
Copy link
Contributor Author

It is now the case that sage jupyter uses threejs by default, so this is a non-issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-3d A-jupyter E-medium I-bug I-enhancement upstream
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@thoka @embray @williamstein @AlbyF