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
40
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.4k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
470
GLSL PostEffect in TouchDesigner
fand
2
1.9k
VEDA GLSL Livecoding workshop
fand
2
5.1k
PWA 方法 無料 今すぐ
fand
3
1.4k
Have you ever heard GPUs cry?
fand
2
3.6k
Real World GLSL
fand
0
240
APIs for VJ-ing
fand
1
6.7k
Style your Components with styled-component!
fand
1
660
Other Decks in Technology
See All in Technology
再考 アクターモデル/ reconsider actor model
ytake
0
360
The XZ Backdoor Story
fr0gger
0
3.6k
PDF Viewer作成の今までとこれから
hunachi
0
470
20240912 JJUGナイトセミナー
mii1004
0
140
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
150
とあるOSSを継続可能にするための取り組みについて / OSS Refactoring Process
bun913
1
210
Swift Testingのconfirmationを コードリーディング/Dive into Swift Testing confirmation
laprasdrum
2
260
不動産 x AIことはじめ~データの真価を拓くために
estie
0
110
DevRelの始め方
moongift
PRO
1
390
「家族アルバム みてね」における運用管理・ オブザーバビリティの全貌 / Overview of Operation Management and Observability in FamilyAlbum
isaoshimizu
4
160
テスト”ケース”駆動開発 で手戻りをなくそう
ryohma0510
0
320
JEP 480: Structured Concurrency
aya_ebata
0
130
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
Side Projects
sachag
451
42k
Designing for Performance
lara
604
68k
Designing for humans not robots
tammielis
248
25k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Building an army of robots
kneath
302
42k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
We Have a Design System, Now What?
morganepeng
48
7.1k
Statistics for Hackers
jakevdp
794
220k
It's Worth the Effort
3n
182
27k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
A Tale of Four Properties
chriscoyier
155
22k
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