# React Three Fiber Published articles for React Three Fiber. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Building an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL DevFeed: [Building an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL]() Original publisher: [Read original article]() Author: Filip Kantedal Published: 2026-09-08T13:09:48Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [webgpu](), [Three.js custom shaders](), [refraction shader](), [signed distance functions]() Tags: [3d-web-experiences](), [chromatic-dispersion](), [creative-coding](), [custom-shaders](), [glass](), [glass-shader](), [glassmorphism](), [gpu-rendering](), [infinite](), [infinite-carousel](), [infinite-grid](), [interactive-3d](), [liquid-glass](), [next-js](), [r3f](), [react-three-fiber](), [refraction-shader](), [sdf](), [shader-effects](), [signed-distance-functions](), [three-js](), [three-js-shading-language](), [three-js-webgpu](), [tsl](), [tsl-shaders](), [tutorials](), [video](), [webgl](), [webgpu](), [webgpu-shaders]() ### AI overview A tutorial on building an infinite liquid-glass grid in the browser with Three.js, WebGPU, TSL, custom shaders, and video textures. ### Source excerpt An exploration of infinite grids, liquid glass, and video refraction using Three.js, WebGPU, TSL, and custom shaders. ## Behind the build: 2025's BFCM globe in a pinball machine ๐ŸŒŽ๐Ÿ•น DevFeed: [Behind the build: 2025's BFCM globe in a pinball machine ๐ŸŒŽ๐Ÿ•น]() Original publisher: [Read original article]() Author: Shopify Engineering Published: 2025-12-03T14:28:24Z Content type: article Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [Shopify](), [Three.js](), [real-time](), [React](), [browser](), [Three.js shaders]() Tags: [2025](), [3d](), [browser](), [js](), [performance](), [physics](), [pixel](), [react](), [react-three-fiber](), [real-time](), [server-sent-events](), [shopify](), [stream](), [three-js]() ### AI overview Shopify describes its 2025 BFCM live globe, implemented as a browser-based pinball machine that visualizes merchant sales in real time. The three.js app uses react-three-fiber, server-sent events, a physics engine, VR support, and shaders for its display animations. ### Source excerpt Real-time merchant sales rendered on our globe, Easter eggs galore, and a pinball machine because... why not? ## The Future of React Native Graphics: WebGPU, Skia, and Beyond DevFeed: [The Future of React Native Graphics: WebGPU, Skia, and Beyond]() Original publisher: [Read original article]() Author: William Candillon Published: 2025-06-20T15:37:49Z Content type: article Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [React Native](), [webgpu](), [Three.js](), [GPU](), [Web]() Tags: [3d](), [gpu](), [react](), [react-native](), [react-three-fiber](), [three-js](), [web](), [webgpu]() ### AI overview The article explains how WebGPU and Skia Graphite are expanding React Native graphics. It describes a unified backend architecture, closer alignment with the web ecosystem, general-purpose GPU computing, and support for Three.js and React Three Fiber, with examples running across iOS and Android. ### Source excerpt WebGPU is revolutionizing React Native graphics by enabling a unified backend architecture, leveraging web ecosystem giants like Three.js for 3D experiences, and facilitating general-purpose GPU computing for tasks like machine learning. This has directly led to significant performance enhancements and expanded platform support for React Native Skia, with the upcoming Skia Graphite promising features like automatic threading and seamless 2D/3D composition. ## How We Built the BFCM 2023 Globe DevFeed: [How We Built the BFCM 2023 Globe]() Original publisher: [Read original article]() Author: Diego Macario Bello Published: 2024-10-30T19:03:30Z Content type: article Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [Three.js](), [Three.js custom shaders](), [Three.js shaders](), [real-time](), [3D](), [Shopify](), [data]() Tags: [3d](), [performance](), [react-three-fiber](), [real-time](), [render](), [shaders](), [shopify](), [three-js](), [vertex](), [visualization]() ### AI overview This article explains how Shopify built and optimized an interactive real-time 3D globe for BFCM purchases. It covers arcs representing orders, Bรฉzier curves, mesh construction, camera-facing vertex-shader techniques, UV-based texturing, and independently animated dissolve effects using Three.js and React-three-fiber. ### Source excerpt Every year for Black Friday Cyber Monday (BFCM), we put together a real-time visualization of purchases made through Shopify-powered merchants worldwide. This year we're cooking up something big, and in anticipation we wanted to show you how we built the globe last year. Video of BFCM 2023 Globe Besides going for better visuals, a big focus was performance. ## Coding the stars - an interactive constellation with Three.js and React Three Fiber DevFeed: [Coding the stars - an interactive constellation with Three.js and React Three Fiber]() Original publisher: [Read original article]() Author: Francesco Sansalvadore Published: 2023-08-04T07:00:00Z Content type: tutorial Language: en Sources: [Supabase Blog]() Topics: [R3F](), [Three.js](), [coding]() Tags: [animation](), [article](), [coding](), [js](), [react-three-fiber](), [three-js]() ### AI overview Supabase explains how it built an interactive constellation animation for Launch Week 8 using Three.js and React Three Fiber. The article introduces the approach, scene setup, core R3F concepts, dependencies, particle geometry, materials, blending, and lighting. ### Source excerpt How we built a constellation of stars with Three.js and React Three Fiber.