Skip to content

3D Drawing on the Web

October 6, 2023
April 8, 2016

A brief history of graphics on the web and WebGPU - Ashley's blog

mattdesl/graphics-resources: a list of graphic programming resources
The Pixel Factory on computer graphic, 3D and WebGL

gpu.js - GPU Accelerated JavaScript
TensorFire neural networks in the browser using WebGL

pmndrs/detect-gpu: Classifies GPUs based on their 3D rendering benchmark score allowing the developer to provide sensible default settings for graphically intensive applications.

WebGL

WebGL - Wikiwand

WebGL Stats
get.webgl.org test if your browser supports WebGL
chrome://gpu/
chrome://flags/

Techniques for Rendering Text with WebGL | CSS-Tricks
OpenGL 2 allows programmer to use shaders (GLSL) to control the pipeline. WebGL is a subset of OpenGL that works in browsers.

Basics of building 3D games on the Web ★ Mozilla Hacks – the Web developer blog
Basics of building 3D games on the Web ★ Mozilla Hacks – the Web developer blog

A brief introduction to WebGL - DEV Community
WebGL Essentials - Tuts+ Code Tutorials

WebGL Insights book

[NodeUp] 72 - A WebGL Show.

TojiCode: What's coming in WebGL 2.0
TojiCode: Using WebGL on Chrome (AKA: "Why don't I have the WebGLs?!?")
TojiCode: Holistic WebGL

TojiCode: How Blink has affected WebGL?
TojiCode: How Blink has affected WebGL, Part 2

Making WebGL Dance — Acko.net
3Dparallax/insight: A helpful Chrome extension for WebGL development

WebGPU

Replacement of WebGL and Three.js

Introducing WebGPU: Unlocking modern GPU access for JavaScript - YouTube
WebGPU: Unlocking modern GPU access in the browser - Chrome Developers
Chrome ships WebGPU - Chrome Developers

WebGPU :: Rendering the future in Real-Time - YouTube
WebGPU Tutorial - Advanced Graphics on the Web Course - YouTube freeCodeCamp, 2:06:29

Three.js

Three.js has internal float point representation of models, cannot be optimized
Have problem working with shaders (for lighting)

three.js - JavaScript 3D library
Introduction To Polygonal Modeling And Three.js – Smashing Magazine
three.js sketches - jagracar
unconed/threestrap: Minimal Three.js Bootstrapper
pmndrs/three-stdlib: 📚 Stand-alone library of threejs examples designed to run without transpilation in node & browser

three.js - Transparent objects in Threejs - Stack Overflow WebGL have issue doing alpha blending of two semi transparent objects
Understand 3D in Javascript (ThreeJS) in 5 minutes - Je suis un dev
Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s Tutorial - YouTube
Creating a game in Three.js - LogRocket Blog
Getting Started With Three.js. Importing your first 3D model into… | by Ilolo Izu | Apr, 2022 | Better Programming

Ecosystem

Theatre.js - animation toolbox for the web

LunchboxJS Vue 3 custom renderer for Three.js
Build 3D visuals in Vue with Lunchbox.js - LogRocket Blog

WhitestormJS Framework
WhitestormJS/whs.js: 🌪 Super-fast 3D framework for Web Applications 🥇 & Games 🎮. Based on Three.js

TWGL.js

TWGL.js, a tiny WebGL helper library
greggman/twgl.js: A Tiny WebGL helper Library
Intro to WebGL Programming using twgl. / Sumant Pattanaik / Observable

curtains.js

curtains.js | Home easy WebGL tool to animate images and videos
Animate Images and Videos with curtains.js | CSS-Tricks

Autonomous Visualization System (AVS)

AVS Home

streetscape.gl
aurora-opensource/xviz: A protocol for real-time transfer and visualization of autonomy data

Others

Zdog · Round, flat, designer-friendly pseudo-3D engine for canvas and SVG

regl.party

CopperLicht - JavaScript/WebGL 3D library

Game Engines

also capable of WebXR

PlayCanvas | 3D HTML5 & WebGL Game Engine

BabylonJS - 3D engine based on WebGL/Web Audio and JavaScript

Svelte

Svelte Cubed

React.js

d-Threeact: How the Sift Science Console Team Made d3 and React the Best of Friends — Sift Science Blog
D3 and React - the future of charting components? - Binary Consulting
React-d3 · Eric S. Bullington
React: Integrating 3rd-party visual components
Stateful Peanut Butter and SVG-elly: A React + D3 Tutorial
How to construct a heat map in React

React Three Fiber

Poimandres many WebGL related libraries

React Three Fiber Documentation
pmndrs/react-three-fiber: 🇨🇭 A React renderer for Three.js
pmndrs/drei: 🥉 useful helpers for react-three-fiber

pmndrs/react-three-next: React Three Fiber, Nextjs, Tailwind and Styled-components starter

@react-three/cannon
pmndrs/use-cannon: 👋💣 physics based hooks for @react-three/fiber

@react-three/p2
pmndrs/use-p2: 👋💣 2d physics hooks for @react-three/fiber

pmndrs/react-three-flex: 💪📦 Flexbox for react-three-fiber

Implementing 3D graphics in React
Build a 3D World in React with ThreeJS and React Three Fiber - YouTube

Animate a Camera Fly-through on Scroll Using Theatre.js and React Three Fiber | Codrops

VisGL

Vis.gl
Frameworks for WebGL-powered large-scale data visualization (powering Uber)

Home | deck.gl
visgl/deck.gl: WebGL2 powered visualization framework high-performance visualizations of large data sets

luma.gl
visgl/luma.gl: High-performance Toolkit for WebGL-based Data Visualization

visgl/hubble.gl: A client-side JavaScript library for animating data visualizations and rendering videos.

MathBox

Steven Wittens / mathbox · GitLab
MathBox² — Acko.net
MathBox² — Acko.net part 2

Voxel

voxel.js * blocks in yo browser
maxogden/voxel-engine: 3D HTML5 voxel game engine
s-macke/VoxelSpace: Terrain rendering algorithm in less than 20 lines of code
voxel.css

Voxel Rendering Techniques – Michael Fogleman – Medium

MagicaVoxel
Voxel Critter Creator

Plotz Model Selection

Showcase

Hackery, Math & Design — Acko.net
How I built a wind map with WebGL – Points of interest