meowshapes

Renderer

The renderer in Meowshapes is responsible for setting up the THREE.js renderer as well as the HTML canvas and related components.


Setup

If you're using the meowshapes package, setup is pretty straight forward.

import { Renderer } from "meowshapes";

const renderer = new Renderer((ctx) => {
    // Draw 
});

document.body.appendChild(renderer.element());

Remember to dispose of the renderer when you're done to free up resources:

renderer.dispose();

Renderer options

In addition to the draw function, RendererOptions can be provided to further modify the renderer's behavior

const renderer = new Renderer(..., {
    // Determines whether the renderer's canvas should preserve its drawing buffer. This is necessary 
    // for certain features like taking snapshots of the renderer's content using the `getImage` 
    // method or setting the renderer to a static state using the `setStatic` method. Enabling 
    // this option may have performance implications.
    // 
    // Default is false.
    preserveDrawingBuffer: false,
    focusBehaviour: {
        // When true, the animation loop will only run when renderer is hovered
        //
        // Default is false
        onlyWhenHovered: true,
        // When true, the animation loop will pause when the renderer is not visible
        // in the viewport.
        // 
        // Can also be the object { enabled: boolean, threshold: number }, where threshold
        // is 0 to 1, representing the percentage of the renderer that needs to be visible 
        // before pausing.
        //
        // Default is true
        stopWhenNotVisible: true
    }
})

Renderer

method 
element(): HTMLDivElement
Returns the DOM element used by the inner THREE.js WebGLRenderer. Add this to your document to display the rendered content. The element tries to fill the size of its parent element.
method 
dispose(): void
Disposes of the renderer and its resources. After calling this method, the renderer should not be used anymore. Also removes the renderer's DOM element from the document if it was added.
method 
getImage(): HTMLImageElement
Returns an HTMLImageElement containing a snapshot of the current renderer content. This can be used to save the renderer output as an image or to use it elsewhere in the DOM. Note that the image is generated from the current content of the renderer's canvas, so it reflects the current state of the scene.
Example
const image = renderer.getImage();
document.body.appendChild(image);
method 
setStatic(isStatic: boolean): void
Sets the renderer to a static state, where the update loop is paused and a snapshot of the current content is displayed instead. This can be useful for performance optimization when the scene does not need to be updated frequently, or when you want to display a static image of the scene without the overhead of rendering it in real-time. This will however prevent the renderer from being resizable and will not update the snapshot when the scene changes.
param isStatic
Whether to set the renderer to a static state (true) or back to a dynamic state (false).
Example
renderer.setStatic(true);
meowshapes