Snapshot

The Dopple Visual instance comes with a captureImage method that will take a snapshot of the 3D scene from the user’s current point of view. This will generate a PNG image, which can then be saved to the user’s device.

captureImage takes in an object with parameters for the filename, image size, and anti-aliasing settings.

JS
const renderCanvas = document.getElementById('my-canvas')

const captureSnapshot = () => {
    new Atlatl.Visual(renderCanvas).captureImage({
        name: 'my-filename', // ".png" will be appended to the end automatically
        sizeOptions: {
            height: 1080, // image height in pixels
            width: 1920 // image width in pixels
        },
        antialiasing: true // or false
    })
}

Full code example

HTML
JS

index.html
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Page</title>
        <!-- Link to Dopple's Visual API scripts -->
        <script src="https://builds.dopple.io/atlatl-visual-api/releases/current/index.js" defer></script>
        <!-- Link to custom scripts -->
        <script src="scripts.js" defer></script>
    </head>
    <body>
        <!-- Canvas to render the 3D scene to -->
        <canvas id="my-canvas"></canvas>
        <button id="snapshot-button">Capture snapshot</button>
    </body>
</html>

scripts.js

let visual
let myProduct
let namespace = 'my-namespace'
let name = 'my-product-name'

// Initialize Dopple Visual and load the product once the document is ready
window.addEventListener('load', async () => {
    const renderCanvas = document.getElementById('my-canvas')
    visual = new Atlatl.Visual(renderCanvas)
    
    // Replace with your client ID here
    await visual.initClient('a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5')

    // Create and load the ProductTemplate
    const template = new Atlatl.ProductTemplate(visual, namespace, name)
    await template.load()

    // Create the Product instance
    myProduct = new Atlatl.Product(template)
    
    // Hide the loading screen to show the product once the product is ready
    await myProduct.ready()
    visual.loadingScreen.hide()
})

// Capture a screenshot of the scene when the button is clicked
document.getElementById('my-canvas').addEventListener('click', () => {
    visual.captureImage({
        name: 'my-filename', // ".png" will be appended to the end automatically
        sizeOptions: {
            height: 1080, // pixels
            width: 1920 // pixels
        },
        antialiasing: true // or false
    })
})

Full code example​

Full code example