Improve exporting and drawing (#42)

Author: flekschas

README.md

@@ -306,6 +306,14 @@ Refreshes the viewport of the scatterplot's regl instance.
 
 Sets the view back to the initially defined view.
 
+<a name="scatterplot.export" href="#scatterplot.export">#</a> scatterplot.<b>export</b>(<i>options</i>)
+
+**Arguments:**
+
+- `options` is an object for customizing how to export. See [regl.read()](https://github.com/regl-project/regl/blob/master/API.md#reading-pixels) for details.
+
+**Returns:** an object with three properties: `pixels`, `width`, and `height`. The `pixels` is a `Uint8ClampedArray`.
+
 <a name="scatterplot.subscribe" href="#scatterplot.subscribe">#</a> scatterplot.<b>subscribe</b>(<i>eventName</i>, <i>eventHandler</i>)
 
 Subscribe to an event.

src/index.js

@@ -247,6 +247,7 @@ const createScatterplot = (initialProperties = {}) => {
   const fbo = regl.framebuffer({
     width: fboRes[0],
     height: fboRes[1],
+    colorFormat: 'rgba',
     colorType: 'float',
   });
   let backgroundColorBrightness = rgbBrightness(backgroundColor);
@@ -1187,7 +1188,7 @@ const createScatterplot = (initialProperties = {}) => {
 
       void main () {
         vec4 color = texture2D(src, gl_FragCoord.xy / srcRes);
-        gl_FragColor = vec4(approxLinearToSRGB(color.rgb, gamma), 1);
+        gl_FragColor = vec4(approxLinearToSRGB(color.rgb, gamma), color.a);
       }`,
     attributes: {
       xy: [-4, -4, 4, -4, 0, 4],
@@ -1199,6 +1200,15 @@ const createScatterplot = (initialProperties = {}) => {
     },
     count: 3,
     depth: { enable: false },
+    blend: {
+      enable: true,
+      func: {
+        srcRGB: 'one',
+        srcAlpha: 'one',
+        dstRGB: 'one minus src alpha',
+        dstAlpha: 'one minus src alpha',
+      },
+    },
   });
 
   const drawPoints = (
@@ -1696,27 +1706,34 @@ const createScatterplot = (initialProperties = {}) => {
     // Update camera
     isViewChanged = camera.tick();
 
+    regl.clear({
+      // background color (transparent)
+      color: [0, 0, 0, 0],
+      depth: 1,
+    });
+
+    // eslint-disable-next-line no-underscore-dangle
+    if (backgroundImage && backgroundImage._reglType) {
+      drawBackgroundImage();
+    }
+
+    if (lassoPointsCurr.length > 2) drawPolygon2d();
+
+    // The draw order of the following calls is important!
+    if (!isTransitioning)
+      pointConnections.draw({
+        projection: getProjection(),
+        model: getModel(),
+        view: getView(),
+      });
+
     fbo.use(() => {
       regl.clear({
         // background color (transparent)
         color: [0, 0, 0, 0],
         depth: 1,
       });
 
-      // eslint-disable-next-line no-underscore-dangle
-      if (backgroundImage && backgroundImage._reglType) {
-        drawBackgroundImage();
-      }
-
-      if (lassoPointsCurr.length > 2) drawPolygon2d();
-
-      // The draw order of the following calls is important!
-      if (!isTransitioning)
-        pointConnections.draw({
-          projection: getProjection(),
-          model: getModel(),
-          view: getView(),
-        });
       drawPointBodies();
       if (!mouseDown && (showRecticle || showRecticleOnce)) drawRecticle();
       if (hoveredPoint >= 0) drawHoveredPoint();
@@ -2573,6 +2590,12 @@ const createScatterplot = (initialProperties = {}) => {
     }
   };
 
+  const exportFn = (options = {}) => ({
+    pixels: Uint8ClampedArray.from(regl.read(options)),
+    width: currentWidth * window.devicePixelRatio,
+    height: currentHeight * window.devicePixelRatio,
+  });
+
   const init = () => {
     updateViewAspectRatio();
     initCamera();
@@ -2676,6 +2699,7 @@ const createScatterplot = (initialProperties = {}) => {
     reset: withDraw(reset),
     select,
     set,
+    export: exportFn,
     subscribe: pubSub.subscribe,
     unsubscribe: pubSub.unsubscribe,
   };

src/utils.js

@@ -34,7 +34,10 @@ export const checkReglExtensions = (regl) => {
  * @return  {function}  New Regl instance
  */
 export const createRegl = (canvas) => {
-  const gl = canvas.getContext('webgl');
+  const gl = canvas.getContext('webgl', {
+    antialias: true,
+    preserveDrawingBuffer: true,
+  });
   const extensions = [];
 
   // Needed to run the tests properly as the headless-gl doesn't support all