Gan Tu, Michael Gibbes, Noah Jacobs Student of CS 184: Computer Graphics and Imaging, Spring 2018 at UC Berkeley.
April, 201810 min read

Dynamic Particle Interaction - Proposal

Summary

Our final project will be a Real-Time Dynamic Physics-Based Particle Simulation and Interaction System. We plan to build a WebGL framework where users can interact with the system to simulate some cool physics-based particle effects on scenes in real time. The list of desired effects include smashing and destruction of objects, wind blowing of particles, water simulation, cloth simulation, and many more.

Our team consists of the following awesome members:

Gan Tu (cs184-adt): 26070763
Michael Gibbes (cs184-aby): 26115555
Noah Jacobs (cs184-abr): 25995966

Problem Description

In this class so far, we have explored various methods of graphic rendering and material rendering techniques. However, there is a very limited coverage of physical simulation, except for the cloth simulation project. Physical simulation is extremely important in real world. It plays a vital role in many areas such as gaming, galaxy simulation for physics research, motion capture, animation, VR/AR, etc.

To further our knowledge and experience in physical simulation, we think a final project on particle simulation would be a great way to tackle the challenge of physical simulation. It's challenging because physical simulation is naturally computationally intensive as it involves simulating, in real time, the behaviors of a large amount of objects within a very complex and mutually dependent system, where objects are highly interactive with each other under rules of physics.

In our project, we will try to make an interactive WebGL framework where users can smash objects of their choice into each other, causing tiny sand-like debris particles to disperse around the scene. Users can create custom-simulated wind effects to blow these sand-like particles around in the scene. Potentially, if time permitting, we plan to implement and enable features such as glass shattering effects, flood simulation (where water floods the scene and interacts with the objects in the scene), and some interactive effects with cloths.

We plan to achieve these effects by leveraging existing JavaScript libraries for WebGL such as three.js. We will read research work on relevant physical simulation for tasks such as wind effects and water simulation. We will incorporate and build upon existing open-source graphics work as well.

Goals and Deliverables

To have a successful project, our baseline plan is to build a WebGL framework that can at least simulate both the wind-particle interaction effects and the smash-destruction particle effects between pre-defined objects, as described from the previous section.

If things go well and we get ahead of our schedule, our aspiration plan is to enable custom objects for the smash-destruction particle effect. We also would like to add features to allow flood simulation, where water floods the scene and interacts with the objects in the scene, and material specific effects such as glass shattering, wood dents, and cloth interactions with wind and objects.

Schedule

To accomplish the project, we define the following high level tasks for execution. Our preliminary plan of action over the upcoming weeks is as follows:

Week 1, 04/2 - 04/8:
- Project Proposal
- Familiarize with three.js
- Familiarize with Node.js and other potential JavaScript library for the webapp development
- Explore academic work for particle simulation and interactions
- Explore existing mesh models to use for project
- Explore existing open-source projects using three.js
- Explore existing open-source projects on physical and particle simulation
Week 2, 04/9 - 04/15:
- Develop the main UI/UX interface for our interactive WebGL webapp
- Continue to familiarize ourself with three.js and Node.js, etc.
- Start to develop smash-destruction particle effects
- Start to develop wind-particle interaction effects
Week 3, 04/16 - 04/22:
- Finalize smash-destruction particle effects
- Finalize wind-particle interaction effects
- Develop new features and interactive demos from our aspirational plans
- Milestone Deliverables: Report Webpage, Video, Slides
- Bug fixes.
Week 4, 04/23 - 04/29:
- Finalize any on-going new features and demos from our aspirational plan
- Finalize the project and webapp demos
- Final Presentation Preparation: Posters and Videos
- Final Report Webpage and Project Video
- Bug fixes and any UI/UX improvement

Resources

We will use our own laptops, running either Mac or Windows, for the development of our web app, collaborating through GitHub. We plan to use three.js extensively for this project, along with other web development framework and JavaScript libraries such as Node.js. We may use web hosting platforms such as Heroku for web app hosting, and use existing object mesh models developed and shared online for rendering purposes.

We will look into open-source resources of exiting simulation works for inspiration, reference, and platforms to build upon as well. Some, but not all, reference sources right now are project demos by the three.js page, experiments with Google, and developer Edan Kwan's work portfolio.

Below are some links to some of the resources that will be helpful for the development of our project: