Programmation Web 3D

Fivos DOGANIS

whoami

💼 linkedin.com/in/fivosdoganis
📧 fivos.doganis@gmail.com
🐦 @fdoganis

University of Hull

  • Master of Science by Research (2001)
    Augemented Reality in Archaeology: Registration Issues

IRCAD (2002 - 2003)

  • Institut de Recherche contre les Cancers de l'Appareil Digestif
  • Startup
    • équipe Virtual-Surg
  • Ingénieur Réalité Augmentée

Dassault Systèmes (2003+)

  • Ingénieur Visualisation 3D
    • Scenegraph
    • Matériaux
    • Géometrie, Maillage
  • Ingénieur Réalité Virtuelle et Réalité Augmentée
  • Ingénieur de Recherche

Objectifs du cours

  • Démo
    • Exemples d'applications
  • Théorie
    • Histoire de la 3D sur le Web
    • Concepts: Architecture, Pipeline, API
  • Pratique
    • Programmation Web 3D
      • WebGL, THREE.js
      • Autres APIs

📅 Planning

  • Jour 1

    • 📖 Théorie
    • 💻 Exercices pratiques WebGL
    • 🍜 Déjeuner
    • 🎮 Théorie + exercice complet THREE.js
    • ⚗️ Exploration des exemples + choix du projet personnel

  • Jour 2

    • 🖊️ Evaluation: Quizz ~20 min
    • ⭐ Projet personnel ➡️ points bonus!

Applications Web 3D

  • Jeux
  • e-Commerce
  • Création de modèles 3D
  • Exploration de données 3D
  • Art interactif

Minecraft Classic

Aviator

Heraclos, (Gobelins)

Blob Opera (Google)

Apple iPhone Studio

BMW

OUIGO

SculptGL

3D Sculptor (Dassault Systèmes)

OnShape (PTC)

SketchFab (Epic)

Zygote Body

NASA

iTowns (IGN)

Histoire

Origines et avenir de la 3D sur le Web

"Dis Papy, c'était comment la 3D avant?"

Préhistoire (1983 - 1993)

  • uniquement sur machines Silicon Graphics (SGI)
    • IRIX OS
  • IRIS GL (1983)
    • API proche du hardware
  • IRIS Inventor (1988)
  • OpenGL 1.0 (1993)
    • API ouverte, Multi-OS

Fixed Pipeline (1993 - 2004)

  • 3dfx Glide API (1996)
    • Voodoo: "Carte d'"accéleration 3D" grand public
  • Microsoft Direct X API (1997)
    • Windows-only ☹️
  • OpenGL ES (2004)
  • OpenGL 2.0 (2004)

  • Création de nVIDIA (1993)

  • NV1 dans la SEGA Saturn (1994)

  • GeForce 256 (1999)

    • popularisation du terme GPU: Graphics Processing Unit, Transform & Ligthing

  • GeForce 3 (2001): NV2A dans la Xbox de Microsoft, programmable shading

Autres acteurs

  • SGI + Nintendo: Project Reality / N64 (1996)
    • SGI disparait en 2006 💀

  • Imagination Technologies (PowerVR GPU) + Sega: Dreamcast (1998)

  • Intel i740 (1998) : OS en 3D

  • ATI (AMD) + Nintendo: Gamecube (2001)

Shaders, Mobile, Web (2004+)

  • OpenGL ES 2.0 (2007)
    • Subset mobile avec shaders
  • Canvas 3D (2007), ancêtre de WebGL
  • WebGL 1.0 (2011) ⭐ 🎉
    • fonctionnalités de OpenGL ES 2.0
  • OpenGL ES 3.0 (2012), 3.1 (2014): sans Apple 😢
  • WebGL 2.0 (2017)
    • fonctionnalités de OpenGL ES 3.0

Before WebGL, you couldn’t really do 3D on the web at all.
There was powerful 3D hardware everywhere on both desktops and mobile phones, but the web couldn’t tap into any of it.
There were some plugins, but users had to do an extra installation step that was a huge obstacle to adoption.
All the browser vendors knew that this was a challenge that needed to be resolved, which is why we came together as a Khronos Working Group.

Vladimir Vukićević (WebGL creator, WebVR guru)

WebGL architecture: software stack

  • Code: HTML + CSS + JS
    • code JS de la page web appelle API WebGL
  • Browser:
    • navigateur interprète le JS (moteur JS)
    • convertit calls WebGL en calls OpenGL (binding)
  • OS + Driver: les calls OpenGL sont convertis
    • en calls DirectX sous Windows, Metal chez Apple (via ANGLE)
    • en calls OpenGL ou OpenGL ES sur les autres OS
  • CPU + GPU: exécutent le code!

Conséquences sur les performances

  • Code JS interprété en moyenne 10x plus lent que le code natif
    • sauf astuces comme WebAssembly ("seulement" 2x plus lent)
  • Code natif mobile environ 10x plus lent que code natif sur desktop
  • Recommandations
    • minimiser les appels depuis le JS, favoriser les shaders
    • une fois que les shaders sont compilés et les données sont sur le GPU, le code est presque aussi rapide en JS qu'en natif!
    • attention à la mémoire: utiliser compression de modèles Draco et de texture Basis

Evolution

La fin d'une API?

Problèmes d'évolution

  • Le matériel et les besoins ont changé depuis 1993
    • mobiles, wearables 📱 ⌚ 🕶️
    • systèmes embarqués, AI, Vision 🚗 🚀
  • API de plus en plus complexe
    • drivers compliqués à coder sans erreur et à optimiser
    • extensions OpenGL non universelles
    • subset et dépréciation des anciennes APIs moins efficaces
  • Besoin d'une nouvelle API
    • bas niveau, universelle, performante et abstraite

Besoin d'une nouvelle API?

API Fragmentation 💥

  • Multiplication des APIs propriétaires ➡️ non portables 😦
    • proches du GPU ➡️ performantes
    • neuves ➡️ "propres"
  • Direct X 12 (Microsoft) : Windows, Xbox
  • Mantle (AMD) transférée à Khronos pour devenir Vulkan
    • nouveau standard ouvert bas-niveau ⭐
  • Metal (Apple)
    • ressemble à Vulkan, bien qu'antérieure

Vers une réunification des APIs?

Quel nouveau subset commun?

WebGL Next == "WebGPU" ?

  • Apple "WebMetal", API calquée sur Metal
  • Proposition partiellement reprise et renommée "WebGPU"
    • nom provisoire, API en cours de définition
    • à la fois bas niveau et orientée objet
    • rendu performant
    • subset web ET natif, malgré le nom
      • un peu comme "Vulkan ES" / "Metal ES"
  • Remplacerait WebCL, abandonné (Compute Shaders) 😢
  • Compatible WebAssembly

C'est bien sympa tout ça mais j'utilise quoi comme API finalement ⁉️

We hope for universal availability of WebGL 2.0 soon. If you need to ship your product today, WebGL 2.0 is the way to go. WebGL will be supported indefinitely. You do not need to worry about it going away.

WebGPU's timeline is discussed in the answer to the previous question. WebXR and WebAR are already working on WebGPU integration.

Khronos WebGL meetup, November 18, 2020

WebGL 2.0 can now be considered universally available across browsers, operating systems and devices.
As an application author, you can target WebGL 2.0 with confidence.
We encourage you to migrate to WebGL 2.0
It's no longer necessary to maintain a WebGL 1.0 fallback path unless you need to reach absolutely every device.
In particular, older Windows machines and Android devices.

WebGPU standardization continues; conformance testing in high gear
Aiming to reach 1.0 in 2022 Q2 (spec and conformance tests).

Khronos WebGL + WebGPU meetup, January 25, 2022

https://caniuse.com/webgl

WebGL 1.0 ✅

  • disponible pour 97,21% des utilisateurs!
  • y compris navigateurs mobiles
    • Chrome for Android
    • iOS Safari

➡️ disponible partout! 🎉

https://caniuse.com/webgl2 [novembre 2022]

WebGL 2.0 ⚠️

  • disponible pour 92,85% des utilisateurs
  • Standard chez Apple depuis iOS 15! (septembre 2021) 🎉

➡️ officiel, commencer à coder avec! (vérifier la disponibilité)

  • "forward-compatible": code WebGL 1.0 fonctionne en WebGL 2.0
  • polyfill WebGL 1.0 vers subset WebGL 2.0, si possible (⚠️ shaders)
  • mais il faut connaître WebGL 1.0 pour comprendre le code existant

WebGL 2.0 sur iOS

Réglages > Safari > Avancé > Experimental Features

➡️ Tester en allant sur:

WebGL 2.0 : extensions standardisées

    Depth Textures (WEBGL_depth_texture)
    Floating Point Textures (OES_texture_float/OES_texture_float_linear)
    Half Floating Point Textures (OES_texture_half_float/OES_texture_half_float_linear)
    Vertex Array Objects (OES_vertex_array_object)
    Standard Derivatives (OES_standard_derivatives)
    Instanced Drawing (ANGLE_instanced_arrays)
    UNSIGNED_INT indices (OES_element_index_uint)
    Setting gl_FragDepth (EXT_frag_depth)
    Blend Equation MIN/MAX (EXT_blend_minmax)
    Direct texture LOD access (EXT_shader_texture_lod)
    Multiple Draw Buffers (WEBGL_draw_buffers)
    Texture access in vertex shaders

➡️ même si WebGL 2.0 n'est pas supporté, on peut s'en approcher en utilisant WebGL 1.0 + des extensions!

WebGL 1.0.1 ✅

WebGL 1.0.1 == WebL 1.0 + extensions omniprésentes

ANGLE_instanced_arrays
EXT_blend_minmax
OES_element_index_uint
OES_standard_derivatives
OES_vertex_array_object
WEBGL_debug_renderer_info
WEBGL_lose_context

➡️ disponible partout!

WebGL 1.0.2 ✅

WebGL 1.0.2 == WebL 1.0.1 + extensions omniprésentes en 2021

EXT_texture_filter_anisotropic
OES_texture_float
OES_texture_float_linear
OES_texture_half_float
OES_texture_half_float_linear
WEBGL_depth_texture

➡️ disponible partout!

WebGL 1.0.3 ⚠️

WebGL 1.0.3 == WebL 1.0.2 + extensions omniprésentes en 2022:

EXT_shader_texture_lod
EXT_sRGB
EXT_frag_depth
  • et une non supportée sur Android Browser et Samsung Internet
WEBGL_draw_buffers

➡️ vérifier la disponibilité avant usage

WebGL 2.0 extensions ⚠️

Extensions Web GL 2.0 omniprésentes en 2022:

EXT_texture_filter_anisotropic
OES_texture_float_linear
WEBGL_debug_renderer_info
WEBGL_lose_context
  • et une incompatible avec Safari ❌ : problème pour GPGPU
EXT_color_buffer_float

➡️ vérifier la disponibilité avant usage

⚠️ Disponible != sans bug

#WebGL2 is a rubbish job on #IOS14. On Ipad pro more than half of the conformance tests fail ( 153553 over 260803 - tested here: https://khronos.org/registry/webgl/sdk/tests/webgl-conformance-tests.html). For GPGPU I still use WebGL1 for IOS devices.

@xavierbourry

WebGPU (rappels)

➡️ sans doute l'avenir de la 3D sur le Web, à garder à l'œil!

Conclusion: quelle API utiliser?

  • Commencer par WebGL 1.0, nombreux exemples (API de 11 ans!)
    • pour comprendre les concepts
      • machine à états, pipeline, buffers, shaders
      • cf cours OpenGL!
    • et intégration avec une page web
      • cf cours HTML / JavaScript / CSS
  • Aborder les nouveautés apportées par WebGL 2.0
  • Utiliser des APIs haut niveau: THREE.js, Babylon, A-Frame etc.
    • pour une transition transparente vers WebGPU!

WebGL

Concepts

Concepts > Syntaxe

  • Les APIs évoluent
  • Le matériel aussi
  • mais il y a des bases communes à toutes les APIs, et à tous les GPUs
  • La syntaxe et l'API sont moins importantes que les concepts, communs, transposables

➡️ comprendre comment fonctionne un GPU pour l'exploiter au maximum de ses performances
➡️ adaptation facilitée à d'autres APIs, OS ou architectures

CPU vs GPU

Rappels

There's a freaking supercomputer in your browser,
and nobody seems to have noticed!

Steve Sanderson

CPU

www.thebookofshaders.com

GPU

www.thebookofshaders.com

But

Envoyer le plus de données possible au GPU, et les traiter le plus rapidement possible

  • "upload" (CPU ➡️ GPU) lent 🐢
    • buffers pour grouper les données à transférer
  • traitement sur place très rapide
    • par les shaders
      • travaillent en parallèle
      • instructions simples
      • compilés en langage machine pour GPU

Contraintes

  • Buffers peu flexibles pour données dynamiques
  • Conversion de tableaux en textures (pour calculs GPGPU)
    • conversion coûteuse pour données dynamiques
    • perte de précision potentielle
  • Shaders compliqués à coder
    • pixels isolés, traités indépendamment
    • instructions limitées
    • performances et debug pas évidents
  • affichage rapide mais "download" (CPU ⬅️ GPU) très lent 🐌

CPU

OpenGL, est une machine à états

Rappels

WebGL est donc aussi une machine à états

  • préparation des données
    • format, type...
  • préparation de l'état global
    • position, couleur, blending...
  • rendu
    • envoi au GPU pour traitements par shaders

OpenGL Pipeline

Rappels

Rasterization

Illustration interactive

WebGL Fundamentals

by
Gregg Tavares (@greggman)
Chrome WebGL implementor

Importance des shaders

Permettent d'exploiter au maximum le GPU

  • rapidité d'exécution
    • des milliers de cœurs dans le GPU!
    • une fois que les données sont sur le GPU, le code est aussi rapide quelle que soit l'API ou le langage
  • flexibilité du rendu
    • le pipeline était fixe, non programmable avant 2001

Programmation des shaders

  • l'application envoie au GPU:
    • des buffers (vertex, normales, connectivité...) et des textures
    • les shaders à compiler et à exécuter
  • les vertex shaders appelés une fois pour chaque vertex
  • chaque triangle de vertex est converti en fragments (rasterization)
  • les pixel fragment shaders appelés sur chaque fragment

Du triangle au pixel

Illustration interactive

Making WebGL Dance

by
Steven Wittens

GLSL: Langage de programmation

  • variables

    • uniform: entrée, fournie par l'application, constante pour tout le programme
    • attribute: entrée de vertex shader, fournie par l'application: donnée du vertex buffer, varie par vertex
    • varying: sortie de vertex shader / entrée de fragment shader

  • fonctions: dialecte du C

  • GLSL pour WebGL 1.0, cf page 3

  • GLSL pour WebGL 2.0: version OpenGL ES 3.0, cf page 8

WebGL

Let's code!

PAUSE

30' ⌛

Annexes

  • Histoire de WebGL

https://web.eecs.umich.edu/~sugih/courses/eecs487/lectures/20-History+ES+WebGL.pdf

  • Cours WebGL 2

https://perso.univ-rennes1.fr/pierre.nerzic/IMR2/IMR2 - Synthèse d'images - CM2.pdf

  • Outils d'analyse, vérification, dump, debug WebGL

https://github.com/greggman/webgl-helpers#webgl-gl-error-checkjs

960px preview

![bg](https://bafybeifdf6t2elc24tlxggq4r4h7vgyvrkevojokjzu4ekkrxxqrswfqrm.ipfs.infura-ipfs.io/)

![bg](https://images.unsplash.com/photo-1594047752131-1ec0a6dfa4fc)

<!-- _footer: photo de couverture par @Bappie: https://images.unsplash.com/photo-1594047752131-1ec0a6dfa4fc

# ![height:110px](https://www.isep.fr/wp-content/themes/isep/img/logo_isep.svg)

![bg right](https://d201n44z4ifond.cloudfront.net/wp-content/uploads/sites/6/2019/10/16165332/Screen-Shot-2019-10-15-at-12.56.22-PM.png)

![bg left:50%](https://events.3ds.com/sites/default/files/styles/playground_experience_medium/public/2019-03/immersive-collaboration-experience-tribe-2-experience-1_0.PNG)

![bg](https://media.wired.com/photos/59267509f3e2356fd80094d1/master/pass/Singapore_Bishan_windsim_HP.jpg)

![bg fit](https://mms.businesswire.com/media/20141112006720/en/441072/4/Dassault_Systemes_Living_Heart_1.jpg)

![bg 110%](http://www.cao.fr/images_cp/plein/6772.jpg)

source: https://web.eecs.umich.edu/~sugih/courses/eecs487/lectures/20-History+ES+WebGL.pdf

![bg right vertical fit](https://steemitimages.com/p/KWcVEiwEzuiBTRjkbQErt6ge69ftc1GVX4fCr3en9K5bs5hCcEWsc6RNrn4oJbz7d748cj3ToFWMzCn4gM)

WebGL stack

![bg fit](https://tech.metail.com/wp-content/uploads/2018/05/webgl01.png)