0

Using the derivative API I found that the thumbnail generated are very dark, here is a screenshot from the viewer:

Viewer Picture

And here is a screenshot of the thumbnail automatically generated:

Thumbnail generated

The file uploaded is an STL file.

How do I generate a thumbnail that looks like the preview?

Thanks!

e-Jah
  • 335
  • 4
  • 16

2 Answers2

1

Unfortunately at the moment there is no control over thumbnail generation using the Derivatives API.

We have a Render-as-a-service API which is going to be released at some point but it is not available yet.

The only workaround at the moment would be to load the model in the viewer and screenshot it. There is an API for generating screenshots, see my blog post, so the process could be automated, but the model has to be rendered in a browser.

Hope that helps

Felipe
  • 4,325
  • 1
  • 14
  • 19
0

At Instructables.com (one of Autodesk's properties), we encountered the same issue with the Derivatives API; we also needed thumbnails larger than the 400x400 images provided by the Forge API.

If you're using Nodejs, you can use our open-sourced thumbnailer that generates STL thumbnails on the server side very quickly:

https://www.npmjs.com/package/node-stl-thumbnailer

The approach here creates a threejs scene on the server side, then renders it using the CanvasRenderer and node-canvas. As such, it has no dependencies on a web browser, GPU, or other front-end technologies. Because it's not a raytracer, it does not come with the computation overhead that a full rendering service would, but it also comes with limitations. There is no support for shadows, lighting, or materials, among other issues.

The demo project shows a quick expressjs app that will accept the URL for an STL, and return a thumbnail of the requested size synchronously.

The code looks like this:

// index.js 
var StlThumbnailer = require('node-stl-thumbnailer');
var app = require("express")();

app.get('/thumbnailer', function(req, res, next) {
    var thumbnailer = new StlThumbnailer({
        url: req.query.url,
        requestThumbnails: [
            {
                width: 500,
                height: 500,
            }
        ]   
    })
    .then(function(thumbnails){
          // thumbnails is an array (in matching order to your requests) of Canvas objects 
          // you can write them to disk, return them to web users, etc 
          thumbnails[0].toBuffer(function(err, buf){      
          res.contentType('image/png');
          res.send(buf)
        })
    })
    .catch(function(err){
        res.status(500);
        res.send("Error thumbnailing: "+err);
    });
});

app.listen(3000, function () {
  console.log('Listening on port 3000\n')
});

And here's a sample "rendering":

Sample Thumbnailer Output

strandedcity
  • 1