A 3D renderer which enables out-of-the-box build to both desktop (Rust + OpenGL) and web (Rust to WebAssembly + WebGL2). This makes it possible to develop a 3D application on desktop and easily deploy it on web!
Chrome, Firefox, Edge and Safari (Safari requires enabling the "WebGL 2.0" experimental feature).
Several examples covering most features can be found here and they are live at asny.github.io/three-d/. Take a look at the triangle example for a gentle introduction.
| 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. | ||
| 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. Supports rendering the depth and also with a fixed color and with a texture (ie. no lighting). | Triangle, Mandelbrot | |
| 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 |
| GUI | Immidiate mode GUI support using the egui crate. | Lighting | egui-gui |
| 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 --releaseBuild 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 ../../pkgInstall a server that properly defines the application/wasm mime type for example:
$ npm install -g http-serverStart the server and go to http://localhost:8080 in a browser:
$ http-serverFeature 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.