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
120
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
6.9k
Style your Components with styled-component!
fand
1
810
Other Decks in Technology
See All in Technology
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
580
FastAPIの魔法をgRPC/Connect RPCへ
monotaro
PRO
1
690
BtoBプロダクト開発の深層
16bitidol
0
160
「Verify with Wallet API」を アプリに導入するために
hinakko
1
220
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
hogelog
3
1.7k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
77k
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
840
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
160
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
160
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.4k
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
880
PythonとLLMで挑む、 4コマ漫画の構造化データ化
esuji5
1
130
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
53
9k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
How GitHub (no longer) Works
holman
315
140k
Practical Orchestrator
shlominoach
190
11k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
570
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Facilitating Awesome Meetings
lara
56
6.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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