Magnetic Field Simulation

A small C++ / WebAssembly project for visualizing magnetic fields in the browser. The simulation is written mostly in C++ and rendered with OpenGL-style code compiled to WebGL using Emscripten.

Live demo

https://magnetic-field-simulator.netlify.app/

What it does

The project shows a magnetic field visualization with animated particles and shader-based rendering. C++ code is compiled into WebAssembly, then loaded by the browser through field.js and field.wasm.

The general idea is:

C++ source code → Emscripten → WebAssembly + JavaScript → browser visualization

Project structure

MagneticFieldSimulation/
├── shaders/
│   ├── field_line.frag
│   ├── particle.frag
│   └── particle.vert
│
├── src/
│   ├── magnets/
│   ├── physics/
│   ├── render/
│   ├── exports.cpp
│   ├── main.cpp
│   └── types.h
│
├── web/
│   ├── field.js
│   ├── field.wasm
│   ├── index.html
│   └── style.css
│
├── build.ps1
├── build.sh
├── CMakeLists.txt
├── netlify.toml
└── README.md

Main parts

src/

Contains the C++ source code of the simulation.

• main.cpp starts the application and the render loop.
• exports.cpp exposes selected C++ functions to JavaScript.
• types.h stores shared types used in the project.
• render/ contains OpenGL helper classes such as VAO, VBO, EBO, shaders and renderer code.
• physics/ and magnets/ are prepared for the magnetic field calculations and magnet models.

shaders/

Contains GLSL shader files used for rendering particles and field lines.

web/

Contains the browser version of the project.

• index.html loads the simulation.
• style.css contains the page styling.
• field.js and field.wasm are generated by Emscripten after building.

Requirements

To build the project, you need:

• Emscripten SDK
• Python 3 for running a local web server
• Git Bash or PowerShell on Windows

Building on Windows with Git Bash

If Emscripten is installed in C:/dev/emsdk, first activate it:

source /c/dev/emsdk/emsdk_env.sh

Then build the project:

bash build.sh

After a successful build, the files should appear in the web/ folder:

web/field.js
web/field.wasm

Running locally

The project must be opened through a local server, not by double-clicking index.html.

From the project folder run:

cd web
python -m http.server 8080

Then open in the browser:

http://localhost:8080

Building with PowerShell

On Windows you can also use:

C:\dev\emsdk\emsdk_env.ps1
.\build.ps1
.\run_server.ps1

Then open:

http://localhost:8080

Notes

The generated field.js and field.wasm files are build outputs. If the C++ code or shaders are changed, the project should be rebuilt with build.sh or build.ps1.