Skip to content

jaAcKrABbit/WebGPU-Butterfly

 
 

Repository files navigation

Butterfly Simulation with WebGPU

University of Pennsylvania, CIS 565: GPU Programming and Architecture, Final Project

Author:

Overview

Our project aims to create a simulation of butterflies and control their behaviors using WebGPU. We created a hierarchical rigged skeleton for the butterfy, animated the butterflies by using the bones, and used instancing to increase the performance so that it can run in realtime.

o1 o2

Table of Contents

Visual Features

  • Robust glTF Loader with Texture, Material, and Joints Loading and PRB Shading
    • Loading glTF files with skeleton information and PBR-based materials
    • Support loading multiple glTF meshes.
    • Very robust, if a glTF file is missing a certain object like BaseColor Texture, we can still handle it.
  • Procedural Butterfly Color
    • Procedurally change the color for each newly instanced butterfly
  • Control GUI
    • We created a UI that allows the user to change many key parameters for the simulation, such as the number of the butterflies, behaviors, and colors so that the user can easily see the visual effects of different scenes easily.
  • Distance Fog
    • Using distance-based fog to hide the boundary of the scene

Technical Features

  • WebGPU Compute and Rendering Pipeline
    • Compute shaders compute the new joint transformations and deform the butterfly mesh accordingly
    • The pipeline makes adding more parameters to the simulation very easy
  • Instanced Rendering with Animations
    • Instancing rendering ensures minimum memory consumption and maximum rendering performance
    • Instancing with varying animations and behaviors for each instance/
  • Hierachy Skeleton Loader and Mesh Deformer
    • We rigged the butterfly mesh with Blender and successfully use our pipeline and the skeleton to deform the mesh.
    • Joint hierachy is correctly maintained and used in computation. A novel algorithm is used to solve the problem that there is no recursion in the shaders.

Simulation Features

  • Butterfly Simulations
    • Currently we have simple procedurally generated path and simple forces like gravity and wind for the butterfly
  • Behavior Controls
    • Seek: all the butterflies will seek a position and gather there.
    • Departure: all the butterflies will go to the opposite position of the target position.
    • Wander: the butterflies will wander around in the space

We enjoyed this project and we are planning on improve this project by adding more features and improving the performances.
Here are a few things we want to add:

  • Add more behaviors, such as collision avoidance, lead, and cohesion.
  • Add more options to the UI, such as switching different scenes.
  • Add more procedural options, such as more patterns for the butterfly wings and more shapes
  • Add a physically-based aerodynamic simulations for the butterfly flights

Code and Algorithm References

Assets References

A very cool blooper when we were trying to add a group behavior that makes all butterflies spin around a circle.
blooper

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 99.3%
  • HTML 0.7%