@melco/renderer v0.3.1-3

To Use package import {@link createRenderer} from @melco/renderer to attach to canvas.

Once attach create renderer, can render by:

  import {createRenderer} from "@melco/renderer";
  let renderer = await createRenderer(myCanvas);

Render design:

import {createRenderer, ViewPortUtil} from "@melco/renderer"

let createCanvas = () => {
    const canvas = document.createElement('canvas');
    canvas.id = 'canvas1';
    canvas.width = 500;
    canvas.height = 500;
    canvas.style.display = "block";
    return canvas;
}
let initApp = async () => {
    // create simple canvas element and add to DOM
    const canvas = createCanvas();
    document.body.appendChild(canvas);

    // Canvas should be added to DOM before attach webgl context
    let renderer = await createRenderer(canvas);
    let elementFactory = renderer.getFactory();
    let scene = {};

    // download a design file
    let url = 'https://teststitchenginepublic.blob.core.windows.net/rendercache/designcache/Anchor.rfm';

    let design = await elementFactory.createDesignElement({designMetadataUrl: url}); 
    let boundingBox = elementFactory.elementUtil.getStitchElementMetadataIfLoaded(design).originalBoundingBox

    // create scene with design and background color
    scene.elements = [design];
    scene.bgColor = {red: 200, green: 200, blue: 200, alpha: 255};
	  let viewPort = ViewPortUtil.zoomToFit(boundingBox, 500, 500, 96, 10);
    renderer.setViewPort(viewPort);
    console.log(scene)
    renderer.updateRenderScene(scene);
    renderer.redraw();


    // store in global state
    window['render_app_data'] = {
      renderer: renderer
    }

    console.log('Successfully initialized')
}

initApp();