public 3d-motion repository
pompa-iridiscencia
// SantiagoGR11/pompa-iridiscencia
Interactive simulation of soap-bubble iridescence based on thin-film interference, implemented with WebGL shaders.
SOAP BUBBLE IRIDESCENCE SIMULATOR: Thin-film interference simulation in a soap bubble
This project implements a physics-based interactive simulation of the iridescence observed in soap bubbles. The model reproduces thin-film interference by combining Fresnel reflection coefficients, phase delay in thin films, and spectral integration across the visible range.
The poster included in this repository was created for the Optics course at the University of Oviedo and is written in Spanish. However, the interactive simulator and documentation, written in English, provide the necessary context for international readers.
🌐 Interactive Simulation
The simulation can be explored directly in the browser:
📄 Proyect poster
The full scientific poster associated with this project is available here:
🔍 Abstract
Soap bubbles exhibit vivid iridescent colours due to interference in thin liquid films. Because the film thickness is typically on the order of hundreds of nanometers, reflections from the two interfaces of the film interfere constructively or destructively depending on wavelength and viewing angle.
This project implements a physically motivated model of this phenomenon using:
- Fresnel reflection coefficients for the two film interfaces
- Phase delay due to optical path difference in the film
- Spectral integration across the visible range
- Conversion from CIE XYZ tristimulus values to sRGB The resulting colour distribution is computed in real time through a GPU fragment shader, allowing interactive exploration of the parameters governing the iridescence.
🎯 Scientific Objective
- Model the iridescence of a soap bubble using thin-film interference theory.
- Simulate the wavelength-dependent reflectance of the film.
- Convert spectral reflectance into perceptual colour through CIE colour matching functions.
- Provide an interactive tool to explore how physical parameters affect the observed colours.
⚙️ Physical Model
The interference arises from the optical path difference between the first two reflected rays:
$$ \Delta = 2 n e \cos \theta_t $$
The resulting phase difference is:
$$ \delta = \frac{2\pi}{\lambda}(2 n e \cos\theta_t) + \pi $$
Constructive interference occurs when:
$$ \delta = 2m\pi $$
The reflected intensity depends on the Fresnel reflection coefficients of the interfaces.
The perceived colour is obtained through spectral integration:
$$ I = \int_{\lambda_{vis}} R(\lambda),E(\lambda),d\lambda $$
where:
(R($$\lambda$$)) is the spectral reflectance of the film
(E($$\lambda$$)) is the spectral power distribution of the illumination.
🧠 Rendering Approach
The simulation is implemented using WebGL shaders.
Key elements of the rendering pipeline:
- Compute local film thickness across the bubble surface.
- Evaluate Fresnel reflection coefficients for each wavelength.
- Calculate interference phase shift.
- Integrate reflectance across the visible spectrum.
- Convert the resulting XYZ colour to sRGB.
This computation is executed per-pixel in the fragment shader, enabling real-time visualisation.
📂 Project Structure
pompa-iridiscencia/
│
│
├── visuals/
│ ├── POSTER_Iridescent-Bubble.pdf # Proyect presentation
│ └── Poster_Preview.png # Proyect prewiew
│
├── docs/
│ ├── index.html
│ ├── style.css
│ ├── app.js
│ └── shader.js
│
├── README.md
├── LICENSE
├── .gitignore
└── requirements.txt
🚀 How to Run
No installation is required.
- Clone the repository: git clone https://github.com/SantiagoGR11/pompa-iridiscencia.git
- Open the project folder.
- Launch index.html in a browser.
Because the project runs entirely in the browser, no external dependencies need to be installed.
🛠 Technologies
- JavaScript (ES6)
- WebGL
- Three.js
- GLSL shaders
- html2canvas
- jsPDF
📊 Features
- Real-time thin-film interference simulation
- Physically-motivated reflectance model
- Spectral integration across the visible range
- Interactive control of physical parameters
- Export of simulation results as a certificate
📌 Possible Extensions
- Introduce time-dependent gravitational drainage of the film thickness.
- Implement multiple internal reflections beyond the first two beams.
- Include background illumination to reproduce real viewing conditions.
👨🔬 Authors
Developed by:
- Mario Dávila Muñoz
- Ángela Fanjul Álvarez
- Santiago García Rodríguez
- Samuel García Tuñón
Physics Degree - University of Oviedo
📬 Connect with me
[INFO] 5 topics link to curated motion topic pages.