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.
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.
2023-03-15.21-21-45.online-video-cutter.com.mp4
- 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
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 makeOnce 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 makeTo 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.serverThen open your browser and go to this address:
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.
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.
glfw:
https://www.glfw.org/docs/latest/
glm:
https://glm.g-truc.net/0.9.9/index.html
glad:
https://glad.dav1d.de/
Dear ImGui:
https://github.com/ocornut/imgui
OpenGL:
https://www.opengl.org/
emscripten:
https://emscripten.org/docs/getting_started/downloads.html
learnopengl (OpenGL tutorial):
https://learnopengl.com/In-Practice/2D-Game/Particles
unrealistic.dev (Change CMake working directory):
https://unrealistic.dev/posts/setting-debug-parameters-with-cmake-tools-for-visual-studio
OpenGL ES 3.0 Reference Pages:
https://www.khronos.org/registry/OpenGL-Refpages/es3.0/
Wikipedia (OpenGL versions):
https://en.wikipedia.org/wiki/OpenGL_Shading_Language
codepen (WebGL 2 Particles):
https://codepen.io/stopyransky/pen/gBoQoO
nopjiap (WebGL 2 Particles):
https://github.com/nopjia/particles-mrt
Quentin MOREL:
- @Im-Rises
- https://github.com/Im-Rises