Need help with three-d?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

asny
181 Stars 13 Forks MIT License 1.8K Commits 1 Opened issues

Description

A renderer written in Rust which compiles to both desktop (OpenGL) and web (WebAssembly + WebGL).

Services available

!
?

Need anything else?

Contributors list

No Data

three-d

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).

Examples

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

Statues example Lighting example Spider example

Features

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

Desktop:

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

console
$ cargo run --example triangle --release

Web:

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

Desktop and Web:

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 

Other

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.