WebGL 2D Rendering with PixiJS
summary
PixiJS with WebGL is used to bypass the browser render pipeline and draw on the GPU: the demo loads assets with Pixi’s loader, composes sprites, applies blur and color-matrix filters, and uses the Pixi ticker for delta-timed animations. The working app shows 14 profile images with blurred-to-sharp hover and a slide-down detail panel, integrates CSS variables via webpack, includes Cordova/Electron deployment notes, and a stress test rendering 1,400 images at ~60fps to demonstrate performance.
AI-written summary · about
chapters (11)
- 0:00PixiJS and WebGL intro
- 3:10Why WebGL for 2D
- 7:45WebGL limits and fixes
- 10:45Build PixiJS app
- 12:38Loading assets
- 20:34HTML/CSS in apps
- 21:38Animation filters
- 28:05Page transitions
- 35:40CSS and Webpack
- 39:43Performance with images
- 41:09Future and Cordova
related talks
26mSVG, Canvas, and WebGL: The Power, the Beauty, and the Cost
37mTricky JS and WebGL practices to achieve the best performance on mobile
39mLife of a pixel: A visual explanation of rendering performance
58mMemes, Shaders and PixiJS: How an RTS on the Web Loads in 3 Seconds and Delivers 120 FPS
28mTurbo charging 2D on the web
32mPainting Pixels with WebGL with React Hooks
01h 08mThe quest for the graphical web
26mBuilding a 2D Game from Scratch with WebGPU