@epimodev/photon

v0.0.1

Published

a year ago

## Motivation

0High
0Medium
0Low

epimodev-user

Photon a WebGL engine dedicated for 2D rendering

Motivation

The goal of this new lib is creating a lightweight webgl engine dedicated for creative animations with images.
There is already curtains.js which is great for this but I wanted a different API for:

loading and set textures
add postprocessing
use GPGPU

Installation

npm install @epimodev/photon
# or with pnpm
pnpm install @epimodev/photon
# or with yarn
yarn add @epimodev/photon

Setup

First you've to add a canvas with the id photon-canvas in your page here is an example with HTML but this can be done with any framework:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>My website</title>
	</head>
	<body>
		<canvas id="photon-canvas"></canvas>
		<div id="root"></div>
		<script type="module" src="/src/index.tsx"></script>
	</body>
</html>

Then you can get the instance by just calling getWebglEngine from the package:

import { getWebglEngine } from "@epimodev/photon";

const engine = getWebglEngine();
// The canvas isn't automatically resized so you've to setup resizing depending on your needs
window.addEventListener("resize", () => {
	engine.resize();
});

// You can render only when needed with the render method
engine.render();

// Or you can start a render loop
getWebglEngine().startRenderLoop();

// And you can stop it with
getWebglEngine().stopRenderLoop();

Create a plane

import { getWebglEngine } from "@epimodev/photon";

const engine = getWebglEngine();

const plane = new Plane({
	vertexShader, // a string generated as you want
	fragmentShader, // a string generated as you want
	uniforms: {
		time: { name: "u_time", type: "1f", value: 0 },
	},
});

engine.addPlane(plane);

engine.render();

Add a texture

Texture can be added as a simple uniform. You can set it as null while loading (it will be a black texture) and then set it when it's loaded.

import { getWebglEngine } from "@epimodev/photon";

const engine = getWebglEngine();

const uniforms = {
	time: { name: "u_time", type: "1f", value: 0 },
	img: { name: "u_img", type: "sampler2D", value: null },
};

const texture = await loadTexture(url, engine);

uniforms.img.value = texture;

const plane = new Plane({
	vertexShader, // a string generated as you want
	fragmentShader, // a string generated as you want
	uniforms,
});

Create a plane placed on a DOM element

If you want a plane which fits with a DOM element and moves automatically on layout change, you can use DomDomPlane.

For example you can use it to add morphing effect on an <img> tag

import { getWebglEngine } from "@epimodev/photon";

const engine = getWebglEngine();

const img = document.querySelector("img");

const plane = new DomPlane({
	target: img,
	uniforms,
	fragmentShader,
	// no need vertex shader because Photon generate a shader positioning the plane on the DOM element automatically
});

Add postprocessing

You can add postprocessing easily with the PostProcessing class.

import { getWebglEngine } from "@epimodev/photon";

const engine = getWebglEngine();

const effect1 = new PostProcess({
	fragmentShader,
	uniforms,
});
const effect2 = new PostProcess({
	fragmentShader,
	uniforms,
});

engine.addPostProcess(effect1);
engine.addPostProcess(effect2);
// You can add as many postprocess as you want

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme