27 Open-source WebGL Libraries and Framework

27 Open-source WebGL Libraries and Framework
Photo by Sean Do / Unsplash

WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within a web browser. It is based on OpenGL ES, a widely used standard for graphics rendering on embedded systems.

WebGL is commonly used for a variety of applications, including:

  • 3D Graphics: WebGL allows developers to create and display 3D graphics in a web browser, enabling the development of immersive experiences, games, simulations, and visualizations.
  • Data Visualization: WebGL provides a powerful platform for visualizing complex data sets, allowing for interactive and dynamic data presentations, charts, maps, and more.
  • Virtual Reality (VR) and Augmented Reality (AR): WebGL is a fundamental technology in building VR and AR experiences on the web, enabling the rendering of 3D content and interaction with virtual environments.
  • Product Configurators: WebGL is often used to create interactive product configurators, allowing users to customize and visualize products in real-time.
  • Architectural and Interior Design: WebGL is utilized to create virtual tours, interactive walkthroughs, and realistic 3D visualizations of architectural and interior design projects.
  • Educational Tools: WebGL can be used to develop interactive educational applications, simulations, and virtual laboratories.

In this post, you can find a list of the best open-source WebGL library for building graphic rich web application.

1- Three.js

Three.js is a JavaScript library that is used to create and display 3D computer graphics in a web browser. It provides a simple and intuitive API for developers to work with, allowing them to create interactive 3D experiences on the web.

GitHub - mrdoob/three.js: JavaScript 3D Library.
JavaScript 3D Library. Contribute to mrdoob/three.js development by creating an account on GitHub.

2- PixiJS

PixiJS is a 2D rendering engine that is commonly used for creating interactive and fast graphics in web applications. It is known for its simplicity and performance, allowing developers to easily create visually appealing and responsive 2D experiences on the web.

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

3- Babylon.js

Babylon.js is a powerful and feature-rich JavaScript framework for building 3D applications and experiences on the web. It provides a comprehensive set of tools and utilities for creating stunning 3D graphics, animations, and interactions in a browser environment.

Build software better, together
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 330 million projects.

4- tfjs

  1. https://github.com/tensorflow/tfjs

TensorFlow.js (TF.js) is a JavaScript library developed by TensorFlow that allows developers to run machine learning models and perform deep learning tasks directly in the browser. It provides a high-level API for building and training machine learning models, as well as pre-trained models for tasks like image classification and natural language processing.

GitHub - tensorflow/tfjs: A WebGL accelerated JavaScript library for training and deploying ML models.
A WebGL accelerated JavaScript library for training and deploying ML models. - GitHub - tensorflow/tfjs: A WebGL accelerated JavaScript library for training and deploying ML models.

5- Filment

Filament is a real-time physically based rendering engine for Android, iOS, Windows, and Linux. It is developed by Google and is designed to provide high-quality graphics rendering capabilities for mobile and desktop applications.

GitHub - google/filament: Filament is a real-time physically based rendering engine for Android, iOS, Windows, Linux, macOS, and WebGL2
Filament is a real-time physically based rendering engine for Android, iOS, Windows, Linux, macOS, and WebGL2 - GitHub - google/filament: Filament is a real-time physically based rendering engine f…

6- TWGL

twgl.js is a tiny WebGL helper library that simplifies the creation of WebGL applications. It provides a set of utility functions and abstractions to make working with WebGL easier and more efficient. twgl.js handles common WebGL tasks such as shader compilation, program linking, and buffer management, allowing developers to focus on creating 3D graphics and interactive experiences in the browser.

GitHub - greggman/twgl.js: A Tiny WebGL helper Library
A Tiny WebGL helper Library. Contribute to greggman/twgl.js development by creating an account on GitHub.

7- aframe

A-Frame is a web framework for building virtual reality (VR) experiences. It allows developers to create VR scenes and applications using HTML and a declarative entity-component system. A-Frame is built on top of three.js and provides an easy-to-use and accessible approach to VR development on the web.

GitHub - aframevr/aframe: :a: Web framework for building virtual reality experiences.
:a: Web framework for building virtual reality experiences. - GitHub - aframevr/aframe: :a: Web framework for building virtual reality experiences.

10- engine

PlayCanvas Engine is a JavaScript game engine that is specifically designed for building games and interactive experiences in the browser. It provides a wide range of features and tools for creating 3D games, including a powerful rendering engine, physics simulation, audio support, and asset management. PlayCanvas Engine is known for its performance and ease of use, making it a popular choice among game developers.

GitHub - playcanvas/engine: Fast and lightweight JavaScript game engine built on WebGL and glTF
Fast and lightweight JavaScript game engine built on WebGL and glTF - GitHub - playcanvas/engine: Fast and lightweight JavaScript game engine built on WebGL and glTF

11- bgfx - Cross-platform rendering library

bgfx is a cross-platform rendering library that provides high-performance graphics rendering capabilities. It is designed to be efficient and portable, allowing developers to create visually stunning graphics in a variety of applications, including games, simulations, and visualization tools. bgfx supports a wide range of rendering techniques and features, making it a versatile choice for graphics programming.

GitHub - bkaradzic/bgfx: Cross-platform, graphics API agnostic, “Bring Your Own Engine/Framework” style rendering library.
Cross-platform, graphics API agnostic, "Bring Your Own Engine/Framework" style rendering library. - GitHub - bkaradzic/bgfx: Cross-platform, graphics API agnostic, "Bring Your Own En…

12- Phaser - HTML5 Game Framework

Phaser is a fast, free, and open-source HTML5 game framework for building desktop and mobile games. It provides a comprehensive set of features and tools for game development, including physics simulation, audio support, input handling, and asset management. Phaser is known for its ease of use and flexibility, making it a popular choice among game developers.

GitHub - photonstorm/phaser: Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering. - GitHub - photonstorm/phaser: Phaser is a fun, f…

13- deck.gl

deck.gl is a WebGL-powered data visualization library for creating interactive and customizable visualizations on the web. It is designed to efficiently render large-scale data sets, allowing developers to create stunning and performant data visualizations. deck.gl provides a wide range of pre-built layers and effects, as well as powerful APIs for customizing and controlling the visualizations. It is commonly used for geospatial data visualization, 3D rendering, and immersive experiences.

GitHub - visgl/deck.gl: WebGL2 powered visualization framework
WebGL2 powered visualization framework. Contribute to visgl/deck.gl development by creating an account on GitHub.

14- PlayCanvas

PlayCanvas Engine is a JavaScript game engine that is specifically designed for building games and interactive experiences in the browser. It provides a wide range of features and tools for creating 3D games, including a powerful rendering engine, physics simulation, audio support, and asset management. PlayCanvas Engine is known for its performance and ease of use, making it a popular choice among game developers.

GitHub - playcanvas/engine: Fast and lightweight JavaScript game engine built on WebGL and glTF
Fast and lightweight JavaScript game engine built on WebGL and glTF - GitHub - playcanvas/engine: Fast and lightweight JavaScript game engine built on WebGL and glTF

15- Two.js

two.js is a JavaScript library that provides a simple yet powerful API for creating 2D graphics and animations in the browser. It is designed to be easy to use and understand, making it a great choice for beginners and experienced developers alike. With two.js, you can create shapes, lines, text, and more, and easily animate them using built-in functions and properties.

It is a lightweight library that focuses on performance and simplicity, allowing you to quickly prototype and build interactive 2D experiences on the web.

GitHub - jonobr1/two.js: A renderer agnostic two-dimensional drawing api for the web.
A renderer agnostic two-dimensional drawing api for the web. - GitHub - jonobr1/two.js: A renderer agnostic two-dimensional drawing api for the web.

16- react-map-gl

react-map-gl is a React component library for creating interactive and customizable maps using the WebGL-powered deck.gl data visualization library. It provides a declarative interface for building map-based applications and supports various map styles, overlays, and interactions.

With react-map-gl, developers can easily integrate maps into their React projects and incorporate data visualizations, markers, tooltips, and other interactive elements on the map. It is commonly used for geospatial data visualization, location-based applications, and mapping platforms.

GitHub - visgl/react-map-gl: React friendly API wrapper around MapboxGL JS
React friendly API wrapper around MapboxGL JS. Contribute to visgl/react-map-gl development by creating an account on GitHub.

17- melonJS 2

melonJS is a lightweight game engine for creating 2D games in HTML5. It provides a simple and efficient framework for building games that run on web browsers and mobile devices. melonJS offers features like entity management, sprite animation, collision detection, and input handling, making it suitable for developing platformers, RPGs, and other types of 2D games. It is known for its ease of use and performance optimization, allowing developers to focus on game design and mechanics.

GitHub - melonjs/melonJS: a fresh, modern & lightweight HTML5 game engine
a fresh, modern & lightweight HTML5 game engine. Contribute to melonjs/melonJS development by creating an account on GitHub.

18- regl

regl is a fast and lightweight WebGL library for creating interactive and high-performance graphics in the browser. It provides a simple and declarative API for working with WebGL, allowing developers to efficiently render complex 2D and 3D graphics.

regl focuses on performance optimization and provides a set of powerful features, including automatic state management, shader composition, and batch rendering. It is commonly used for building games, data visualizations, and other WebGL-powered applications.

GitHub - regl-project/regl: 👑 Functional WebGL
👑 Functional WebGL. Contribute to regl-project/regl development by creating an account on GitHub.

19- Globe.GL

Globe.gl is a JavaScript library that allows developers to create interactive and customizable 3D globes and maps in the browser. It is built on top of WebGL and provides a range of features for visualizing geospatial data, including markers, arcs, paths, and heatmaps. Globe.gl offers a simple and intuitive API for creating immersive and interactive globe visualizations, making it a popular choice for geospatial data visualization, data journalism, and educational purposes.

GitHub - vasturiano/globe.gl: UI component for Globe Data Visualization using ThreeJS/WebGL
UI component for Globe Data Visualization using ThreeJS/WebGL - GitHub - vasturiano/globe.gl: UI component for Globe Data Visualization using ThreeJS/WebGL

20- Gio.js

gio.js is a JavaScript library that allows developers to create interactive and visually stunning 3D globes and maps in a web browser. It is built on top of WebGL and provides a wide range of features for visualizing geospatial data, including custom markers, arcs, flows, and animations.

gio.js offers an easy-to-use API for creating immersive and interactive globe visualizations, making it a popular choice for data visualization, geographic analysis, and storytelling applications.

GitHub - syt123450/giojs: 🌏 A Declarative 3D Globe Data Visualization Library built with Three.js
🌏 A Declarative 3D Globe Data Visualization Library built with Three.js - GitHub - syt123450/giojs: 🌏 A Declarative 3D Globe Data Visualization Library built with Three.js

21- Online 3D Viewer

Online3DViewer is an open-source project hosted on GitHub. It is a web-based viewer that allows users to view and interact with 3D models in the browser. The viewer supports various file formats, including OBJ, STL, and GLTF, and provides features such as model rotation, zooming, and shading options. It is a useful tool for visualizing and inspecting 3D models without the need for specialized software.

GitHub - kovacsv/Online3DViewer: A solution to visualize and explore 3D models in your browser.
A solution to visualize and explore 3D models in your browser. - GitHub - kovacsv/Online3DViewer: A solution to visualize and explore 3D models in your browser.

22- LYGIA Shader Library

Lygia is a JavaScript library developed by Patricia González Vivo. It is a tool for creating generative art and graphics in the browser using WebGL. Lygia provides a set of functions and utilities for manipulating pixels and creating visual effects, allowing developers and artists to experiment with procedural generation and create unique and interactive visual experiences.

GitHub - patriciogonzalezvivo/lygia: LYGIA, it’s a granular and multi-language (GLSL, HLSL, WGSL, MSL and CUDA) shader library designed for performance and flexibility
LYGIA, it's a granular and multi-language (GLSL, HLSL, WGSL, MSL and CUDA) shader library designed for performance and flexibility - GitHub - patriciogonzalezvivo/lygia: LYGIA, it's a granu…

23- nunuStudio

nunuStudio is an open-source project hosted on GitHub. It is a web-based integrated development environment (IDE) for creating and publishing 3D and 2D games, simulations, and interactive applications.

nunuStudio provides a visual editor and a comprehensive set of tools for designing scenes, scripting behaviors, and managing assets. It supports various game development frameworks and libraries, including three.js, cannon.js, and A-Frame. nunuStudio aims to simplify the game development process and make it accessible to developers of all skill levels.

GitHub - tentone/nunuStudio: Web powered cross-platform 3D, WebXR game engine.
Web powered cross-platform 3D, WebXR game engine. Contribute to tentone/nunuStudio development by creating an account on GitHub.

24- Proton

Proton is a JavaScript particle animation library that allows developers to create dynamic and interactive particle effects in the browser. It provides a simple and flexible API for creating and controlling particle systems, allowing for the creation of various visual effects such as explosions, fire, smoke, and more. Proton is built on top of the HTML5 canvas element and is compatible with popular rendering libraries like Three.js, PIXI.js, and CreateJS.

GitHub - drawcall/Proton: Javascript particle animation library
Javascript particle animation library. Contribute to drawcall/Proton development by creating an account on GitHub.

25- COBE

COBE is an open-source project hosted on GitHub. It is a web-based code editor that runs entirely in the browser. cobe provides a lightweight and minimalistic environment for writing and testing code in various programming languages, including HTML, CSS, and JavaScript. It offers features like syntax highlighting, code formatting, and live preview, making it a convenient tool for web developers and learners to experiment and practice coding without the need for a local development environment.

GitHub - shuding/cobe: 5kB WebGL globe lib.
5kB WebGL globe lib. Contribute to shuding/cobe development by creating an account on GitHub.

26- LittleJS

LittleJS is an open-source project hosted on GitHub. LittleJS is a minimalistic JavaScript game engine designed for creating simple 2D games in the browser. It provides a lightweight and easy-to-use framework for game development, offering features such as sprite rendering, collision detection, input handling, and audio support.

LittleJS aims to be beginner-friendly and efficient, allowing developers to quickly prototype and build games with minimal overhead.

GitHub - KilledByAPixel/LittleJS: The Tiny JavaScript Game Engine That Can! 🚂
The Tiny JavaScript Game Engine That Can! 🚂. Contribute to KilledByAPixel/LittleJS development by creating an account on GitHub.

27- Lume

lume is an open-source project hosted on GitHub. It is a JavaScript library for building interactive and immersive web experiences using WebGL. lume provides a declarative API for creating 3D scenes and animations, allowing developers to easily manipulate and control objects in a 3D space. It supports various features such as lighting, materials, cameras, and shaders, making it a powerful tool for creating visually stunning and interactive web applications.

GitHub - lume/lume: Create 3D web applications with HTML. Bring a new depth to your DOM!
Create 3D web applications with HTML. Bring a new depth to your DOM! - GitHub - lume/lume: Create 3D web applications with HTML. Bring a new depth to your DOM!







Open-source Apps

9,500+

Medical Apps

500+

Lists

450+

Dev. Resources

900+