Snake Render Engine

Snake Render Engine is a 2D render engine which wraps WebGL with a functional API, analogous to the well-known React UI library. It also supports JSX syntax and is Component based.

Here is a minimal example that highlights how to run it:

// In order to define components we need to import SRE
import SRE, { initRenderer, initWithRenderer, Rect } from "snake-render-engine";

// Get the host canvas where the engine will run
const canvas = document.getElementById("canvas");
const height = canvas.height;
const width = canvas.width;

const gl = canvas.getContext("webgl");

const render = initRenderer({ gl, width, height });
const run = initWithRenderer(canvas, render);

// Define a Scene Node that renders a simple rect and logs click events
const Scene = () => (
  <Rect x={320} y={200} z={0} width={640} height={100} onClick={console.log} />
);

// Start it
run(<Scene />);

Demos

Demos are available here

Getting started

Installation

• npm i nps -g (Optional: if not wanted, replace nps with npx nps in the commands below instead.)
• npm i

Running Locally

• nps demo - Serve demo locally to port 1234
• nps test - Run the tests

Testing

• nps test

Contributing

• Please file issues here
• Pull Requests welcome

Active Development

SRE is an actively developed work-in-progress tool. Please reach out on Github if you want to collaborate on this project!