Gamedev on React + WebGL
summary
Argues that using PixiJS with react-pixi-fiber lets familiar React tooling and contexts drive game UI while offloading rendering; uses a viewport context for resize and SVG-as-texture to cut GPU memory. Shows GLSL shaders give the fastest effects but require low-level skill, so community filters help. Replacing sprite sheets with videos plus FFmpeg drops an example build from 60MB to 10MB. Recommends GSAP-style tweening and avoiding setState in 60fps loops.
AI-written summary · about
chapters (29)
- 0:00Intro
- 0:57My gamedev experience
- 1:31Gamedev on my job
- 2:10Well-known stack
- 3:00Reusable knowledges
- 3:36Documentation & Community
- 4:18React + Pixi.js
- 6:42I use Context debounced resize listener
- 7:06Problem: Retina
- 8:44Benefits
- 10:25Effects: Shaders
- 12:03React rendering
- 13:43Shaders: fast but hard
- 15:29Effects: Pixi.js Filters
- 16:02Benefit: Pixi Filters
- 16:31Benefit: performance
- 17:35Animations (160 Mb)
- 18:41Sprites: too big
- 19:24Animations (10 Mb)
- 20:17Videos vs Sprites
- 21:42Videos: formats
- 23:04Videos: my combination
- 23:46Videos: restrictions
- 26:40Tween.js: chaining
- 28:45Rendering architecture
- 29:08Gameplay rendering
- 29:50Interface rendering
- 30:22Interfaces everywhere
- 31:01React can be slow
related talks
32mPainting Pixels with WebGL with React Hooks
36mBlasting React into Space: Building fluid interface swith React and WebGL
18mReact and WebGL
21mBreaking out of the confines: making games in React
20mOptimizing assets for graphics heavy Web Applicatoins: tips and tricks from the game dev background
25mReact For Game Development
01h 03mWorkshop: Building a game in React and diving into react-reconciler (Part 1)
38mMy journey with WebGL