# three.js WebGPU

Published articles for three.js WebGPU.

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](<https://devfeed.tech/articles/building-an-infinite-liquid-glass-grid-with-three-js-webgpu-and-tsl-4345.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/08/building-an-infinite-liquid-glass-grid-with-three-js-webgpu-and-tsl/>)

Author: Filip Kantedal

Published: 2026-09-08T13:09:48Z

Content type: tutorial

Language: en

Sources: [Codrops](<https://devfeed.tech/sources/codrops.md>)

Topics: [webgpu](<https://devfeed.tech/topics/webgpu.md>), [Three.js custom shaders](<https://devfeed.tech/topics/three-js-custom-shaders.md>), [refraction shader](<https://devfeed.tech/topics/refraction-shader.md>), [signed distance functions](<https://devfeed.tech/topics/signed-distance-functions.md>)

Tags: [3d-web-experiences](<https://devfeed.tech/tags/3d-web-experiences.md>), [chromatic-dispersion](<https://devfeed.tech/tags/chromatic-dispersion.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [custom-shaders](<https://devfeed.tech/tags/custom-shaders.md>), [glass](<https://devfeed.tech/tags/glass.md>), [glass-shader](<https://devfeed.tech/tags/glass-shader.md>), [glassmorphism](<https://devfeed.tech/tags/glassmorphism.md>), [gpu-rendering](<https://devfeed.tech/tags/gpu-rendering.md>), [infinite](<https://devfeed.tech/tags/infinite.md>), [infinite-carousel](<https://devfeed.tech/tags/infinite-carousel.md>), [infinite-grid](<https://devfeed.tech/tags/infinite-grid.md>), [interactive-3d](<https://devfeed.tech/tags/interactive-3d.md>), [liquid-glass](<https://devfeed.tech/tags/liquid-glass.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [r3f](<https://devfeed.tech/tags/r3f.md>), [react-three-fiber](<https://devfeed.tech/tags/react-three-fiber.md>), [refraction-shader](<https://devfeed.tech/tags/refraction-shader.md>), [sdf](<https://devfeed.tech/tags/sdf.md>), [shader-effects](<https://devfeed.tech/tags/shader-effects.md>), [signed-distance-functions](<https://devfeed.tech/tags/signed-distance-functions.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [three-js-shading-language](<https://devfeed.tech/tags/three-js-shading-language.md>), [three-js-webgpu](<https://devfeed.tech/tags/three-js-webgpu.md>), [tsl](<https://devfeed.tech/tags/tsl.md>), [tsl-shaders](<https://devfeed.tech/tags/tsl-shaders.md>), [tutorials](<https://devfeed.tech/tags/tutorials.md>), [video](<https://devfeed.tech/tags/video.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [webgpu](<https://devfeed.tech/tags/webgpu.md>), [webgpu-shaders](<https://devfeed.tech/tags/webgpu-shaders.md>)

### 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.

## Drawing With Light: An Exploration of Lit GPU Tubes with TSL and WebGPU

DevFeed: [Drawing With Light: An Exploration of Lit GPU Tubes with TSL and WebGPU](<https://devfeed.tech/articles/drawing-with-light-an-exploration-of-lit-gpu-tubes-with-tsl-and-webgpu-4344.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/07/drawing-with-light-an-exploration-of-lit-gpu-tubes-with-tsl-and-webgpu/>)

Author: Mathis Biabiany

Published: 2026-09-07T14:01:56Z

Content type: tutorial

Language: en

Sources: [Codrops](<https://devfeed.tech/sources/codrops.md>)

Topics: [Three.js shaders](<https://devfeed.tech/topics/three-js-shaders.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [creative-coding-webgpu](<https://devfeed.tech/tags/creative-coding-webgpu.md>), [curve-geometry](<https://devfeed.tech/tags/curve-geometry.md>), [generative-art-three-js](<https://devfeed.tech/tags/generative-art-three-js.md>), [gpu-animation](<https://devfeed.tech/tags/gpu-animation.md>), [gpu-generated-geometry](<https://devfeed.tech/tags/gpu-generated-geometry.md>), [gpu-rendering](<https://devfeed.tech/tags/gpu-rendering.md>), [gpu-tubes](<https://devfeed.tech/tags/gpu-tubes.md>), [lit-tubes-three-js](<https://devfeed.tech/tags/lit-tubes-three-js.md>), [meshline-three-js](<https://devfeed.tech/tags/meshline-three-js.md>), [meshline-webgpu](<https://devfeed.tech/tags/meshline-webgpu.md>), [meshstandardnodematerial](<https://devfeed.tech/tags/meshstandardnodematerial.md>), [nodematerial-three-js](<https://devfeed.tech/tags/nodematerial-three-js.md>), [parallel-transport-frames](<https://devfeed.tech/tags/parallel-transport-frames.md>), [pbr-materials-three-js](<https://devfeed.tech/tags/pbr-materials-three-js.md>), [playground](<https://devfeed.tech/tags/playground.md>), [procedural-curves](<https://devfeed.tech/tags/procedural-curves.md>), [procedural-geometry](<https://devfeed.tech/tags/procedural-geometry.md>), [procedural-tubes](<https://devfeed.tech/tags/procedural-tubes.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [three-js-shaders](<https://devfeed.tech/tags/three-js-shaders.md>), [three-js-tsl](<https://devfeed.tech/tags/three-js-tsl.md>), [three-js-webgpu](<https://devfeed.tech/tags/three-js-webgpu.md>), [tsl](<https://devfeed.tech/tags/tsl.md>), [tsl-shaders](<https://devfeed.tech/tags/tsl-shaders.md>), [tube-geometry](<https://devfeed.tech/tags/tube-geometry.md>), [tube-renderer](<https://devfeed.tech/tags/tube-renderer.md>), [webgpu](<https://devfeed.tech/tags/webgpu.md>), [webgpu-rendering](<https://devfeed.tech/tags/webgpu-rendering.md>), [webgpu-shaders](<https://devfeed.tech/tags/webgpu-shaders.md>)

### AI overview

A technical exploration of rendering lit GPU tubes with TSL and WebGPU. It contrasts screen-facing meshlines with tube geometry that can receive lighting, shading, and occlusion.

### Source excerpt

How a meshline habit turned into a tube renderer, and the three ways I got the maths wrong along the way.