Output vectorized graphics from scene

jupyter-widgets / pythreejs

A Jupyter - Three.js bridge

https://pythreejs.readthedocs.io

Other

942 stars 188 forks source link

Output vectorized graphics from scene #280

Open TakodaS opened 5 years ago

TakodaS commented 5 years ago

It would be really nice to be able to save my scene as a .svg file to put into publications. Having searched across the web I still don't see any easy way to do this. Other packages i.e plotly, ipyvolume have methods to save images and I'm wondering if something similar could be added to pythreejs.

EDIT: As far as I can see, the canonical way to do this is to ipywebrtc but the problem with this is that it makes a screen capture thus all the nice rendered threejs vector graphic details are lost.

vidartf commented 5 years ago

Vectorized graphics output would be nice, and I think wrapping SVGRenderer would be the way to do it. For the SVGRenderer, I think it would be like the WebGLRenderer wrapping: No controls (no direct user interactions), just single-frame output (that can be updated on request).

vidartf commented 5 years ago

Actually, it seems like the SVGRenderer is example code using deprecated/removed functionality. As such, I don't think you can expect vector outputs from pythreejs, as threejs seems now to be wholly raster-based.

TakodaS commented 5 years ago

This blog looks like a possible lead.

EDIT: The package Plotly.js has an interesting function plotly.js/src/snapshot/tosvg.js that I am looking at now.

EDIT2: for completeness, here is how to get SVG from three.js

EDIT3: After working on this for the past couple days, I have come to the conclusion that in order to do high quality scientific visualization it is best to just use three.js. Even if SVGRenderer were wrapped into py3js, which isn't difficult, the problem is that I can see no way to extract the SVG file from the ipython widget. In three.js the SVG image is contained within the tages and can be downloaded easily.

vidartf commented 5 years ago

Looking at this more, it seems it should indeed be possible. However, it would require vendoring the svg renderer from the examples code in threejs, and adding some custom wrapping. Unfortunately, I don't have the time to do this myself. Possible alternatives:

Somebody else creates a separate widget package with all/most/some of the example code from three.js
Somebody else creates a PR implementing this, and is willing to help support that script (issues / maintenance).

Separately:

I can see no way to extract the SVG file from the ipython widget

This could e.g. be resolved by adding a string field to the widget spec containing the SVG source.