Create 2D Snapshot

Possibility to capture a 2D snapshot of the current viewport view as a raster or vector image.

Extracting an image from the renderer is pretty straight forward. Just get the canvas element that you passed into the renderer constructor and call ‘toDataURL’. Use that url as the src on an image and it will load the image. You ca then download the image or do other stuff.

    var img = new Image();
    img.src = renderer.getGLCanvas().toDataURL('image/png');
    img.onload = function() {
       // Do post processing on the image.
   }

from there you can convert the PNG to an SVG using tools like the following. There’s a bunch of different vectorizer tools. I tried one that performed very poorly.

I did a couple of quick tests using online tools to see how clean the results could be and they were surprisingly good. Its difficult to know which libraries these web apps use, so I guess further research is needed to try out the various raster to vector libraries available and see which ones work the best for our data.

Interesting that you have found a good raster to vector image conversion tool and worth a bit more looking into. I had found them to be a bit hit and miss in the past where edge and surface colours were quite similar and edge detection became an issue, although that was quite some time ago.

As a suggestion, another approach for a vector image, but would involve a bit more processing, is to perhaps project the current 3d world coordinates of each of the line edges to 2d screen points. Those 2d points could then be used to create an accurate vector image as opposed to relying on raster edge detection. This might not be possible in GLTF though as you would need to have the edge vertices in memory.

Another approach is you could also use a number of passes there one pass would be an off screen draw where there was a for edges only and do edge detection on that. In both these cases, mesh surfaces can be drawn in another pass without edges and then combine the resulting two images into a single vector image.

yep. There is lines being drawn that are not geometry here. the silhouettes are rendered as a post process that does edge detection. I felt like the raster-to-vector conversion generated good enough results and that scaled to any kind of data.
Actually generating SVG of screen projected coordinates would be possible, but a fairly huge engineering investment so I would prefer to keep looking into these tools. The area of vectorization has had a lot of advancements, so I’m hoping that we can get what we need here.

1 Like