web compilation

.gitignore

@@ -0,0 +1,2 @@
+michelson
+/raylib

main.c

@@ -2,6 +2,9 @@
 #include <math.h>
 #define RAYGUI_IMPLEMENTATION
 #include "raygui.h"
+#if defined(PLATFORM_WEB)
+    #include <emscripten/emscripten.h>
+#endif
 
 #define UI_WIDTH 450
 #define COLOR_BG (Color){ 25, 25, 30, 255 }
@@ -450,14 +453,44 @@ void DrawControlPanel(Michelson *mic) {
     DrawText(TextFormat("%i FPS", fps), startX + 100, bottomY + 12, 20, fpsColor);
 }
 
+Michelson mic = {0};
+Shader shader;
+bool isFullscreen = false;
+Rectangle normalBounds = {0};
+Rectangle fullScreenBounds = {0};
+
+void UpdateDrawFrame(void) {
+    if (IsKeyPressed(KEY_F)) {
+        isFullscreen = !isFullscreen;
+    }
+    Rectangle currentViewBounds = isFullscreen ? fullScreenBounds : normalBounds;
+    BeginDrawing();
+        ClearBackground(COLOR_BG);
+        // Grille fond
+        for(int i = UI_WIDTH; i < 1920; i += 100) DrawLine(i, 0, i, 1080, Fade(WHITE, 0.05f));
+        for(int i = 0; i < 1080; i += 100) DrawLine(UI_WIDTH, i, 1920, i, Fade(WHITE, 0.05f));
+
+        DrawMichelsonSchema(&mic);
+        DrawControlPanel(&mic);
+        DrawInterferenceViewGPU(&mic, currentViewBounds, shader, &isFullscreen);
+    EndDrawing();
+}
+
 int main () {
+    //SetConfigFlags(FLAG_MSAA_4X_HINT);
+    #if !defined(PLATFORM_WEB)
     SetConfigFlags(FLAG_MSAA_4X_HINT);
+    #endif
+
     InitWindow(1920, 1080, "Interferometre de Michelson");
     SetTargetFPS(144);
 
-    Shader shader = LoadShader(0, "michelson.frag");
+    #if defined(PLATFORM_WEB)
+        shader = LoadShader(0, "michelson_web.frag");
+    #else
+        shader = LoadShader(0, "michelson.frag");
+    #endif
 
-    Michelson mic = {0};
     mic.center = (Vector2){ UI_WIDTH + (1920 - UI_WIDTH) / 2.0f - 100, 1080 / 2.0f };
     mic.d1 = 250.0f;
     mic.d2 = 250.0f;
@@ -469,28 +502,17 @@ int main () {
     mic.nGaz = 1.0f;
     mic.gaz = false;
 
-    bool isFullscreen = false;
+    normalBounds = (Rectangle){1920 - 530, 50, 500, 500};
+    fullScreenBounds = (Rectangle){UI_WIDTH + 10, 40, 1920 - UI_WIDTH - 20, 1030};
     
-    Rectangle normalBounds = {1920 - 530, 50, 500, 500};
-    Rectangle fullScreenBounds = {UI_WIDTH + 10, 40, 1920 - UI_WIDTH - 20, 1030};
-    //Rectangle screenViewBounds = {400, 0, 1080, 1080};
-
-    while (!WindowShouldClose()) {
-        if (IsKeyPressed(KEY_F)) {
-            isFullscreen = !isFullscreen;
+    #if defined(PLATFORM_WEB)
+        emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
+    #else
+        while (!WindowShouldClose()) {
+            UpdateDrawFrame();
         }
-        Rectangle currentViewBounds = isFullscreen ? fullScreenBounds : normalBounds;
-        BeginDrawing();
-            ClearBackground(COLOR_BG);
-            // Grille fond
-            for(int i = UI_WIDTH; i < 1920; i += 100) DrawLine(i, 0, i, 1080, Fade(WHITE, 0.05f));
-            for(int i = 0; i < 1080; i += 100) DrawLine(UI_WIDTH, i, 1920, i, Fade(WHITE, 0.05f));
+    #endif
         
-            DrawMichelsonSchema(&mic);
-            DrawControlPanel(&mic);
-            DrawInterferenceViewGPU(&mic, currentViewBounds, shader, &isFullscreen);
-        EndDrawing();
-    }
     CloseWindow();
     return 0;
 }

michelson_web.frag

@@ -0,0 +1,71 @@
+#version 100
+
+precision highp float;
+
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+uniform vec2 center;
+uniform float screenHeight;
+uniform float d1;
+uniform float d2;
+uniform float angleM1;
+uniform float angleM1_Y;
+uniform float zoom;
+
+uniform float lambdas[10];
+uniform int lambdasCount;
+
+const float PI = 3.14159265359;
+
+vec3 WavelengthToRGB(float l) {
+    float r = 0.0; float g = 0.0; float b = 0.0;
+    if (l >= 380.0 && l < 440.0) { r = -(l - 440.0) / (440.0 - 380.0); b = 1.0; }
+    else if (l >= 440.0 && l < 490.0) { g = (l - 440.0) / (490.0 - 440.0); b = 1.0; }
+    else if (l >= 490.0 && l < 510.0) { g = 1.0; b = -(l - 510.0) / (510.0 - 490.0); }
+    else if (l >= 510.0 && l < 580.0) { r = (l - 510.0) / (580.0 - 510.0); g = 1.0; }
+    else if (l >= 580.0 && l < 645.0) { r = 1.0; g = -(l - 645.0) / (645.0 - 580.0); }
+    else if (l >= 645.0 && l <= 780.0) { r = 1.0; }
+
+    float factor = 1.0;
+    if (l >= 380.0 && l < 420.0) factor = 0.3 + 0.7 * (l - 380.0) / (420.0 - 380.0);
+    else if (l >= 380.0 && l <= 645.0) factor = 1.0;
+    else if (l > 700.0 && l <= 780.0) factor = 0.3 + 0.7 * (780.0 - l) / (780.0 - 700.0);
+
+    return vec3(r * factor, g * factor, b * factor);
+}
+
+void main() {
+    float pixelX = gl_FragCoord.x;
+    float pixelY = screenHeight - gl_FragCoord.y;
+
+    float deltaLnm = 2.0 * (d1 - d2) * 1000.0;
+
+    float relX = (pixelX - center.x) * zoom;
+    float relY = (pixelY - center.y) * zoom;
+    
+    float radiusSq = relX * relX + relY * relY;
+    float ringFactorBase = radiusSq * 0.065;
+    float wDelta = (relX * angleM1 + relY * angleM1_Y) * 200.0;
+    float currDeltaBase = deltaLnm + wDelta;
+
+    vec3 accumColor = vec3(0.0);
+
+    for(int i = 0; i < 10; i++) {
+        if (i >= lambdasCount) break; 
+        
+        float l = lambdas[i];
+        
+        if (l < 1.0) l = 550.0; 
+
+        vec3 baseColorVec = WavelengthToRGB(l);
+        float currDelta = currDeltaBase - ringFactorBase;
+        float K = PI / l;
+        float phase = currDelta * K;
+        float intensity = cos(phase);
+        intensity = intensity * intensity;
+        accumColor += baseColorVec * intensity;
+    }
+
+    gl_FragColor = vec4(accumColor, 1.0);
+}

minshell.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Interferometre Michelson - Web</title>
+    <style>
+        body { 
+            margin: 0; 
+            padding: 0; 
+            background-color: #111; 
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            width: 100vw;
+        }
+
+        canvas.emscripten {
+            border: 0px none;
+            background-color: black;
+            display: block;
+            
+            aspect-ratio: 16 / 9;
+
+            max-width: 100vw;
+            max-height: 100vh;
+            
+            height: auto;
+            width: auto;
+            
+            box-shadow: 0 0 20px rgba(0,0,0,0.5);
+            
+            image-rendering: -moz-crisp-edges;
+            image-rendering: -webkit-optimize-contrast;
+            image-rendering: crisp-edges;
+            image-rendering: pixelated;
+        }
+    </style>
+  </head>
+  <body>
+    <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
+    <script type='text/javascript'>
+      var Module = {
+        print: (function() {
+          return function(text) { console.log(text); };
+        })(),
+        printErr: function(text) { console.error(text); },
+        canvas: (function() {
+          var canvas = document.getElementById('canvas');
+          return canvas;
+        })()
+      };
+    </script>
+    {{{ SCRIPT }}}
+  </body>
+</html>

web/index.data

@@ -0,0 +1,71 @@
+#version 100
+
+precision highp float;
+
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+uniform vec2 center;
+uniform float screenHeight;
+uniform float d1;
+uniform float d2;
+uniform float angleM1;
+uniform float angleM1_Y;
+uniform float zoom;
+
+uniform float lambdas[10];
+uniform int lambdasCount;
+
+const float PI = 3.14159265359;
+
+vec3 WavelengthToRGB(float l) {
+    float r = 0.0; float g = 0.0; float b = 0.0;
+    if (l >= 380.0 && l < 440.0) { r = -(l - 440.0) / (440.0 - 380.0); b = 1.0; }
+    else if (l >= 440.0 && l < 490.0) { g = (l - 440.0) / (490.0 - 440.0); b = 1.0; }
+    else if (l >= 490.0 && l < 510.0) { g = 1.0; b = -(l - 510.0) / (510.0 - 490.0); }
+    else if (l >= 510.0 && l < 580.0) { r = (l - 510.0) / (580.0 - 510.0); g = 1.0; }
+    else if (l >= 580.0 && l < 645.0) { r = 1.0; g = -(l - 645.0) / (645.0 - 580.0); }
+    else if (l >= 645.0 && l <= 780.0) { r = 1.0; }
+
+    float factor = 1.0;
+    if (l >= 380.0 && l < 420.0) factor = 0.3 + 0.7 * (l - 380.0) / (420.0 - 380.0);
+    else if (l >= 380.0 && l <= 645.0) factor = 1.0;
+    else if (l > 700.0 && l <= 780.0) factor = 0.3 + 0.7 * (780.0 - l) / (780.0 - 700.0);
+
+    return vec3(r * factor, g * factor, b * factor);
+}
+
+void main() {
+    float pixelX = gl_FragCoord.x;
+    float pixelY = screenHeight - gl_FragCoord.y;
+
+    float deltaLnm = 2.0 * (d1 - d2) * 1000.0;
+
+    float relX = (pixelX - center.x) * zoom;
+    float relY = (pixelY - center.y) * zoom;
+    
+    float radiusSq = relX * relX + relY * relY;
+    float ringFactorBase = radiusSq * 0.065;
+    float wDelta = (relX * angleM1 + relY * angleM1_Y) * 200.0;
+    float currDeltaBase = deltaLnm + wDelta;
+
+    vec3 accumColor = vec3(0.0);
+
+    for(int i = 0; i < 10; i++) {
+        if (i >= lambdasCount) break; 
+        
+        float l = lambdas[i];
+        
+        if (l < 1.0) l = 550.0; 
+
+        vec3 baseColorVec = WavelengthToRGB(l);
+        float currDelta = currDeltaBase - ringFactorBase;
+        float K = PI / l;
+        float phase = currDelta * K;
+        float intensity = cos(phase);
+        intensity = intensity * intensity;
+        accumColor += baseColorVec * intensity;
+    }
+
+    gl_FragColor = vec4(accumColor, 1.0);
+}

web/index.html

@@ -0,0 +1 @@
+<!doctypehtml><html lang=fr><head><meta charset=utf-8><meta content="text/html; charset=utf-8"http-equiv=Content-Type><title>Interferometre Michelson - Web</title><style>body{margin:0;padding:0;background-color:#111;overflow:hidden;display:flex;justify-content:center;align-items:center;height:100vh;width:100vw}canvas.emscripten{border:0 none;background-color:#000;display:block;aspect-ratio:16/9;max-width:100vw;max-height:100vh;height:auto;width:auto;box-shadow:0 0 20px rgba(0,0,0,.5);image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated}</style></head><body><canvas class=emscripten id=canvas oncontextmenu=event.preventDefault() tabindex=-1></canvas><script>var Module={print:function(n){console.log(n)},printErr:function(n){console.error(n)},canvas:document.getElementById("canvas")}</script><script async src=index.js></script></body></html>