<div style="text-align:center">

# Real-Time Bubble Simulation on WebVR

⁺**r08922157 王宇辰** ^***r08944022 蔡仲閔**

⁺[e-mail]

^*[e-mail]

</div>

## Table of Contents

- [Abstract](#Abstract)
- [Algorithm](#Algorithm)
- [Implementation Details](#Implementation-Details)
- [Reference](#References)

## Abstract

In the final project of Virtual Reality course in NTU Fall 2019, We surveyed different methods for water simulation and bubble simulation. Then we come up with a bubble simulation method based on Shallow Water simulation and implement this algorithm with WebGL and WebVR.

## Algorithm

### Shallow Water Simulation

There are tons of algorithms for us to simulate water in real time. For our final project, we use **Shallow Water Simulation** to simulate our water environment in real time. Instead of simulating particles in 3D environment, Shallow Water Simulation simulates water movement in a 2-D plane. The algorithm divides the plane into serveral grids and cares about the following 3 properties of water:

- Water Height in a plane position (x, y).
- Velocity in 2 directions. $v_x, v_y$.

We can write the formula of these methods like following:

$$\frac{\partial H}{\partial x} = -v \nabla H - H(\frac{\partial v_x}{\partial x} + \frac{\partial v_y}{\partial y})$$

$$\frac{\partial v_x}{\partial t} = -v \nabla v_x + g\frac{\partial H}{\partial x}$$

$$\frac{\partial v_y}{\partial t} = -v \nabla v_y + g\frac{\partial H}{\partial y}$$

The next question is how can we calculate these partial derivatives. **Euler** gave us the answer hundreds years ago, we can calculate derivatives using **Euler Steps**:

$$\frac{df(x)}{dx} = \frac{f(x+\Delta x) - f(x)}{\Delta x} + O(\Delta x^2)$$

In practical, we use an advance version of **Euler Steps**:

$$\frac{df(x)}{dx} = \frac{f(x+0.5 * \Delta x)}{\Delta x} + O(\Delta x^2)$$
$$\frac{df(x)}{dx} = \frac{f(x+0.5 * \Delta x) - f(x - 0.5*\Delta x)}{\Delta x} + O(\Delta x^2)$$

### Bubble Modeling

We use the model framework described in Thurey's paper. For every bubble, they have the following properties:

- Bubble position $p$.
- Bubble Radius $r$.
- Bubble velocity $v$.

The imexplicit formula of bubbles is:

$$(3.0 - 0.1 * cos\theta)r^2 = 0$$

### Movement of Bubbles

The bubbles move as a whole. We simply use the **Physical Simulation** discussed in the course to simulate the movement of bubbles.

In vertical, we simulate the gravity and buoyancy, like following:

$$F = mg + \rho_{liguid}gv_1 = ma$$
$$a = g + \frac{\rho_{liquid}g\alpha}{\rho_{air}}$$

Note that $\alpha$ is the percentage of volume of bubble that is in the water. In practical, we use $\rho_{liquid} = 1, \rho_{air} = 0.7$ for better simulation effect.

### Water Coupling

When bubbles approach water surface, it will first give pressure to the water surface. Then the water surface will push back to the surface of bubble. Then the bubble will break and cause changes on water surface, the figure below show how it happens.


### Model, View and Projection Matrices

In order to build a [WebVR](#WebVR) project, we have to understand how does WebGL transform the coordinate from object to what we see. There are three matrices in each stages shown below: Model, View and Projection. And to render VR scene, we need two different sets of these matrices for each eye's rendering.

<div style="text-align:center">


</div>

## Implementation Details

We implement our method with WebGL and WebVR. Serveral engineering tools are used for engineering excellence. We use **Git** for version control and **Yarn** and **Webpack** for project management. This project is totally open-sourced on **Github**.

### WebVR

to get [Model, View and Projection Matrices](#Model-View-and-Projection-Matrices) using WebVR, we call [VRDisplay.getFrameData()](https://developer.mozilla.org/en-US/docs/Web/API/VRDisplay/getFrameData) method. It's return object, VRFrameData, represents all the information we needed to render VR scene including **leftProjectionMatrix**, **leftViewMatrix**, pose, **rightProjectionMatrix** and **rightViewMatrix**. And during development, we used a Chrome DevTools extension,[WebVR API Emulation](https://chrome.google.com/webstore/detail/webvr-api-emulation/gbdnpaebafagioggnhkacnaaahpiefil), to run WebVR content without having HMD headset.

## References

- Siggraph 2007 notes on Fluid Simulation.
- Bubble Simulation On Shallow Water Framework, SCA 2007.
- A Hybrid Lagrangian-Eulerian Formulation for Bubble Generation and Dynamics, Siggraph 2010.
- [OpenGL Tutorial](http://www.opengl-tutorial.org/)
- [Getting Started with WebVR](https://developers.google.com/web/fundamentals/vr/getting-started-with-webvr)