JavaScript Graphics and Game Frameworks to Inspire in 2021

With each year that passes, I’m continuously amazed how JavaScript capabilities and tooling progress. Here are some graphics and gaming framework focused on web delivery to inspire.

Vis.gl

Vis.gl is a suite of composable, interoperable open source geospatial visualization frameworks centered around deck.gl.

Uber Advanced Technologies Group Demo

Created by Uber, it’s under open governance by Linux Foundation and Urban Computing Foundation.

The vis.gl frameworks are designed for GPU powered geospatial visualization and analytics on the web. The frameworks are designed to be independently usable while following a common style that makes them work seamlessly together.

• Website: https://vis.gl/
• GitHub: https://github.com/visgl
• Framework Catalog: https://vis.gl/frameworks/

Deck.gl

WebGL-powered framework for visual exploratory data analysis of large datasets allowing for complex visualizations to be constructed by composing existing layers.

By emulating 64-bit floating point computations in the GPU, deck.gl renders datasets with unparalleled accuracy and performance.

Autonomous Visualization System

• Website: https://deck.gl/
• Examples: https://deck.gl/examples
• Showcase: https://deck.gl/showcase

Kepler.gl

Powerful open source geospatial analysis tool for large-scale datasets, using Redux to manage state.

• Website: https://kepler.gl/
• GitHub: https://github.com/keplergl/kepler.gl

Nebula.gl

High-Performance, 3D-enabled GeoJSON editing deck.gl and React.

• Website: https://nebula.gl/
• GeoJSON Editor: https://nebula.gl/geojson-editor/
• GitHub: https://github.com/uber/nebula.gl

PlayCanvas

Commercial with open source web-first game engine to collaboratively build stunning HTML5 games and visualizations featuring an in-browser WebGL editor with live updates across multiple devices.

• Website: https://playcanvas.com/
• GitHub: https://github.com/playcanvas/engine

Three.js

Lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples.

GLTF Loader example

• Website: https://threejs.org/
• Examples: https://threejs.org/examples/
• Editor: https://threejs.org/editor/
• GitHub: https://github.com/mrdoob/three.js/

Babylon.js

Real time 3D engine for displaying 3D graphics in a web browser via HTML5 featuring WebGL and WebGPU engines.

Babylon features live samples with code editor via the playground:

Babylon Playground

• Website: https://www.babylonjs.com/
• Playground: https://playground.babylonjs.com/
• Demos: https://www.babylonjs.com/community/
• GitHub: https://github.com/BabylonJS

Phaser

Open source 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

• Website: https://phaser.io/
• GitHub: https://github.com/photonstorm/phaser/tree/v3.55.2

Pixi.js

2D HTML5 content creation engine.

• Website: https://pixijs.com/
• Examples: https://pixijs.io/examples/#/demos-basic/container.js
• GitHub: https://github.com/pixijs

Cocos2D-X

Open Source Cross-Platform Game Development Framework for 2D and 3D game creation providing rendering, GUI, audio, network, physics, and user input. Also featured is Cocos Creator, a suite of developer tools for game logic and high-performance game creation.

• Website: https://www.cocos.com/en/
• Cocos Creator Engine: https://github.com/cocos-creator/engine
• GitHub: https://github.com/cocos2d/cocos2d-x

Impact

HTML5 game engine for desktop and mobile, featuring Weltmeister Level Editor that lets you create your game worlds.

• Website: https://impactjs.com/
• GitHub: https://github.com/phoboslab/Impact

MelonJS

Open source HTML5 game engine empowering developers and designers to focus on content, featuring a collection of composable entities.

Platformer example

• Website: https://melonjs.org/
• GitHub: https://github.com/melonjs/melonJS
• Examples: https://melonjs.github.io/examples/

GDevelop

Open source builder to create games with one-click publishing to web, iOS, Android, Stream, Facebook, Windows store and more.

• Website: https://gdevelop-app.com/
• GitHub: https://github.com/4ian/GDevelop

Construct

Visual scripting with no code required, or optionally combine blocks with JavaScript for further control.

• Website: https://www.construct.net/en

Crafty JS

Flexible framework for Javascript games.

Code Commander example

• Website: https://craftyjs.com/
• GitHub: https://github.com/craftyjs/Crafty

Kiwi.js

Mobile & desktop browser based HTML5 game framework using CocoonJS for publishing to the AppStore.

• Website: http://www.kiwijs.org/
• Examples: http://www.kiwijs.org/examples/
• GitHub: https://github.com/gamelab/kiwi.js

Blacksmith 2D

Lightweight HTML 5 2D game engine.

Arcade physics Mario example

• Website: blacksmith2d.io
• GitHub: https://github.com/MassiveHeights/Black

Stencyl

Create games without code and publish to iOS, Android, Windows, Mac, Linux, and web.

• Website: https://www.stencyl.com/
• GitHub: https://github.com/Stencyl

RPG Maker

Tools and assets for making games for beginners to developers.

• Website: https://www.rpgmakerweb.com/

D3

JavaScript library for manipulating documents based on data, bring data to life using HTML, SVG, and CSS.

• Website: https://d3js.org/
• Graph gallery: https://www.d3-graph-gallery.com/
• Observable: https://observablehq.com/explore
• Blocks examples: https://bl.ocks.org/
• GitHub: https://github.com/d3/d3

GoJS

Web framework for rapidly building interactive diagrams.

• Website: https://gojs.net/
• Samples: https://gojs.net/latest/samples/

Fabric.js

Canvas library and parser enabling editing through scene manipulation.

• Website: http://fabricjs.com/
• Demos: http://fabricjs.com/demos/
• GitHub: https://github.com/fabricjs/fabric.js

Two.js

Two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and WebGL.

Land on the Moon examples

• Website: https://two.js.org/
• Examples: https://two.js.org/examples/
• Projects: https://two.js.org/projects/
• GitHub: https://github.com/jonobr1/two.js/

P5

Empowering artists, designers, students, and anyone to learn to code and express themselves creatively on the web.

Spirograph Example

• Website: p5js.org
• Examples: https://p5js.org/examples/
• Editor: https://editor.p5js.org/
• GitHub: https://github.com/processing/p5.js/

Note that no frameworks are needed to create amazing HTML5 experiences by leveraging canvas or shaders directly via JavaScript.

Happy Jumping Shader Toy

For more on shaders:

• Shader Toy: https://www.shadertoy.com/
• Book of Shaders: https://thebookofshaders.com/
• Book of Shader Editor: http://editor.thebookofshaders.com/

Finally, note that web delivery is possible through other frameworks such as Unity by setting a build target to produce HTML5 WebGL via JavaScript and WebAssembly.

Unity

2D / 3D VR and AR engine for gaming, film, animation, and beyond.

• Website: https://unity.com/
• Asset Store: https://assetstore.unity.com/
• Learning: https://learn.unity.com/