This library is currently in active development. Feel free to use it, but do so with the knowledge that APIs are likely to change without consideration for backwards compatibility.
Wrend is a wrapper library around raw WebGL2 code and is written in Rust, which then gets compiled to WebAssembly for running in the browser. Its goal is to make working with WebGL more convenient when writing Rust and/or JavaScript/TypeScript code. Though most of the demo app examples are built using Yew, wrend itself is framework agnostic and is designed to be used in a variety of settings with diverse rendering pipelines. See the examples directory of the repo for examples.
If you're wondering about the name, wrend is short for WebGL2 Rendering Library.
This library exists because I found myself writing the same verbose, (occasionally unsafe) WebGL code over and over again, often struggling to find the right level and type of abstraction over WebGL calls. Wrend is designed to ease the pain of working with low-level WebGL programming in Rust. This includes abstraction over requestAnimationFrame calls, making continuous animations as simple as calling start_animating and then holding the returned handle in memory. Stopping is also as easy as dropping the returned renderer handle and/or calling stop_animating.
Another strength of Wrend is its flexibility: rather than focusing on more common 3D rasterization techniques, Wrend enables constructing unique graphics pipelines for things like ray tracers, flow fields, and other non-traditional methods of rendering.
sh
npm i wrend
sh
yarn add wrend
Note: if you are using Vite as your bundler, you must configure a few things in your vite.config.js file:
```js // vite.config.js import wasm from "vite-plugin-wasm";
export default {
optimizeDeps: {
// must exclude wrend from Vite's automatic optimization
// to prevent weird initialization errors from the wasm module
exclude: ['wrend']
},
plugins: [
// this plugin is necessary to support npm modules that
// are generated with wasm-pack
wasm(),
]
};
```
Add wrend as a dependency to your crate's Cargo.toml file:
```toml
[dependencies] wrend = "0.2.0" ```
To see a list of simple, self-contained TypeScript and Rust projects that use wrend, see:
To see a list of more extensive demos that exhibit what is possible with the wrend library see:
Realtime ray tracer written from scratch, inspired by the Ray Tracing in One Weekend series by Peter Shirley and adapted for use with Rust & WebGL.
I initially started this project as a software ray tracer running on Rust/WASM alone, but the render times that I experienced were so frustratingly slow that I quickly looked into implementing a hardware ray tracer that could take better advantage of the GPU's parallelization power. Once I switched to using WebGL2, render times went from around 1-6 minutes for a decent render to less than a second, and I was able to implement some realtime ray tracing elements like moving the camera, etc. by averaging many low-sample frames together rather than calculating them all at once (progressive rendering).
100,000 particles moving across the canvas, dropping pigment as they move. The movement of the particles is determined by a 2D noise texture generated at runtime.
The classic.
This is similar to the classic Conway's Game of Life, except it uses an 11x11 convolution kernel (rather than the classic 3x3) to calculate the next state of each cell. This results in more organic, formations that behave surprisingly similar to the original.
There aren't any formal processes in place for contributing yet, as wrend is a very young project, but if you're interested in contributing, please feel free to reach out.
nvm or nvm-windows (see .nvmrc for compatible Node version)
npm at the same time```bash
cd wrend
npm run prepublish
cd dist
npm login
npm publish ```
```bash
cd wrend
cargo test
cargo package
cargo publish ```