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
76
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.5k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
500
GLSL PostEffect in TouchDesigner
fand
2
2k
VEDA GLSL Livecoding workshop
fand
2
5.2k
PWA 方法 無料 今すぐ
fand
3
1.5k
Have you ever heard GPUs cry?
fand
2
3.7k
Real World GLSL
fand
0
260
APIs for VJ-ing
fand
1
6.8k
Style your Components with styled-component!
fand
1
730
Other Decks in Technology
See All in Technology
Culture Deck
optfit
0
330
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
事業継続を支える自動テストの考え方
tsuemura
0
300
SCSAから学ぶセキュリティ管理
masakamayama
0
140
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
君も受託系GISエンジニアにならないか
sudataka
2
370
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
4 Signs Your Business is Dying
shpigford
182
22k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
The World Runs on Bad Software
bkeepers
PRO
67
11k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
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