Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/im-rises/particle-simulator-webgl
1 000 000 particles at 60fps made in C++ using OpenGL build for WebAssembly WebGL2
https://github.com/im-rises/particle-simulator-webgl
3d-graphics cmake glsl imgui opengl particle-simulation particles physics-simulation simulation simulator webgl
Last synced: 3 months ago
JSON representation
1 000 000 particles at 60fps made in C++ using OpenGL build for WebAssembly WebGL2
- Host: GitHub
- URL: https://github.com/im-rises/particle-simulator-webgl
- Owner: Im-Rises
- License: mit
- Created: 2023-02-22T05:31:37.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-25T19:36:17.000Z (over 1 year ago)
- Last Synced: 2024-04-15T01:19:01.935Z (9 months ago)
- Topics: 3d-graphics, cmake, glsl, imgui, opengl, particle-simulation, particles, physics-simulation, simulation, simulator, webgl
- Language: C++
- Homepage: https://im-rises.github.io/particle-simulator-webgl/
- Size: 6.96 MB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/Im-Rises/ParticleSimulator).
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](https://im-rises.github.io/particle-simulator-webgl/) 🚀🚀
> **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
https://user-images.githubusercontent.com/59691442/225486109-9fb793d5-878f-430b-b418-938535038aed.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:
You also need to have CMake and make installed. You can find instructions on how to
install CMake here:
Make can be installed by running this command in the terminal:
```bash
sudo apt install make
```
Once you have Emscripten and CMake installed run this command in the project root directory:
```bash
emcmake cmake .
```
Then run this command in the same directory:
```bash
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:
Once you have Python installed, run this command in the project build directory:
```bash
python -m http.server
```
Then open your browser and go to this address:
## 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
[](https://github.com/Im-Rises/particle-simulator-webgl/actions/workflows/codeql.yml)
[](https://github.com/Im-Rises/particle-simulator-webgl/actions/workflows/cmake.yml)
[](https://github.com/Im-Rises/particle-simulator-webgl/actions/workflows/flawfinder.yml)
[](https://github.com/Im-Rises/particle-simulator-webgl/actions/workflows/cpp-linter.yml)
[](https://github.com/Im-Rises/particle-simulator-webgl/actions/workflows/emscripten-cmake.yml)
[](https://github.com/Im-Rises/particle-simulator-webgl/actions/workflows/emscripten-publish.yml)
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.
## Libraries
glfw:
glm:
glad:
Dear ImGui:
OpenGL:
emscripten:
## Documentation
learnopengl (OpenGL tutorial):
unrealistic.dev (Change CMake working directory):
OpenGL ES 3.0 Reference Pages:
Wikipedia (OpenGL versions):
codepen (WebGL 2 Particles):
nopjiap (WebGL 2 Particles):
## Contributors
Quentin MOREL:
- @Im-Rises
-
[](https://github.com/Im-Rises/particle-simulator-webgl/graphs/contributors)