three-dA 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!
Chrome, Firefox, Edge and Safari (Safari requires enabling the "WebGL 2.0" experimental feature).
See asny.github.io/three-d/ for live examples.
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':
console
$ cargo run --example triangle --release
Build and generate web output (webassembly, javascript and html files) into the pkg folder:
console
$ 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:
console
$ npm install -g http-server
Start the server and go to http://localhost:8080 in a browser:
console
$ http-server
Build and run an example on desktop and also generate web output (webassembly, javascript and html files) into the pkg folder:
console
$ ./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.