@melco/renderer

JavaScript/TypeScript wrapper for the Melco RenderingLib WebAssembly module.

Install

npm install @melco/renderer

Quick start

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

// Create a canvas and add it to the DOM *before* attaching the WebGL context
const canvas = document.createElement("canvas");
canvas.id = "canvas1";
canvas.width = 500;
canvas.height = 500;
canvas.style.display = "block";
document.body.appendChild(canvas);

async function init() {
  // Initialize the WASM module, then create the renderer
  const sceneManager = await createSceneManager();
  const renderer = await createRenderer(canvas, sceneManager);

  const factory = renderer.getFactory();
  const scene = factory.createScene();

  // Load a design file
  const designUrl = "https://melcodemoapps.blob.core.windows.net/demo-assets/angel-wtext.rfm";
  const design = await factory.createDesignElement({ designMetadataUrl: designUrl });

  // Wait for the design to be fully loaded before reading metadata
  await factory.elementUtil.ensureElementLoaded(design);
  factory.elementUtil.ensureElementSynced(design);

  const meta = factory.elementUtil.getStitchElementMetadataIfLoaded(design);
  if (!meta) throw new Error("Design metadata not available");

  // Render the design
  scene.elements = [design];
  renderer.updateRenderScene(scene);

  const viewPort = ViewPortUtil.zoomToFit(meta.originalBoundingBox, 500, 500, 96, 10);
  renderer.setViewPort(viewPort);
  renderer.redraw();
}

init();

For runnable examples see melco-renderer-bootstrap.