#3d #gamedev #webassembly #opengl #webgl


A renderer which compiles to both desktop (OpenGL) and web (WebAssembly + WebGL)

8 releases (4 breaking)

0.5.1 Feb 21, 2021
0.5.0 Feb 9, 2021
0.4.2 Jan 19, 2021
0.4.0 Dec 28, 2020
0.1.0 Mar 22, 2020

#49 in WebAssembly

Download history 5/week @ 2020-11-07 2/week @ 2020-11-14 4/week @ 2020-11-21 6/week @ 2020-11-28 7/week @ 2020-12-05 3/week @ 2020-12-12 12/week @ 2020-12-19 14/week @ 2020-12-26 19/week @ 2021-01-02 11/week @ 2021-01-09 41/week @ 2021-01-16 4/week @ 2021-01-23 4/week @ 2021-01-30 25/week @ 2021-02-06 25/week @ 2021-02-13 24/week @ 2021-02-20

59 downloads per month

MIT license


Rust 5.5K SLoC // 0.0% comments GLSL 678 SLoC // 0.2% comments


What is it?

A 3D renderer which enables out-of-the-box build to both desktop (Rust + OpenGL) and web (Rust to WebAssembly using wasm-bindgen + WebGL2 bindings provided by the web-sys crate). This means you can develop a 3D application on desktop and easily deploy it on web!

Supported browsers

Chrome, Firefox, Edge and Safari (Safari requires enabling the "WebGL 2.0" experimental feature).


See asny.github.io/three-d/ for live examples.

Statues example Lighting example Spider example


Feature Description Examples [features]
Context Thin and low-level graphics abstraction layer which maps one-to-one with the OpenGL/WebGL2 graphics APIs.
Graphics concepts Modular abstractions of common graphics concepts such as buffer, texture, program and render target. Triangle, Mandelbrot
Camera Orthographic and perspective camera which has functionality for navigation and frustum culling queries. Mandelbrot, Statues, Fireworks
Light Light definitions which is put in a uniform buffer. Currently implemented light types are ambient light, directional light, spot light and point light. Directional and spot lights has functionality for shadow mapping. Statues, Lighting, Wireframe
Mesh A triangle mesh object with fixed vertex shader and customizable fragment shader for customizable lighting. Texture, Statues
Instanced mesh Similar to Mesh, except it is possible to draw many instances of the same triangle mesh efficiently. Wireframe, Fireworks, Forest
Skybox An illusion of a sky. Texture, Fog
Particles Particle effect with fixed vertex shader and customizable fragment shader. Fireworks
Imposters A level-of-detail technique to replace rendering high-poly meshes at a distance. A mesh is rendered from different angles into a set of textures and the textures are then rendered continuously instead of the high-poly meshes. Forest
Image effect A customizable effect applied to each pixel of a render target, for example fog or anti-aliasing. Fog
Phong forward pipeline Forward pipeline based on the phong reflection model supporting a very limited amount of lights with shadows. Supports colored, transparent, textured and instanced meshes. Statues, Fog, Forest phong-renderer
Phong deferred pipeline Deferred pipeline based on the phong reflection model supporting a performance-limited amount of directional, point and spot lights with shadows. Supports colored, textured and instanced meshes. Lighting, Wireframe, Texture phong-renderer
Runtime loading Loading any type of asset runtime on both desktop and web. Statues, Forest, Texture
3D model parsers Built-in parsers for .obj (using the wavefront-obj crate) and .3d files (a custom format). Statues, Forest, Texture 3d-io obj-io
Image parsers Most image formats are supported (using the image crate). Texture, Statues image-io
Window Default windows for easy setup and event handling. Currently glutin for cross-platform desktop and canvas for web. All glutin-window canvas

It is always possible to combine features, for example rendering particles followed by direct calls to the graphics context.



Build and run an example, in this case 'triangle':

$ cargo run --example triangle --release


Build and generate web output (webassembly, javascript and html files) into the pkg folder:

$ wasm-pack build examples/triangle --target web --out-name web --out-dir ../../pkg

Install a server that properly defines the application/wasm mime type for example:

$ npm install -g http-server

Start the server and go to http://localhost:8080 in a browser:

$ http-server

Desktop and Web:

Build and run an example on desktop and also generate web output (webassembly, javascript and html files) into the pkg folder:

$ ./examples/triangle/run 


Feature requests and bug reports are more than welcome, just open an issue or start a discussion. Contributions are highly appreciated, please feel free to reach out or simply create a pull request.


~93K SLoC