Sage: Black canvas output when using threejs viewer in jupyter notebook

[tenaf0]

Describe the bug

On 3d1a771, the following issue happens:
The exact same issue as can be found on this arch forum post: https://bbs.archlinux.org/viewtopic.php?id=263728

I tried the same thing on master (5db7e33) where I got this instead: current backend does not support offline threejs graphics

I did try fixing it by packaging https://github.com/sagemath/threejs-sage , but I could not fix it yet, and the iterations are quite slow due to having to recompile sage-lib all the time.

My changes are: using three-sage = callPackage ./threejs-sage.nix {}; instead of the nodePackages.threejs package.
And the following (not yet cleaned up) threejs-sage.nix file:

{ stdenv, fetchFromGitHub }:

stdenv.mkDerivation rec {
  name = "threejs-sage-${version}";
  version = "r127";

  src = fetchFromGitHub {
    owner = "sagemath";
    repo = "threejs-sage";
    rev = version;
    sha256 = "sha256:09ks57jl825kis94fwml57g36v3b5l8vk1wd8y61k2f0d6pb5901";
  };
  
  installPhase = ''
    mkdir -p $out/lib/node_modules/three

    cp -r build $out/lib/node_modules/three
    ln -s $out/lib/node_modules/three/build/three.min.js $out/lib/node_modules/three/build/three.js
  '';
}

Just helping somehow decouple the js lib from the sage-lib build would be really helpful.

To Reproduce
Steps to reproduce the behavior:

1. start sage -n jupyter
2. do something with 3d graphics, eg:

y=var("y")
plot3d(x^2+y^2, (x,-1,1), (y,-1,1))

Expected behavior
The 3d plot of the given function in a threejs canvas.

@timokau
@omasanori
@collares

[collares]

Hi @tenaf0, thanks for working on this! I took the easy way out in #113603 and I am glad someone is fixing this. I am working on updating Sage to version 9.3, and it's my goal to finish this ASAP so we can have it in NixOS 21.05. Hopefully that will make it easier to use threejs-sage directly, since I believe 9.3 is the first version to use the threejs fork.

I am posting updates in #116365 and I will probably have more time to work on it this weekend.

[tenaf0]

I'm not sure how I missed that pull request, thanks for linking it! I've subscribed to both and will try to be somehow useful.

[collares]

Sage (even 9.3) uses THREE.Geometry [0], which was deprecated in Three.js r125 [1]. Sage 9.3 pins threejs-sage to version r122, so I changed your derivation to use the same version used upstream.

I've included your changes in my Sage 9.3 branch [2] and 3D graphics in Jupyter notebooks work fine there, many thanks! I copied authorship data from a pull request of yours, but I can change that if you prefer.

I haven't tried to backport the patch to Sage 9.2, but it should be doable. The only thing to keep in mind is that Sage 9.2 greps three.min.js for the version because (unlike threejs-sage) there is no version file at the project root. This also broke in r125 because the minified version didn't match the regexp (see #113603); r122 should be fine but watch out for minification oddities.

[0] https://github.com/sagemath/sage/blob/develop/src/sage/ext_data/threejs/threejs_template.html#L89
[1] mrdoob/three.js#21031
[2] https://github.com/collares/nixpkgs/tree/sage-9.3rc1

[collares]

By the way, my browser cached localhost:8888/nbextensions/threejs/build/three.min.js when I was testing stuff, so make sure to Shift+Reload :)

[tenaf0]

Sorry for not answering before, thank you for including me in the commit, but I hardly did anything :)

Thank You for your work on the 9.3 update!

Should I close this issue in your opinion, or wait for 9.3 being merged?

[collares]

It was just merged, so 3D plots should work again once the channels advance :)

cc @ralsei @Synthetica9 (I think you were discussing this on IRC the other day)