Universal GL Effects for Web and Native
summary
gl-react exposes GLSL fragment shaders as composable React components and runs the same code on web and native, rendering heavy effects like deformation, localized blur and tinting on the GPU. A real app hits 60 fps on iOS, blurs use an efficient multi-pass blur, and the renderer deduplicates virtual nodes to cut a 38-node 20 ms pipeline to 13 nodes and 4 ms. An inspector and profiler show shaders, textures and timings and the library ships on npm as gl-react.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 3:04React GR
- 4:18OpenGL
- 6:07Fragment
- 8:18GLsl
- 9:29Example
- 12:22GL React
- 16:06Real World Example
- 18:01Image Title Example
- 22:54Image Graph Example
- 26:38Summary
related talks
18mReact and WebGL
27m3D graphics in React & React Native using React-three-fiber
32mBringing webgl to react
36mBlasting React into Space: Building fluid interface swith React and WebGL
32mPainting Pixels with WebGL with React Hooks
35mGamedev on React + WebGL
55mReact: Not Just a Popular Library
27mNative Web Apps: React and WebAssembly to Rewrite Native Apps