Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Enchant your website with VFX-JS

Amagi
August 29, 2024

Enchant your website with VFX-JS

Presentation at VanJS, 2024-08-28.
https://lu.ma/gykjonp2?tk=5KKH7K

Amagi

August 29, 2024
Tweet

More Decks by Amagi

Other Decks in Technology

Transcript

  1. Hi👋 I’m Amagi • Freelance Web Developer • Web, Unity,

    TouchDesigner…. • Loves VJ / LiveCoding
  2. WebGL • Graphics API for Web (= OpenGL for Web)

    • Web site, Game, Generative Art, Demoscenes…. • GPGPU (AI / ML, Physics simulation, etc)
  3. WebGL is powerful, but… • WebGL API is too low-level

    • Three.js solves many problems, but.. • Still have to set up Camera, Renderer, Scene, Texture…. • Loading / Unloading resources are HARD!!
  4. Fragment Shader • Special program that runs on GPU •

    Fragment shader determines pixel colors •It runs for every pixel, every frame!!! • FullHD 60Hz -> 124,416,000 times / sec
  5. What VFX-JS does under the hood… • Load <img> /

    <video> as a WebGL texture • Add 3D planes to the element positions • Sync with the original <img> / <video> • Apply shader effects
  6. Syncing 3D planes to HTML elements • Cover entire window

    with a WebGL canvas • Sync element position / size to 3D planes
  7. Syncing 3D planes to HTML elements • Cover entire window

    with a WebGL canvas • Sync element position / size to 3D planes • Hide the original HTML elements
  8. Syncing 3D planes to HTML elements • Cover entire window

    with a WebGL canvas • Sync element position / size to 3D planes • Hide the original HTML elements
  9. Text effects…? • Text can’t be loaded as a texture

    in WebGL • VFX-JS converts DOM elements to SVG image • SVG’s <foreignObject>