cross-engine vfx library
npm install mondlich
https://github.com/user-attachments/assets/2f695f0e-a9a6-4e57-9101-600cca9800d7
yarn add mondlich`or
`npm install mondlich`Basic usage
$3
`
const canvas: HTMLCanvasElement = document.createElement('canvas');const { gl, canvas } = createWebGLCanvas({
...DEFAULT_CANVAS_SIZE,
containerId: 'app',
});
configureRenderingContext({
gl,
...DEFAULT_CANVAS_SIZE,
});
`$3
`
const manager = new ParticleEffectsManager();
await manager.textureManager.loadTextureLibrary();const engine = new MondlichEngine(canvas);
/*
For engines whose adapters are not represented in the library, you may implement your own adapters
(See EngineAdapter interface)
*/
const adapter = new MondlichAdapter(engine);
manager.setAdapter(adapter);
`$3
`
// 3. Prepare camera state
engine.camera.moveEye([0, -550, -20]);
engine.camera.moveLookAt([0, -1100, -500]);
`$3
`
const fire = manager.createFire({
particlesCount: 20000,
spawnFramespan: 1,
});
`$3
`
manager.setWorkerEnabled(fire, true);
`$3
`
fire.start();const loop = async () => {
await manager.update();
userInput.update();
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
manager.render();
requestAnimationFrame(loop);
};
loop();
``