Save threejs 3D graphics as png using pyppeteer

[mkoeppe]

... in src/sage/plot/plot3d/base.pyx (_save_image_png)

From https://github.com/plotly/Kaleido#background:

programmatically generating [...] PNGs [...] from web-based visualization libraries (e.g. Plotly.js, Vega-Lite, etc.) is a complex problem. [...] The core difficulty is that web-based visualization libraries don't actually render plots (i.e. color the pixels) on their own, instead they [...] rely on a web browser rendering engine to display figures.

When the figure is displayed in a browser window, it's relatively straight-forward [...] to provide an export-image button because it has full access to the browser for rendering. [...] to export an image programmatically (e.g. from Python) without displaying it in a browser and without user interaction [...], the Python portion of the visualization library needs programmatic access to a web browser's rendering engine.

There are at least two options:

• https://pypi.org/project/kaleido/ (related to plot.js)

  provides prebuilt pip-installable wheels containing a chromium build

• https://github.com/pyppeteer/pyppeteer (Update nbconvert to 6.4.x, add optional package pyppeteer #33533):

  When you run pyppeteer for the first time, it downloads the latest version of Chromium (~150MB) if it is not found on your system. If you don't prefer this behavior, ensure that a suitable Chrome binary is installed. One way to do this is to run pyppeteer-install command before prior to using this library. (https://github.com/pyppeteer/pyppeteer#usage)

References:

• https://stackoverflow.com/questions/26193702/three-js-how-can-i-make-a-2d-snapshot-of-a-scene-as-a-jpg-image
• https://threejs.org/docs/#api/en/renderers/WebGLRenderer.domElement
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
• https://betterprogramming.pub/saving-an-html5-canvas-as-an-image-with-todataurl-f9b7cb61595d
• bitmap output jupyter-widgets/pythreejs#22

Depends on #33533

CC: @egourgoulhon @kwankyu

Component: graphics

Issue created by migration from https://trac.sagemath.org/ticket/33534

[mkoeppe]

Description changed:

--- 
+++ 
@@ -14,4 +14,9 @@
 
    When you run pyppeteer for the first time, it downloads the latest version of Chromium (~150MB) if it is not found on your system. If you don't prefer this behavior, ensure that a suitable Chrome binary is installed. One way to do this is to run `pyppeteer-install` command before prior to using this library. (https://github.com/pyppeteer/pyppeteer#usage)
 
-
+References:
+- https://stackoverflow.com/questions/26193702/three-js-how-can-i-make-a-2d-snapshot-of-a-scene-as-a-jpg-image
+- https://threejs.org/docs/#api/en/renderers/WebGLRenderer.domElement
+- https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
+- https://betterprogramming.pub/saving-an-html5-canvas-as-an-image-with-todataurl-f9b7cb61595d
+- https://github.com/jupyter-widgets/pythreejs/issues/22

[mkoeppe]

Dependencies: #33533

[mkoeppe]

Description changed:

--- 
+++ 
@@ -1,3 +1,5 @@
+... in src/sage/plot/plot3d/base.pyx (`_save_image_png`)
+
 From https://github.com/plotly/Kaleido#background:
 
   programmatically generating [...] PNGs [...] from web-based visualization libraries (e.g. Plotly.js, Vega-Lite, etc.) is a complex problem. [...] The core difficulty is that web-based visualization libraries don't actually render plots (i.e. color the pixels) on their own, instead they [...] rely on a web browser rendering engine to display figures.

[mkoeppe]

Closing in favor of using Playwright - #38509