particle-simulator-webgl

Description

This is a particle simulator written in C++ and compiled to WebGL2 using Emscripten. It is a port of my particle simulator written in C++ and OpenGL which can be found here. This version is displaying 1 000 000 particles (which can be changed using the integrated UI). On the contrary of the Desktop version, this version is using a Transform Feedback buffering instead of a SSBO, WebGL2 is limited to OpenGL ES 3.0 which doesn't support SSBOs.

🚀🚀you can try the webgl build online by clicking here 🚀🚀

Note
The website work for desktop and mobile, but on mobile you won't be able to use the UI to change the simulation parameters.

Images

Videos

2023-03-15.21-21-45.online-video-cutter.com.mp4

Dependencies

OpenGL version: 4.6.0
GLSL version: 4.60
GLFW version: 3.3.8
Glad version: 0.1.36
ImGui version: 1.89.6 WIP
GLM version: 0.9.8
Emscripten: 3.1.37

Building

To build the project, you need to use a UNIX system, like Ubuntu or if you're on Windows you can use WSL. Then you have to install Emscripten. You can find instructions on how to install Emscripten here:
https://emscripten.org/docs/getting_started/downloads.html

You also need to have CMake and make installed. You can find instructions on how to install CMake here:
https://cmake.org/install/

Make can be installed by running this command in the terminal:

sudo apt install make

Once you have Emscripten and CMake installed run this command in the project root directory:

emcmake cmake .

Then run this command in the same directory:

emmake make

To test the website locally

To test the website locally, you need to have Python installed. You can find instructions on how to install Python here:

https://www.python.org/downloads/

Once you have Python installed, run this command in the project build directory:

python -m http.server

Then open your browser and go to this address:

http://localhost:8000/

Controls

The speed and some parameters can be modified directly in the ImGui windows.

Action	Key
Translate camera	WASD (← → ↑ ↓)
Pause/Resume	P
Move up/down camera	SPACE/SHIFT
Rotate camera	Right Mouse Button + Mouse movement
Toggle UI visible/hidden	U
Fullscreen	F11
Drag particles	Left Mouse Button + Mouse movement OR Touch screen

Note The translation commands are set for QWERTY keyboard layout.

GitHub Actions

This project uses GitHub Actions to build the project and deploy it to GitHub

The project is set with a set of different scripts:

CodeQL: This script is used to check the code for security issues.
CMake: This script is used to build the project.
Cpp Cmake Publish: This script is used to publish the project on GitHub.
Flawfinder: This script is used to check the code for security issues.
Microsoft C++ Code Analysis: This script is used to check the code for security issues.
Cpp Linter: This script is used to check the code for security issues.
Emscripten CMake: This script is used to test build of the project using Emscripten toolchain.
Emscripten-Publish: This script build to webgl and publish the project on GitHub Pages.