Thousands of Styled Rectangles in 120FPS on GPU – tchayen.com
tchayen.com · 2,943 words · saved by 1 readers
Secrets of rendering performant UIs in WebGPU.
Thousands of Styled Rectangles in 120FPS on GPU - tchayen.com Thousands of Styled Rectangles in 120FPS on GPU August 29, 2023 Today I will explain how to write a UI with 100,000 moving, styled rectangles that runs at 120 FPS on an M1 Macbook. I’ve been coming back to this problem from time to time and finally managed to connect all the missing pieces together. First I figured out rounded corners and borders, and recently – blur. This allows to implement box-shadow , border-radius , border and of course background-color , which together make up vast majority of modern website styling (that is n
saved by
related reading
- How to Write a Flexbox Layout Engine - tchayen.comtchayen.com
- Leveraging Rust and the GPU to render user interfaces at 120 FPS — Zed's Blogzed.dev
- Details That Make Interfaces Feel Betterjakub.kr
- Grainradgrainrad.com
- The Case for Use.GPU — Acko.netacko.net
- Shading Motion - The Blog of Maxime Heckelblog-git-motion-post-maxime-heckels-projects.vercel.app
- Creating Daylight | The Shadows | Blogbasement.studio
- The Web Animation Performance Tier List | Motion Magazinemotion.dev
- The Web Animation Performance Tier List | Motion Magazinemotion.dev
- Crafting the Next.js Websiterauno.me
- The Blog of Maxime Heckelblog.maximeheckel.com
- Text Rendering Hates You - Faultlorefaultlore.com