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