Fine-Structure-Solver is a high-performance WebGL 2.0 and Three.js environment dedicated to the visualization of atomic force-density and quantum electrodynamic states.
This interactive "Glass Box" repository relies on the browser's GPU to compute parallelized physics:
- The Canvas (
index.html): The full-screen rendering target overlaid with interactive telemetry controls. - WebGL Renderer (
src/force_density_visualizer.js): Initializes the Three.js scene, OrbitControls, and handles state-management export pipelines. - Compute Shaders (
src/shaders/force_density.glsl): Custom GLSL shader material where the theoretical math is processed per-pixel.
This repository visualizes the tension gradients that maintain atomic stability, governed by the injected baseline: The Coupling Constant Base (
The GLSL shader calculates the Probability Density Mapping, rendering the Electrostatic Force Vectors. In our visual model, the repulsion pushing electrons apart versus the forces keeping them bound to the nucleus is mapped dynamically as a gradient color map (tension).
This environment is built with vanilla HTML/JS and relies on an ES module import of Three.js. No deep Node.js architecture is required, but you must run a local server to avoid CORS issues with the shader modules.
npm install three
npx serve .1. Interactive Alpha Slider
Launch the local web server and open index.html. You will see the atomic probability cloud. Use the UI slider on the left to physically manipulate the Inverse Fine-Structure Constant. The shader will recalculate the electrostatic tension mapping in real-time.
2. Snapshot State Pipeline To record your findings:
- Frame the camera using your mouse (OrbitControls are active).
- Adjust the
$\alpha$ slider to the desired theoretical value. - Click the 📸 Export Snapshot Pipeline button.
The engine will capture the current WebGL canvas as a PNG Data URI, bundle it with the precise floating-point force_density_state_XXX.json package.