particle-system-webgl

Description

This is a particle system written in C++ and compiled to WebGL using Emscripten. It is a port of my particle system written in C++ and OpenGL which can be found here.

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

Images and Video

Click on the images to watch the video.

Dependencies

• C++ 14
• C++ compiler (MSVC, Mingw, ...)
• CMake
• Glad
• GLFW (3.3.8)
• OpenGl (3.3)
• Dear ImGui (1.88.4)
• glm (0.9.8.5)
• stb (2.28)

Note
Due to the Emscripten new version (3.1.33), I needed to update the ImGui version from 1.84.3 to 1.88.4.

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) or (↑ ← ↓ →)
Pause/Resume	P
Move up/down camera	(Space/Shift) or (Page up/down)
Rotate camera	Right Mouse Button + Mouse movement
Fullscreen	F11

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.

Libraries

glfw:
https://www.glfw.org/docs/latest/

glm:
https://glm.g-truc.net/0.9.9/index.html

glad:
https://glad.dav1d.de/

stb (stb_image):
https://github.com/nothings/stb/blob/master/stb_image.h

Dear ImGui:
https://github.com/ocornut/imgui

OpenGL:
https://www.opengl.org/

emscripten:
https://emscripten.org/docs/getting_started/downloads.html

bin2c:
https://sourceforge.net/projects/bin2c/files/latest/download

Documentation

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

Contributors

Quentin MOREL:

• @Im-Rises
• https://github.com/Im-Rises