Current Progress

Presently we have our main project framework implemented for loading and running fragment shader programs, updating attributes in our grid, and running simulation steps on the GPU. Additionally we also have a rudimentary GUI made with the dat.gui JavaScript library. The important parts of our framework include the AttributeField.js class, as well as the main render loop in main.js which uses a variety of custom shader program loader classes to run fragment shader programs that update specific attributes in the grid before rendering the relevant data to the screen.

Project Framework

The main idea behind our implementation of the eulerian grid solver is to store fluid attributes (such as density and velocity) in 2 swappable WebGLRenderTarget buffers (Defined in AttributeField.js). Each fragment shader has its own dedicated loader class that initializes the uniforms and vertices that are passed into its associated shader program. These loader classes also set the render target of the WebGLRenderer to which updated attribute information is written and stored for later usage as a texture input to other shader programs handling different fluid attributes. Swapping these buffers after every render allows us to continually feed the most recent data back into our fragment shaders.

Shaders

Currently, we have not implemented any of the shaders needed for the simulation (Such as shaders for applying advection, viscous diffusion, external forces, projection, and boundary conditions). We have a rudimentary particle shader implemented (shown above) and hope to use this to visualize the flow of fluid around boundaries/obstacles. As of now, this shader does not work with our current framework. We plan to refactor it so that it both works well with our current gpu simulation - to - screen visualization pipeline and updates positions based on the underlying velocity vector field.

Current Issues

Initially, we had some trouble with getting the framework set up to be able to render the particle simulation, as none of us had prior experience working with three.js or WebGL. We are currently working through understanding the math behind the Navier-Stokes equations and figuring out how to separate the relevant data into textures that we can calculate inside our shader code. Additionally, until we implement most of the features (advection, pressure, diffusion, external forces), our rendered output will be mostly garbage and thus be hard to debug (and because the shaders are doing work in the gpu, it is difficult to debug in ways that are not just checking for the expected screen output).

Updated Plan Going Forward

April 25^th - April 30^th:

• Finish the shaders needed for the complete simulation.
• Work on shaders to visualize density (i.e advection of dye through fluid).
• Refactor particle shaders so they work within the project framework and update particle positions according to the velocities in the grid.

May 1^st - May 5^th:

• Implement interactivity (adding/modifying obstacles, adjusting simulation area) and debug this implementation.
• Finish up the final presentation and record and edit the necessary video and audio for our demo and final report.

Presentation Slides