TDSE simulation with WebGL

Client
JQI / University of Maryland
Year
2020-2021
Type
interactive simulation / technical writing
Field
quantum mechanics / WebGL
Links
Observable notebook / Quantum Atlas
Description
Browser-based simulation of the 2D time-dependent Schrodinger equation, implemented on the GPU with WebGL.

Context

The simulation was developed for JQI / University of Maryland for Quantum Atlas, an educational site about quantum physics.

It shows a Gaussian wavepacket evolving through a two-slit potential, making the time-dependent Schrodinger equation visible as a moving interference pattern.

Approach

I wrote the simulation as an Observable notebook using WebGL so the calculation could run interactively in the browser. The wavefunction is stepped forward with a fourth-order Runge-Kutta method, with the real and imaginary components stored in textures and updated on the GPU.

The base visualization uses blue and green channels for the real and imaginary parts of the wavefunction, with the potential drawn as a simple white barrier. The goal was to keep the simulation readable while preserving the underlying complex-valued wave behavior.

Numerical approximation

The notebook uses a fourth-order Runge-Kutta method to step the wavefunction forward in time. Each frame computes four intermediate wavefunctions, combines them, and uses the result as the input for the next step.

The Laplacian is approximated with a central difference scheme on a 2D grid. For each point, the shader samples the neighboring points above, below, left, and right, then combines them with the current value.

WebGL implementation

WebGL makes the simulation practical in the browser because each shader runs the same calculation across the whole grid in parallel. The real and imaginary parts of the wavefunction are stored as color values in textures.

The implementation uses separate framebuffers for the initial wavefunction, the four Runge-Kutta steps, and the combined result. A final shader draws the evolving wavefunction to the screen with adjusted brightness so the spreading wavepacket remains visible.

References

The notebook was based partly on Thomas Bronzwaer's numerical TDSE articles, David A. Roberts' ShaderToy implementation, and Vizit Solutions' WebGL Schrodinger equation example.