yay slides

Co-authored-by: pejour <pejour@users.noreply.github.com>

docs/package-lock.json

@@ -8,6 +8,9 @@
         "@slidev/cli": "^0.38.5",
         "@slidev/theme-default": "^0.21.2",
         "slidev-theme-academic": "^1.1.1"
+      },
+      "devDependencies": {
+        "playwright-chromium": "^1.30.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -4773,6 +4776,34 @@
       "resolved": "https://registry.npmjs.org/plantuml-encoder/-/plantuml-encoder-1.4.0.tgz",
       "integrity": "sha512-sxMwpDw/ySY1WB2CE3+IdMuEcWibJ72DDOsXLkSmEaSzwEUaYBT6DWgOfBiHGCux4q433X6+OEFWjlVqp7gL6g=="
     },
+    "node_modules/playwright-chromium": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/playwright-chromium/-/playwright-chromium-1.30.0.tgz",
+      "integrity": "sha512-ZfqjYdFuxnZxK02mDZtHFK/Mi0+cjCVn51RmwLwLLHA8PkCExk0odmZH2REx+LjqX8tDLGnmf6vDnPAirdSY0g==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "playwright-core": "1.30.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.30.0.tgz",
+      "integrity": "sha512-7AnRmTCf+GVYhHbLJsGUtskWTE33SwMZkybJ0v6rqR1boxq2x36U7p1vDRV7HO2IwTZgmycracLxPEJI49wu4g==",
+      "devOptional": true,
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/popmotion": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz",
@@ -9524,6 +9555,21 @@
       "resolved": "https://registry.npmjs.org/plantuml-encoder/-/plantuml-encoder-1.4.0.tgz",
       "integrity": "sha512-sxMwpDw/ySY1WB2CE3+IdMuEcWibJ72DDOsXLkSmEaSzwEUaYBT6DWgOfBiHGCux4q433X6+OEFWjlVqp7gL6g=="
     },
+    "playwright-chromium": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/playwright-chromium/-/playwright-chromium-1.30.0.tgz",
+      "integrity": "sha512-ZfqjYdFuxnZxK02mDZtHFK/Mi0+cjCVn51RmwLwLLHA8PkCExk0odmZH2REx+LjqX8tDLGnmf6vDnPAirdSY0g==",
+      "devOptional": true,
+      "requires": {
+        "playwright-core": "1.30.0"
+      }
+    },
+    "playwright-core": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.30.0.tgz",
+      "integrity": "sha512-7AnRmTCf+GVYhHbLJsGUtskWTE33SwMZkybJ0v6rqR1boxq2x36U7p1vDRV7HO2IwTZgmycracLxPEJI49wu4g==",
+      "devOptional": true
+    },
     "popmotion": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz",

docs/package.json

@@ -3,5 +3,8 @@
     "@slidev/cli": "^0.38.5",
     "@slidev/theme-default": "^0.21.2",
     "slidev-theme-academic": "^1.1.1"
+  },
+  "devDependencies": {
+    "playwright-chromium": "^1.30.0"
   }
 }

docs/slides.md

@@ -5,7 +5,7 @@ coverAuthor: Laurent Fainsin, Damien Guillotin, Pierre-Eliot Jourdan
 coverBackgroundUrl: https://images.unsplash.com/photo-1655720408861-8b04c0724fd9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8
 coverBackgroundSource: unplash
 coverBackgroundSourceUrl: https://unsplash.com/photos/Vc0CmuIfMg0
-coverDate: '2023-01-31'
+coverDate: '2023-02-01'
 themeConfig:
   paginationX: r
   paginationY: t
@@ -14,118 +14,277 @@ themeConfig:
 title: Bureau d'étude de PI3D
 ---
 
-# Bureau d'étude de PI3D
+<h2 class="opacity-50" style="font-size: 2rem;">Bureau d'étude de PI3D</h2>
 
-Sujet 6 - Reformulation du MVS par level sets
-
----
-
-## Level sets ?
-
-<img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Level_set_method.png" class="m-auto -mt-7"/>
-
-<style>
-span.katex {
-    position: absolute;
-    top: 48%;
-}
-</style>
-
-$\mathcal{V}_t = \{ \textbf{Q} \in \mathbb{R}^3, u(\textbf{Q}) = t \}, \quad t\in [0,1], \quad u \colon \mathbb{R}^3 \to [0, 1]$
-
-<a href="https://en.wikipedia.org/wiki/Level-set_method" class="absolute bottom-0 font-extralight mb-1 mr-2 right-0 text-xs">Wikipedia</a>
+<h1 style="font-size: 2.4rem;">Sujet 6 - Reformulation du MVS par level sets</h1>
 
 ---
 
 ## Exemple Level sets 2D
 
-<img src="figs/lvl7_2D.gif" class="m-auto mt-5"/>
+<img src="/figs/lvl7_2D.gif" class="m-auto mt-5"/>
+
+<!--
+level set ≃ un seuillage. \
+Ici on représente le seuillage d'une fonction par un contour rouge, avec le resultat binarisé à droite.
+Ça fait un peu penser aux contours actifs, et on peut considérer les levels sets comme une généralisation des contours actifs.
+
+-->
+
+---
+
+## Définition du Level sets (2D)
+
+<style>
+span.katex {
+    position: absolute;
+    bottom: 5%;
+    left: 8%;
+}
+</style>
+
+<img src="/figs/wikipedia_top.png" class="m-auto -mt-12"/>
+<img src="/figs/wikipedia_bottom.png" class="m-auto -mt-12"/>
+
+$\mathcal{V}_t = \{ \textbf{Q} = (X, Y) \in \mathbb{R}^2, u(\textbf{Q}) > t \}, \quad t\in [0,1], \quad u \colon \mathbb{R}^2 \to [0, 1]$
+
+<a href="https://en.wikipedia.org/wiki/Level-set_method" class="absolute bottom-0 font-extralight mb-1 mr-2 right-0 text-xs">Wikipedia</a>
+
+<!--
+Définition mathématique et continue des levels sets:
+
+Volume = Ensemble des points de l'espace tel que, l'image de ces points par une fonction valide une condition
+
+- V_t -> volume (2D ici, gris en bas) que l'on souhaite obtenir/approximer
+- Q -> point 2D de l'espace
+- u -> fonction indicatrice (que l'on souhaite apprendre) qui indique "l'intériorité" d'un point Q dans V_t
+- t -> seuil qui détermine la valeur à partir de laquelle on est dans V_t
+
+Pour un levelset 2D, on peut représenter u en 3D, t par un plan, et notre volume V_t par tout ce qui se situe au dessus du plan t.
+-->
 
 ---
 
 ## Exemple Level sets 3D
 
-<img src="figs/lvl7_3D.gif" class="m-auto -mt-1 h-125"/>
+<img src="/figs/lvl7_3D.gif" class="m-auto -mt-1 h-125"/>
+
+<!--
+La définition précédente se généralise très bien aux espace de dimension supérieurs, voici un exemple 3D.
+Juste on vous parle de la 2D psk c'est plus simple.
+Par exemple ici on peut pas représenter u, car il nous faudrait une représentation 4D.
+Par contre on peut vous montrer le résultat de V_t pour différent t.
+-->
 
 ---
 
-## Approximation du volume
+## Évolution de $u_t$
 
-<img src="figs/lvl7_2D.png" class="m-auto h-110"/>
+<img src="/figs/lvl7_2D_1.png" class="m-auto h-110"/>
+
+<a href="https://hal.inria.fr/inria-00073673/document" class="absolute bottom-0 font-extralight mb-1 mr-2 right-0 text-xs">Variational principles, surface evolution, PDEs, level set methods, and the stereo problem - Olivier Faugeras, Renaud Keriven, 1998</a>
+
+<!--
+Faugeras et Keriven ont écrit ce "livre" pour poser pleins de preuves mathématiques sur des problèmes variationnels... dont les levels sets.
+Et donc dans le leur "livre" ils montrent plusieurs exemples de levels sets.
+Ils montrent un procédé pour mettre à jour u_t (le contour bleu) pour que celui-ci converge vers un volume capturé (le contour rouge) par des caméras (dont les poses sont connues).
+-->
+
+---
+
+## Évolution de $u_t$
+
+<img src="/figs/lvl7_2D_2.png" class="m-auto h-110"/>
+
+<a href="https://hal.inria.fr/inria-00073673/document" class="absolute bottom-0 font-extralight mb-1 mr-2 right-0 text-xs">Variational principles, surface evolution, PDEs, level set methods, and the stereo problem - Olivier Faugeras, Renaud Keriven, 1998</a>
+
+<!--
+changement de topologie du level set
+-->
+
+---
+
+## Évolution de $u_t$
+
+<img src="/figs/lvl7_2D_3.png" class="m-auto h-110"/>
 
 <a href="https://hal.inria.fr/inria-00073673/document" class="absolute bottom-0 font-extralight mb-1 mr-2 right-0 text-xs">Variational principles, surface evolution, PDEs, level set methods, and the stereo problem - Olivier Faugeras, Renaud Keriven, 1998</a>
 
 ---
 
-## Discrétisation de l'espace
+## Plan du BE
 
-<img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/Voxels.svg" class="m-auto h-110">
+<div class="h-100 flex items-center text-2xl">
 
-<a href="https://en.wikipedia.org/wiki/Voxel" class="absolute bottom-0 font-extralight mb-1 mr-2 right-0 text-xs">Wikipedia</a>
+- Discrétisation de l'espace
+- Initialisation du volume
+- Mise à jour du volume
+- Résultats
+
+</div>
+
+<!--
+Notre objectif dans ce BE c'était donc d'implémenter ce procédé.
+Et pour ce faire on avait besoin de faire les étapes suivantes:
+-->
 
 ---
 
-## Mise à jour du volume
+## Discrétisation de l'espace <br> Simplification du problème
 
-- Sélection des voxels sur la bordure du "marbre"
-- Vérification de la visibilité du voxel par toutes les caméras
-- Récupération des couleurs / niveaux de gris visibles par les caméras
-- Consensus sur la couleur / niveau de gris du voxel étudié
-- Remplissage si consensus, creusage sinon
+<img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/Voxels.svg" class="m-auto mr-50 -mt-13 h-110">
+
+<style>
+span.katex {
+    position: absolute;
+    bottom: 1%;
+}
+</style>
+
+$\mathbb{R}^3 \to \mathbb{V} \newline \implies \mathcal{V} = \{ \textbf{v} = (x, y, z) \in \mathbb{V}, u(\textbf{v}) > 0 \}, \quad u \colon \mathbb{V} \to \{0, 1\}$
+
+
+<a href="https://en.wikipedia.org/wiki/Voxel" class="absolute bottom-0 font-extralight mb-1 mr-2 right-0 text-xs">Wikipedia</a>
+
+<!--
+Dans un premier on va discrétiser notre espace, puisque qu'on travaille dans le monde numérique + les observations (photos caméras) que l'on va utiliser pour calculer notre levelset sont aussi des échantillons.
+On va donc travailler avec une grille de pixels si on est en 2D, et un grille de voxels (V) si on est en 3D.
+On va aussi simplifier le problème en binarisant notre fonction u, celle-ci désormais sort soit 0 (de l'air) ou 1 (du solide).
+Et donc t on va aussi le définir égal à 0.
+-->
 
 ---
 
 ## Initialisation du volume
 
-- Définition d'une taille limite:
-  - $x \in [-1, 1]$
-  - $y \in [-1, 1]$
-  - $z \in [-1, 1]$
-- Définition d'une résolution (un pas): $5.10^{-2}$
-- Initialisation des valeurs du marbre:
-  - Uniforme (`np.zeros` ou `np.ones`)
-  - Shape From Silouhette (BE4)
+- Définition des bornes de notre grille de voxels:
+  - $x \in \llbracket x_{\min}, x_{\max} \rrbracket$
+  - $y \in \llbracket y_{\min}, y_{\max} \rrbracket$
+  - $z \in \llbracket z_{\min}, z_{\max} \rrbracket$
+- Définition d'une résolution de voxel:
+  - Pas trop grand, sinon un voxel projeté sur nos caméras comprends plusieurs pixels
+  - Pas trop petit, sinon plusieurs voxels se projetent sur le même pixel
+  - Exemple: $5.10^{-2}\ m$
+- Initialisation des valeurs des voxels:
+  - Uniforme: $\forall \textbf{Q} = (X, Y, Z) \in \mathbb{R}, u_0(\textbf{Q}) = 1$
+  - Shape From Silhouette <span style="opacity: 0.025;">BE4 CHEH</span>
+
+<!--
+Comme on l'a vu dans les exemple de Faugeras, il nous faut un u_0 initial (le contour bleu). Pour ça, dans notre cas, on va dans un premier temps définir des bornes à notre grille de voxels. Il faut aussi définir la taille des voxels.
+-->
 
 ---
 
-## Principe du Shape from Silouhette
+## Mise à jour du volume
+
+<img src="/figs/update.png" class="m-auto h-120">
+
+<!--
+- Sélection des voxels sur la bordure du "marbre"
+- Vérification de la visibilité du voxel par toutes les caméras
+- Récupération des couleurs visibles par les caméras
+  - Si !consensus et air, !update -> air
+  - Si consensus et air, update -> solide
+  - Si !consensus et solide, update -> air
+  - Si consensus et solide, !update -> solide
+-->
+
+---
+
+## Principe du Shape from Silhouette
 
 <img src="https://www.researchgate.net/profile/Silvio-Savarese/publication/221625880/figure/fig1/AS:652956261158913@1532688312594/Shape-from-Silhouettes-The-silhouette-and-camera-location-for-each-view-forms-a-cone.png" class="m-auto mt-2 h-110">
 
 <a href="https://ieeexplore.ieee.org/document/1024034" class="absolute bottom-0 font-extralight mb-1 mr-2 right-0 text-xs">Implementation of a Shadow Carving System for Shape Capture, doi: 10.1109/TDPVT.2002.1024034</a>
 
+<!--
+On suppose qu'on connait les poses de plusieurs caméras, ainsi que les masques de l'objet qu'elles capturent.
+On va prendre tous les voxels de notre grille et les projeter sur chacune de nos caméras.
+Si on voxel tombe à l'exterieur du masque d'au moins d'une caméra, on le supprime.
+Il en résulte l'enveloppe convexe de l'objet (nuage de points / voxels).
+Plus on a de caméra, meilleure sera la définition de l'enveloppe.
+-->
+
 ---
 
-## Example Shape from Silouhette
+## Shape from Silhouette 3D
+
+<img src="/figs/example3D.gif" class="m-auto mt-2 h-110">
+
+<!--
+25 poses, torus avec briques, génération blender, masques parfait par render raytracing (cycles).
+-->
+
+---
+
+## Résultat Shape from Silhouette 3D
 
 <iframe frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share width="100%" height="100%" src="https://sketchfab.com/models/4da17838dd5f497faa147db5febd21d9/embed"></iframe>
 
+<!--
+nuage de voxel. si nuage de points -> conversion en mesh possible grace aux marching cubes.
+-->
+
 ---
 
-## Raytracing
+## Shape from Silhouette 2D
+
+<img src="https://cdn.discordapp.com/attachments/953586522572066826/1069974891023056926/image.png" class="m-auto -mt-2 h-110">
+<img src="https://cdn.discordapp.com/attachments/953586522572066826/1069974281175449630/image.png" class="m-auto -mt-1 h-11">
+
+---
+
+## Résultat Shape from Silhouette 2D
+
+<img src="https://cdn.discordapp.com/attachments/953586522572066826/1069973956263686164/Screenshot_from_2023-01-31_14-30-53.png" class="m-auto h-110">
+
+---
+
+## Lancer <br> de rayon
 
 <img src="https://cdn.discordapp.com/attachments/953586522572066826/1068141883810914427/fvi2.png" class="m-auto -mt-10 h-125"/>
 
 ---
 
-## Raytracing
+## Lancer <br> de rayon
 
 <img src="https://cdn.discordapp.com/attachments/953586522572066826/1068141884242931712/fvi4.png" class="m-auto -mt-10 h-125"/>
 
 ---
 
-## Raytracing
+## Lancer <br> de rayon
 
 <img src="https://cdn.discordapp.com/attachments/953586522572066826/1068141884679147602/fvi6.png" class="m-auto -mt-10 h-125"/>
 
 ---
 
-## Raytracing
+## Lancer <br> de rayon
 
 <img src="https://cdn.discordapp.com/attachments/953586522572066826/1068141885056622661/fvi8.png" class="m-auto -mt-10 h-125"/>
 
 ---
 
-## Résultats
+## Itération du Level Set
+
+<div class="flex">
+    <img src="https://cdn.discordapp.com/attachments/953586522572066826/1069973956787966003/Screenshot_from_2023-01-31_14-33-47.png" class="h-110">
+    <img src="https://cdn.discordapp.com/attachments/953586522572066826/1069975888382410784/image.png" class="h-110">
+</div>
+
+---
+
+## Résultats (TODO)
 
 <img src="https://media.tenor.com/_NuHtjgRyvcAAAAC/kekw.gif" class="m-auto h-100">
+
+---
+
+## Conclusion et axes de développement
+
+<div class="h-100 flex items-center text-2xl">
+
+- Réalisation du SfS en 2D/3D
+- Réalisation du MVS par level sets en 2D avec utilisation du SfS
+- Résultat en 3D ?
+
+</div>