Render a snapshot image
This doc describes the workflow to render a 2D snapshot image of a product with specific configuration. A tangible example would be creating an image for a cart thumbnail.
Server side approach
The server side approach use the asset-jobs asset-jobs api to render the thumbnail and use the files api to retreive the thumbnail image.
- Render the thumbnail using webgl: it allows you to render the thumbnail using a specific configuration. You are able to access the fileId from the returning JSON.
- Once the rendering job is done, you should be able to use the image directly with: https://preview.threekit.com/api/files/{fileID}/content
Front end approach
The front end approach are simply capture the image from current player canvas. It is useful if you made some scene-gragh change without using configuration. For example, dynamically adding assets.
This can be achieved by using the front end snapshot API directly. The snapshot api will capture the image from current player canvas so you may want to switch to a specific or frame the camera before you take the snapshot:
- Get image via
await player.snapshotAsync()
- save configuration with
productId
,productVersion
andorgId
and snapshot intofiles
getConfiguration
withshortId
and retrieve the URL for uploaded snapshot
If you prefer to use url, you could upload the snapshot result to the platform using files api. And access the image file using the fileId the same way in Server side approach section.