chinedufn/webgl-water-tutorial

Stars
477
Rank 92,112 (Top 2 %)
Language
Rust
License
Apache License 2.0
Created almost 6 years ago
Updated over 2 years ago

chinedufn/webgl-water-tutorial

chinedufn

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

The source code for a tutorial on rendering water using WebGL + Rust + WebAssembly

WebGL Basic Water Tutorial

If you have any questions or run into any stumbling blocks please feel free to open an issue!

Read the tutorial

# You can use any static file server that properly sets the
# `application/wasm` mime type
cargo install https

git clone https://github.com/chinedufn/webgl-water-tutorial
cd webgl-water-tutorial

# A version of Rust that can compile wasm-bindgen-cli version 0.2.29
cargo install -f wasm-bindgen-cli --version 0.2.29 # Or download a release binary

# Build
./build.sh

## Opens your browser to http://localhost:8000  where the demo will be running
http -m wasm:application/wasm

See Also

ThinMatrix's OpenGL Water Tutorial - Heavily inspired this WebGL implementation
Landon - Used for exporting meshes and armatures from Blender
Binaryen - WASM compiler and toolchain infrastructure library

percy

Build frontend browser apps with Rust + WebAssembly. Supports server side rendering.

swift-bridge

swift-bridge facilitates Rust and Swift interop.

psd

A Rust API for parsing and working with PSD files.

dipa

dipa makes it easy to efficiently delta encode large Rust data structures.

skeletal-animation-system

A standalone, stateless, dual quaternion based skeletal animation system built with interactive applications in mind

landon

A collection of tools, data structures and methods for exporting Blender data (such as meshes and armatures) and preparing it for your rendering pipeline.

collada-dae-parser

Parse collada .dae 3d animation files into a WebGL friendly JSON format

cross-compile-rust-from-mac-to-linux

An example of how to cross compile Rust from `macOS` to Linux `x86_64-unknown-linux-gnu`

rectangle-pack

A general purpose, deterministic bin packer designed to conform to any two or three dimensional use case.

blender-iks-to-fks

A Blender script that takes a mesh and armature that use IKs and other non-deformation bones and creates a new mesh and armature that uses only FK bones.

hot-app-replacement

Like hot module replacement but... yeah you'll see

blender-webgl-hot-reload-experiment

An experiment in hot reloading 3d models from Blender into a WebGL scene

blender-actions-to-json

Write the joint data for all of a `.blend` file's actions to a JSON file

webgl-particle-effect-tutorial

A tutorial for creating a WebGL fire particle effect using billboarded quads

wavefront-obj-parser

An api and cli for parsing wavefront .obj files into JSON

webgl-shadow-mapping-tutorial

A WebGL shadow mapping tutorial

mat4-to-dual-quat

Convert a 4x4 matrix into a dual quaternion. Useful for skeletal animation (dual quaternion linear blending)

virtual-progress-bar

virtual-dom progress bar component

virtual-loading-dots

virtual-dom loading dots component

webgl-skeletal-animation-tutorial

A quick tutorial on WebGL skeletal animation using small modules

watertight-ray-triangle-intersection

An implementation of the Watertight Ray/Triangle Intersection algorithm

solid-state

Trigger listener functions when your state changes

blender-webgl-skinned-hot-reload-experiment

An experiment in hot reloading skinned models from Blender to WebGL

dom-filenameify

Add filenames as attributes to your DOM elements to help locate them in code by inspect-elementing them in the browser

webgl-unit-test-tutorial

The source code for a tutorial on unit testing WebGL components

image-to-heightmap

Convert a JPG or PNG image into a heightmap array

webgl-wield-item-tutorial

A tutorial for positioning items on top of bones using WebGL and 3d math

create-keyframe

Create css keyframes using JSON

webgl-to-img-stream

Use a WebGL context to write the canvas's contents to a image file. Meant to be used in Node.js

load-collada-dae

Load the WebGL graphics buffer data from a collada .dae model and return a draw command that accepts options

app-world

A framework agnostic approach to managing frontend application state.

make-component

A code generator for virtual-dom component files

client-ketchup

A simple interface for keeping remote clients up to date with their authoritative state

neighborhood-pathfinder

An A* implementation that accepts a function to detect neighboring tiles

webgl-skeletal-animation-sound-tutorial

A tutorial for playing sound effects during skeletal animations

expand-vertex-data

Expand vertex, normal and uv indices into vertex normal and uv data that is ready for your array buffers

generate-keyframe-animation-tutorial

A tutorial on generating CSS keyframes during runtime

minimal-object-diff

Create and apply a tiny representation of diffs between two objects. Useful for sending diffs over a network

branching-dialogue

A stateless API for modeling branching dialogue in role-playing games

conformer

conformer helps you write and visualize conformance test suites.

create-hover-class

Turn a JSON object into :hover class to use with inline styled components

load-wavefront-obj

Load the graphics buffer data from a wavefront .obj model and return a draw command that accepts options

get-attributes-uniforms

Get the attributes and uniforms from a GLSL shader string

keyframes-to-dual-quats

Convert a set of keyframe matrices into dual quaternions

knowledge

Concepts, solutions and links that I want to remember

angular-video-time

AngularJS Filter for displaying a video's current time

create-shader-program

Compiles, links and returns a shader program from a give vertex and fragment shader

webgl-blend-map-tutorial

A tutorial on multitexturing a WebGL terrain using a blend map

epoch-to-timeago

Get a string representation of a time difference

create-orbit-camera

Create a camera that orbits a target

blender-rustlang-docker

Docker image with Blender 2.80 and Rust

create-draw-function

Create a WebGL draw call based on user provided data

donutjs-skeletal-animation-slides

Skeletal Animation in Your Browser via WebGL - the accompanying slides for a talk at Portland's Donut.js meetup