WebGL
WebGL (Web Graphics Library) is a JavaScript API based on the OpenGL ES standard that enables GPU-accelerated rendering of 2D and 3D graphics directly in the browser without requiring any plugins. Specified by the Khronos Group, it operates as a drawing context for the HTML5 Canvas element and supports writing shader programs in GLSL. It is widely used in browser-based games, data visualization, and interactive graphics application development.
Core Facts
Three.js is currently the most mainstream WebGL wrapper library, created and open-sourced by Ricardo Cabello (Mr.doob) in 2010.
WebGPU is a W3C-standardized browser graphics and compute API that was officially released in Chrome in 2023, designed to replace WebGL.
When large models generate dynamic videos, they are more likely generating code that describes the animation (such as Canvas, SVG, CSS animations, or animation frameworks) rather than directly rendering pixel-level video.
Timeline (last 90 days)
Interactive 3D exploded views are a presentation method based on WebGL or similar 3D rendering technologies, in which users can rotate and disassemble models by dragging with the mouse and zooming with the scroll wheel.
A 3D parallax effect can be achieved using CSS's transform: perspective() and translateZ(), or by listening to mouse/scroll position to change the displacement speed of different layers, without needing heavy libraries like WebGL or Three.js.
Browser games are typically built on HTML5, CSS, and JavaScript (or TypeScript), can use the Canvas API for 2D rendering, call the GPU via WebGL for 3D graphics, and use the Web Audio API for sound effects.
The large-model test of "writing code to generate 3D content" examines the model's ability to generate runnable HTML/JavaScript code (often with the help of WebGL libraries such as Three.js) and have 3D scenes rendered in real time by the browser.
TensorFlow.js and ONNX.js both use WebGL or WebAssembly to accelerate computation, enabling restaurants to implement food image recognition on the client side without building their own GPU servers, reducing deployment costs and protecting user privacy.
WebGPU exposes concepts such as explicit render pipelines, compute shaders, and bind groups to JavaScript; its API is closer to the hardware with a lower level of abstraction, and its boilerplate code for a minimal triangle is far greater than WebGL's.
Argon built a complete GPU hair rendering and physics system with three.js, iterating from WebGL to WebGPU for performance gains, and added an automatic degradation fallback mechanism.
In a harness with terminal access to a local DGX Spark GPU node, Argon first reproduced a research paper on growing neural cellular automata, implemented an exact 8,000-parameter model in PyTorch, trained it on the GPU, cut off half of the organism's body to verify self-healing, and then ported the trained weights to an interactive WebGL shader, taking 23 minutes total from paper to a usable browser demo, with the browser shader and the PyTorch model matching to five decimal places.
In the task of reproducing the growing neural cellular automata paper, Argon took 23 minutes from reading the paper to generating a runnable browser demo, and the matching accuracy between the shader and the PyTorch model reached five decimal places.
Implementing real-time camera interaction in the browser typically requires combining WebGL or WebGPU for real-time rendering, using WebAssembly to run computer vision models (such as MediaPipe and TensorFlow.js), and handling low-latency transmission through WebRTC.
40 more timeline events
All Facts (20)
Three.js is currently the most mainstream WebGL wrapper library, created and open-sourced by Ricardo Cabello (Mr.doob) in 2010.
80%VerifiedWebGPU is a W3C-standardized browser graphics and compute API that was officially released in Chrome in 2023, designed to replace WebGL.
80%VerifiedWhen large models generate dynamic videos, they are more likely generating code that describes the animation (such as Canvas, SVG, CSS animations, or animation frameworks) rather than directly rendering pixel-level video.
65%VerifiedThree.js includes functional modules such as scene management, camera control, lighting systems, and material rendering, and is the de facto standard tool for 3D visualization on the web.
65%VerifiedCompared to WebGL, which is based on OpenGL ES, WebGPU introduces compute shaders, a more fine-grained resource binding model, and pipeline state management, allowing general-purpose parallel computing tasks (GPGPU) to be executed on the GPU.
65%VerifiedBrowser-side 3D rendering of large numbers of objects uses Instanced Rendering technology, which merges multiple instances of the same geometry into a single draw call.
65%VerifiedThe Canvas 2D context is CPU-based software rendering, suitable for simple 2D scenes; WebGL leverages GPU acceleration and is suited for high-performance rendering needs such as particle systems and lighting effects.
65%VerifiedWebGPU, as the next-generation successor to WebGL, officially landed in Chrome in 2023, delivering performance closer to that of native graphics APIs.
65%Verified3Blue1Brown uses its self-developed animation engine Manim, which was later open-sourced and widely adopted by academia for mathematical visualization.
65%VerifiedWebGPU是W3C正在推进的新一代Web图形与计算API标准，旨在替代WebGL，对标Vulkan、Metal、Direct3D 12
65%VerifiedThree.js abstracts the underlying WebGL graphics API into a scene graph model, allowing developers to build 3D scenes without directly writing GLSL shader code.
65%UnverifiedFigma采用WebGL渲染引擎将矢量图形处理搬到浏览器端
85%UnverifiedFigma基于WebGL的渲染引擎支持复杂矢量图形的实时操作
85%UnverifiedFigma等现代设计工具倾向于使用WebGL加速渲染，以处理复杂场景下的性能瓶颈
85%UnverifiedThe widespread adoption of WebGL and WebGPU allows shaders to run directly in the browser without installing plugins.
60%UnverifiedHTML5相比HTML4引入了语义化标签、原生音视频支持、Canvas/WebGL图形API以及本地存储等能力
60%Unverified360°全景查看器基于等距柱状投影或立方体贴图的图像渲染原理，通过WebGL等前端框架实现
60%UnverifiedQuip生成的游戏代码通常基于Web技术如JavaScript/Canvas或WebGL
55%UnverifiedInteractive 3D exploded views are a presentation method based on WebGL or similar 3D rendering technologies, in which users can rotate and disassemble models by dragging with the mouse and zooming with the scroll wheel.
50%UnverifiedA 3D parallax effect can be achieved using CSS's transform: perspective() and translateZ(), or by listening to mouse/scroll position to change the displacement speed of different layers, without needing heavy libraries like WebGL or Three.js.
50%