Enchant your website with VFX-JS

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

Transcript

1. VanJS 2024-08-28 Enchant your website with
2. Hi👋 I’m Amagi • Freelance Web Developer • Web, Unity, TouchDesigner…. • Loves VJ / LiveCoding
3. Working for InVideo AI https://ai.invideo.io/
4. I love VJ / LiveCoding
10. WebGL?
11. WebGL • Graphics API for Web (= OpenGL for Web) • Web site, Game, Generative Art, Demoscenes…. • GPGPU (AI / ML, Physics simulation, etc)
12. 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!!
16. https://amagi.dev/vfx-js/
17. Shader?
18. Shader is for shading
19. 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
20. https://images.nvidia.com/aem-dam/Solutions/Data-Center/l4/nvidia-ada-gpu-architecture-whitepaper-v2.1.pdf NVIDIA RTX4090
22. Shaders can be used for image effects Input image Output image
23. GLSL - OpenGL Shading Language
24. Sinewave effect
25. How VFX-JS works
26. 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
27. Syncing 3D planes to HTML elements • Cover entire window with a WebGL canvas
28. Syncing 3D planes to HTML elements • Cover entire window with a WebGL canvas • Sync element position / size to 3D planes
29. 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
30. 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
32. Text effects…? • Text can’t be loaded as a texture in WebGL • VFX-JS converts DOM elements to SVG image • SVG’s <foreignObject>
36. Limitations • Deeply nested DOM tree • Can’t use Web fonts…!!
40. Try VFX-JS now! https://codepen.io/fand/pen/ZENvdEM
41. REACT-VFX
43. The Book of Shaders
44. Tutorial by kishimisu
45. Check the website! https://amagi.dev/vfx-js