Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Enchant your website with VFX-JS
Search
Amagi
August 29, 2024
Technology
0
130
Enchant your website with VFX-JS
Presentation at VanJS, 2024-08-28.
https://lu.ma/gykjonp2?tk=5KKH7K
Amagi
August 29, 2024
Tweet
Share
More Decks by Amagi
See All by Amagi
How to hack VS Code: evil ways (Japanese)
fand
5
3.6k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
540
GLSL PostEffect in TouchDesigner
fand
2
2k
VEDA GLSL Livecoding workshop
fand
2
5.3k
PWA 方法 無料 今すぐ
fand
3
1.5k
Have you ever heard GPUs cry?
fand
2
3.8k
Real World GLSL
fand
0
280
APIs for VJ-ing
fand
1
7k
Style your Components with styled-component!
fand
1
820
Other Decks in Technology
See All in Technology
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
450
AI連携の新常識! 話題のMCPをはじめて学ぶ!
makoakiba
0
150
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
420
AIの個性を理解し、指揮する
shoota
2
410
Kubernetes self-healing of your workload
hwchiu
1
610
マルチエージェントのチームビルディング_2025-10-25
shinoyamada
0
210
パフォーマンスチューニングのために普段からできること/Performance Tuning: Daily Practices
fujiwara3
2
140
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
emiki
0
260
OPENLOGI Company Profile for engineer
hr01
1
46k
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
11k
入院医療費算定業務をAIで支援する:包括医療費支払い制度とDPCコーディング (公開版)
hagino3000
0
120
AWSが好きすぎて、41歳でエンジニアになり、AAIを経由してAWSパートナー企業に入った話
yama3133
1
170
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
4 Signs Your Business is Dying
shpigford
186
22k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Agile that works and the tools we love
rasmusluckow
331
21k
The Pragmatic Product Professional
lauravandoore
36
7k
Statistics for Hackers
jakevdp
799
220k
Code Review Best Practice
trishagee
72
19k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Building an army of robots
kneath
305
46k
Designing for humans not robots
tammielis
254
26k
Transcript
VanJS 2024-08-28 Enchant your website with
Hi👋 I’m Amagi • Freelance Web Developer • Web, Unity,
TouchDesigner…. • Loves VJ / LiveCoding
Working for InVideo AI https://ai.invideo.io/
I love VJ / LiveCoding
None
None
None
None
None
WebGL?
WebGL • Graphics API for Web (= OpenGL for Web)
• Web site, Game, Generative Art, Demoscenes…. • GPGPU (AI / ML, Physics simulation, etc)
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!!
None
None
None
https://amagi.dev/vfx-js/
Shader?
Shader is for shading
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
https://images.nvidia.com/aem-dam/Solutions/Data-Center/l4/nvidia-ada-gpu-architecture-whitepaper-v2.1.pdf NVIDIA RTX4090
None
Shaders can be used for image effects Input image Output
image
GLSL - OpenGL Shading Language
Sinewave effect
How VFX-JS works
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
Syncing 3D planes to HTML elements • Cover entire window
with a WebGL canvas
Syncing 3D planes to HTML elements • Cover entire window
with a WebGL canvas • Sync element position / size to 3D planes
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
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
None
Text effects…? • Text can’t be loaded as a texture
in WebGL • VFX-JS converts DOM elements to SVG image • SVG’s <foreignObject>
None
None
None
Limitations • Deeply nested DOM tree • Can’t use Web
fonts…!!
None
None
None
Try VFX-JS now! https://codepen.io/fand/pen/ZENvdEM
REACT-VFX
None
The Book of Shaders
Tutorial by kishimisu
Check the website! https://amagi.dev/vfx-js