Mirage Engine

MirageEngine

An engine that mirrors HTML DOM elements to a WebGL scene in real-time.

MirageEngine directly mirrors HTML DOM elements to WebGL objects. It observes DOM mutations and synchronizes position, style, and content in real-time, allowing standard HTML elements to exist within a WebGL context.

Installation

npm install mirage-engine three

Usage

Live Demo

Use simple

import { Mirage } from "mirage-engine";

const target = document.querySelector("#target") as HTMLElement;

const mirage = new Mirage(target);

mirage.start();

Use option

import { Mirage } from "mirage-engine";

const target = document.querySelector("#target") as HTMLElement;
const container = document.querySelector("#container") as HTMLElement;

const mirage = new Mirage(target, {
  textQuality: "low", //default is "medium" (== 2) ("low" | "medium" | "high" | number;)
  mode: "duplicate", //default is "overaly" ("overlay" | "duplicate")
  container: container, //The container option is only available in "duplicate" mode.
});

mirage.start();

License | MIT © dltldn333