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
110
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
530
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
270
APIs for VJ-ing
fand
1
6.9k
Style your Components with styled-component!
fand
1
800
Other Decks in Technology
See All in Technology
20250728 MCP, A2A and Multi-Agents in the future
yoshidashingo
1
160
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
1.2k
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
2.2k
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
450
AI時代の知識創造 ─GeminiとSECIモデルで読み解く “暗黙知”と創造の境界線
nyagasan
0
170
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
780
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
5
2k
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
110
Microsoft Learn MCP/Fabric データエージェント/Fabric MCP/Copilot Studio-簡単・便利なAIエージェント作ってみた -"Building Simple and Powerful AI Agents with Microsoft Learn MCP, Fabric Data Agent, Fabric MCP, and Copilot Studio"-
reireireijinjin6
1
190
MCPと認可まわりの話 / mcp_and_authorization
convto
2
340
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
150
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
2
320
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
510
Side Projects
sachag
455
43k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Faster Mobile Websites
deanohume
308
31k
Into the Great Unknown - MozCon
thekraken
40
1.9k
We Have a Design System, Now What?
morganepeng
53
7.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Become a Pro
speakerdeck
PRO
29
5.4k
Scaling GitHub
holman
461
140k
Adopting Sorbet at Scale
ufuk
77
9.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
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