How to generate a preview image from a JSON model without Speckle Server?

Help
1

I’m using Speckle Viewer without any Speckle Server - just a JSON version of my BIM model from my Blob Storage. My JSON contains a Base Speckle object, which I serialize using the Speckle.Core.Serialisation NuGet package in .NET.

On the frontend (React), I load the model into the viewer with the following code:

const resourceData = JSON.stringify(speckleBaseModel);
const loader = new SpeckleOfflineLoader(viewer.getWorldTree(), resourceData);
await viewer.loadObject(loader, true);

This works perfectly for loading the model. However, I need to generate a preview image of the model and store it on my own server (not Speckle’s).

Possible Solution?

The only approach I can think of is:

  1. Loading the entire model with the code above
  2. Taking a screenshot after loading and saving it on my server:
await viewer.screenshot();

But I’m not sure if it’s the best idea to load the entire model just for making a preview. Is there a better way to generate a model preview from JSON without fully rendering the model?

Ideal Solution?

Ideally, I want a preview similar to what’s displayed on /app.speckle.systems/projects page – where moving the mouse from left to right creates the illusion of the model rotating (different camera views, by changing the image). But even generating a simple static image from a single camera view is a valid solution.

Would really appreciate any insights!

2

Ultimately the preview services utilises a puppeteer service so that’s what I can suggest for now.

2 Likes
4

Just to clarify, do you mean that I should follow the same process I described in my question (loading the entire model into the viewer and using viewer.screenshot()), but run the preview generation on the server using Puppeteer instead?

5

If you are running a frontend, the puppeteer doesn’t need a speckle server to run. It is headless chromium, so if your front end is accessible or just your viewer implementation, the puppeteer can interact with it, including running entirely locally.

The preview service is enabled by having an endpoint that can rotate the model to a specific degree, snapshot and add to the fake model rotation carousel. So if your react app also offers that, go for it.

That said there is also the snapshot function with viewer. depends what you are hoping for.

What would your screenshot be of if not the entire model?

6

I want to be able to request an endpoint on my server that returns a ready-made preview of the model. This could be a simple image from a single camera angle, but ideally, it would be a combined image containing multiple views, allowing me to simulate rotation using basic CSS styles when the cursor moves.

And yes, I do want a full-model screenshot - I was just wondering if it was possible to generate a specific-angle preview directly from JSON without loading it into the viewer.

This image only needs to be generated once, at the moment when I create the corresponding JSON on the backend, which contains the Speckle Base object. So, you’re probably right - since JSON creation happens on the backend, I might as well use Puppeteer there, load the model, take screenshots from different angles by adjusting the camera, and generate a single composite image. That way, I can simply retrieve it from my frontend when needed.

Previously, I was considering generating this preview on the frontend, but since Puppeteer Sharp exists and can be run in .NET, this approach seems like a better idea. I hope I won’t face any issues with my microservice that will be using Puppeteer Sharp.

Thanks for your help!

1 Like
7

we always love to see the cool things people are building with Speckle - please share more as you progress

1 Like