WebGL is JavaScript API/ library based on OpenGL that allows web browsers to render 3D/ 2D graphics in the browser without the need to install extra plugins, desktop apps, any third-party plug-ins or browser extensions. WebGL allows using the machine GPU through the browser to render 3D graphics into HTML pages. WebGL is currently supported in most of the modern web browsers like Google Chrome, Mozilla Firefox, & Safari. WebGL can be disabled or enabled through browser settings or the use of special plugins.

WebGL frameworks & libraries are used to create an interactive showcase, browser-based games, detailed scientific and medical visualization/ simulation, virtual reality (VR), & mixed reality (MR) applications.

WebGL is used in several industries like gaming, engineering, data analytics, geospatial analysis, scientific and medical visualization & simulation.

Features

Requires only web browser

Works on modern browsers

Does not require extra plugins or browser extensions

Works on mobile browsers

We have published several articles about new emerging medical imaging applications and DICOM browsers and frameworks which use WebGL to build web-ready applications:

1- The X Toolkit: Open source WebGL Browser-based 3D Scientific & Medical Visualization Framework

2- Med3Web: Free, Open source Browser-based DICOM viewer for 2D/ 3D Medical Visualization

3- BrainBrowser: Open source Web-based Brain Visualization with Volume & Surface viewers



1- Three.js: JavaScript 3D WebGL Library

Three.js is the most famous 3D WebGL JavaScript library in this list, It is used by thousands in developers for WebGL-based games, simulation, & even web sites. It has a simple learning curve, hundreds of demo & examples, a rich library of tutorials, & a powerful community. Three.js is used as a base for many WebGL graphics engines, and several browser-ready games engines. It features a powerful lightweight online editor.



The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.

Three.js is used in many games, scientific and medical visualization. It is used as a base of 2 WebGL medical DICOM visualization frameworks.

Three.js for medical and scientific projects:

AMI Toolkit

The X Toolkit

Med3Web

Miew: 3D Molecular Viewer

Highlights

Online editor

Easy learning curve

Large community

Used as a base for several WebGL game & graphics engines



2- Babylon.js: Web 3D Graphic Engine

Babylon.js Mesh rendering





Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

Babylon.js is a simple yet powerful WebGL powered 3D graphics engine, it provides easy-learning curve for JavaScript developer, simple API, and rich documentation and tutorials list. It can be used to build interactive 3D showcase/ presentation, 3D web-ready product presentation, games, VR (Virtual Reality) apps, and complex architecture simulation.

Babylon.js has a very large community of developers that supply its inventory of code snippets, tutorials, and of course re-usable extensions to extend its core functionalities.

Highlights

Sandbox

Online editor

Easy to setup

Rich examples list

Supports JavaScript & TypeScript

Rich snippets library

Modular and packed with many useful extensions

Extensible Modular online viewer

Features-rich engine

GUI tools.



3- Filament: Mobile-first WebGL framework by Google

Filament is a real-time physically-based renderer written in C++. It is mobile-first, but also multi-platform.

Filament is an open source WebGL Real-time 3D renderer built for Web. It uses C++ with an intention to be a mobile-first 3D platform. Filament is developed and released by Google as part of their open source projects. Though it targets multi-platform (Android, iOS, Linux, Mac OSX,& Windows) with mobile-focused intentions, it's not popular among developers yet. It's a fairly new library, but in time it may catch the attention of game developers.

Filament's demo

Highlights

Mobile-first (Android/ iOS) WebGL physics & 3D graphics engine

Supports Windows, Linux and Mac OSX

Material rendering

C++ built for best performance

4- KickJS: Open source Graphics & Game Engine for the Web

KickJS

KickJS is an open source (BSD license) WebGL game engine & 3D web graphics library built for modern web browsers. It has a simple learning curve for new developers as it comes with rich clear documentation, tutorials, and several game examples. As a game engine, KickJS supports mouse, keyboard, & gamepad controllers. It provides several tools for developers including Shader editor, Model tool, Extension viewer, and some game examples with clear code.

KickJS's on github

Highlights

Collada DAE and Wavefront OBJ models

Built-in shaders

Persistency model

View frustum culling

Shadow maps

Picking

Render to texture

Skybox

Movie texture

Directional light, point lights, and ambient lights

Event Queue

Keyboard and mouse input

Serialization

Context lost handling



5- ClayGL: Build Scalable Web3D applications

ClayGL: Examples

A WebGL graphics library for building scalable Web3D applications



ClayGL is a Web 3D graphics library for building 3D web-ready applications, like drawing an interactive 3D street map on real geo map. ClayGL is available as an open source project.

Highlights

Lightweight

Scaled graphics

Configurable for high-quality graphics

Supports zooming

Advanced Web viewer (Clay Viewer)

Easy to use and learn with an easy kickstart learning curve

Features highly detailed graphics with advanced and detailed materials

Rich set of examples.



6- PlayCanvas: Game and 3D Graphics Engine for the Web

PlayCanvas Editor

PlayCanvas is a lightweight fully featured 3D web game & graphics engine. It's the favorite WebGL 3D game engine among developers. It has an impressive list of features that provides game developers with everything they need to build a web-first graphic-rich game. PlayCanvas is used by many games developers, there are several successful games on the market. PlayCanvas is not built only for games but it can be used to build AR (Augmented Reality) & VR (Virtual Reality) applications.

PlayCanvas [github]

Highlights

lightweight

Fast loading

Mobile-browser support

Web-based graphics editor

AR (Augmented Reality) & VR (Virtual Reality) apps

GPU Particle engine with editor

Static, skinned and morphed meshes

Full model export pipeline from Maya, 3DS Max, Blender

Powerful audio library

Full integration with 3D rigid-body physics engine ammo.js

Input: Mouse, Keyboard, Touch, Gamepad, VR

Rich API documentation

Several games examples with the source code



7- WebGLStudio.js & Litescene.js: Open source Web 3D Graphic editor, & creator

WebGL Studio Editor

3D Development environment for the web.





Litescene.js is a simple yet powerful WebGL library that provides component-based node hierarchy, It provides simple JSON code that is easy to embed in web projects and used in WebGLStudio.js editor, which is an open source advanced 3D WebGL web-based editor. With WebGLStudio you can export the JSON file containing all the info and use it in your LiteScene. Litescene.js uses its own mini-library "Litegl.js" to warp WebGL components to make it more user-friendly by creating classes for managing different items like Buffer, Mesh, Texture, Shader and other common aspects of any WebGL applications.

WebGLStudio.js is a platform to create interactive 3D scenes directly from the browser.

It allows to edit the scene visually, code your behaviors, edit the shaders, and all directly from within the app.



Highlights

Easy learning curve

Powerful online

Component-based node system

Realistic rendering pipeline, it supports shadows, reflections, textures for all properties, etc

Material system that automatically computes the best shader, making it easy to control properties

Resources Manager to load and store any kind of resource ( textures, meshes, etc)

Serializing methods to convert any Scene to JSON

Parser for most common file formats

Easy to embed



8- Luma: 3D WebGL Visualization Library by Uber

Kepler.gl





Luma is an open source High-performance WebGL2 components for GPU-powered data visualization and computation. It's published and maintained by Uber as an open source project. it's getting continuous updates, It is used as a core WebGL engine for 2 frameworks:

Kepler.gl is a data-agnostic, high-performance web-based application for visual exploration of large-scale geolocation data sets.

Deck.gl WebGL2 powered geospatial visualization layers

You may wanna check other Uber's open source libraries at https://vis.gl/.

Highlights

Suitable for geospatial data (large data sets) visualization

9- A-Frame is a web framework for building VR (Virtual Reality) Experiences

A-Frame





A-Frame is an open source WebGL framework for building virtual reality (VR) applications. It is used by the world top companies like Disney, Google, Mozilla, NASA, Samsung, Sony, & Toyota. It's fairly easy to use as it also has an easy learning curve for experienced and beginners. A-Frame works smoothly in several VR platforms like Vive, Rift, on a desktop with modern browsers like Mozilla Firefox, & Google Chrome, & mobile phones with smooth performance.

Highlights

Built for Virtual Reality (VR) & Mixed Reality (MR)

Performs well on Mozilla Firefox, & Google Chrome

Works on mobile

Works with many VR platforms

Used by big companies, & brands in their VR/ MR projects



10- X3DOM: Build and Embed 3D elements in any web project





X3DOM Liver Browser

X3DOM is a WebGL framework for building embeddable 3D Web-ready graphics for website & web apps. It provides simple markup code that can be added to any HTML5 projects.

X3DOM Integrates 3D content seamlessly into your webpage - the scene is directly written into the HTML markup. No Plugins needed. Simply include a javascript file. Free for non-commercial and commercial purposes.



X3DOM [Github]

Highlights

Easy to use

Ready to embed in any HTML projects

Simple embeddable code

Works in many browsers including legacy IE and modern browsers like Google Chrome, Firefox, Safari

Works smoothly on mobile browsers: Safari IiOS), Google Chrome, & Mozilla Firefox

Can run on Python server or IIS Windows Server



11- Grimoire.js: A WebGL framework for Web development

Grimoire.js is an open source WebGL framework for building 3D web applications, it is aiming to provide a bridge between Web engineers and CG engineers.

Grimoire [Github]

Highlights

HTML like markup

DOM operation API

Typescript powered

Event & Loop ready

jQuery support

Custom Events

Well documented



13- PixiJS — The HTML5 Creation Engine

PixiJS

The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.



PixiJS is a 2D/ 3D web graphics engine that eases the creation of amazing interactive graphics applications for the web. It's a modular engine that can be extended easily through plugins, It is favored among web developers, 2D game creators, and big companies like Google, BBC, Volkswagen, HBO, Adobe, & Disney. It's best to create interactive complex 2D visualization, 2D games, and products showcase.

Highlights

Mobile support

Modern, & legacy browsers support

Lightweight

Fast

MULTI-PLATFORM SUPPORT

Simple and easy-to-use API

Multi-touch support

Text rendering

WebGL filters support

14- SceneJS

SceneJS: the Engine behind The Bio Digital Human

SceneJS is an open source (discontinued) WebGL-based graphics engine for high detailed 3D visualization. It's the core engine that makes The Bio Digital Human project ticks. Though the project is discontinued, and the BioDigitalHuman uses a heavily modified version (not open source), the old repository has been archived for WebGL educational purposes. SceneJS team has released a new library as production-ready library XeoGL.

15- XeoGL: SceneJS Successor

XeoGL Sample



SceneJS successor XeoGL is released from the same developer(s), It's data-driven WebGL graphics engine that comes with several tools aiming for easier CAD/ 3D integrations into web projects. It's aiming to provide a tool to build complex 3D WebGL graphics that run smoothly through modern browsers.

Features

Uses WebGL for rendering

Component-based scene graph

Written in ECMAScript 6

No external dependencies; library and tool agnostic

Open source (MIT).

Designed for CAD, BIM and ArchViz:

Load multiple models

Isolate/move/emphasize objects

Camera navigation controls

Camera animations (flyto, follow, path etc)

Emphasis effects (wireframe, ghost, highlight, outline)

Annotations

Cross-section views

Scene object hierarchies

Transform hierarchies

Bounding volumes

3D picking, raycasting

Screen capture

Imported formats:

glTF, STL, OBJ+MTL and SceneJS

Materials

PBR (metal/rough and specular/gloss)

Blinn/Phong and Lambert



16- CurtainsJS: JavaScript WebGL Animation Library

CurtainsJS Showcase

CurtainsJS is an open source WebGL library aiming to provide WebGL-based animation for web pages. It is not a graphics engine nor a gaming engine rather than a 3D animation & events based graphics library. It converts HTML based elements into 3D animated objects using WebGL-rendering library.

Highlights

Lightweight 34kb minified

HTML elements to interactive 3D elements

Dynamic Ajax elements

Easy to use for experienced and new web developers

17- PhiloGL

PhiloGL in Action

A WebGL Framework for Data Visualization, Creative Coding, and Game Development



PhiloGL is a WebGL Javascript framework for building interactive 3D complex graphics apps for Data Visualization, Creative Coding, and Game Development. It can be used with other libraries as it is library Agnostic. It's an open source project released under MIT license by SenchaLabs. It has several impressive demo projects http://www.senchalabs.org/philogl/demos.html with tutorials & code samples to help developers grasp its concept.

PhiloGL [Github]

More WebGL frameworks

Xeokit - WebGL SDK for BIM & Engineering

WhiteStormJS 3D Web framework (engine)

PicoGL: A minimal WebGL 2 rendering library

Feel free to contact us to recommend adding more libraries/ frameworks to this list.