aboeglin / snake-render-engine

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!

snake-render-engine's Issues

Optimization ideas

Use workers

Partial vtree update

Only re-compute parts of the tree that actually have changed since the last iteration.

Events / lifecycle seem not to work for root component.

Add circleci config with test job

Fix circular dependency between spark and core

Make a good demo and add styling around it

Create a withClock HOC that will give time to components that need it

Like this we have a unified way to access time-based functionalities across nodes and it would take care of updating components that use it as it would trigger a new update.

Make tests more dry

Add README for the render engine

ROADMAP

v1

• State for Nodes
• Event handling
• Add color to primitives
• Transform Node
• Name for the project
• Error messages
• Warnings for DEV env

Required:

• Contribution guide
• Demo up to date that actually shows something
• Api documentation ( state, lifecycles, props, ... )
• Comment on current limitations ( No Fragment support, limited Sprite, ... )
• Add auto deploy of new versions to npm

v2

• Context
• Circle
• Line
• ( particle-system ) - Probably more for v2.
• Camera
• ( Light ) - Not that important for 2D.
• Finish Sprite - Add sprite sheet options.
• AnimatedSprite
• Document installation, contribution, usage
• Update and fix clock
• More TBD ?