# GPU rendering

Published articles for GPU rendering.

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.

## From Rays to Meshes: Building Vercel's Prism with vgpu

DevFeed: [From Rays to Meshes: Building Vercel's Prism with vgpu](<https://devfeed.tech/articles/from-rays-to-meshes-building-vercel-s-prism-with-vgpu-4334.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/03/from-rays-to-meshes-building-vercels-prism-with-vgpu/>)

Author: Matias Gonzalez Fernandez

Published: 2026-09-03T16:01:06Z

Content type: tutorial

Language: en

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

Topics: [GPU](<https://devfeed.tech/topics/gpu.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [3d-graphics](<https://devfeed.tech/tags/3d-graphics.md>), [adaptive-rendering](<https://devfeed.tech/tags/adaptive-rendering.md>), [articles](<https://devfeed.tech/tags/articles.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [glass](<https://devfeed.tech/tags/glass.md>), [glass-shader](<https://devfeed.tech/tags/glass-shader.md>), [glsl](<https://devfeed.tech/tags/glsl.md>), [glsl-shaders](<https://devfeed.tech/tags/glsl-shaders.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [gpu-optimization](<https://devfeed.tech/tags/gpu-optimization.md>), [gpu-rendering](<https://devfeed.tech/tags/gpu-rendering.md>), [interactive-web-graphics](<https://devfeed.tech/tags/interactive-web-graphics.md>), [javascript-graphics](<https://devfeed.tech/tags/javascript-graphics.md>), [light-refraction](<https://devfeed.tech/tags/light-refraction.md>), [mesh](<https://devfeed.tech/tags/mesh.md>), [prism-shader](<https://devfeed.tech/tags/prism-shader.md>), [ray-tracing](<https://devfeed.tech/tags/ray-tracing.md>), [real-time-rendering](<https://devfeed.tech/tags/real-time-rendering.md>), [real-time-shaders](<https://devfeed.tech/tags/real-time-shaders.md>), [shader-performance](<https://devfeed.tech/tags/shader-performance.md>), [shader-programming](<https://devfeed.tech/tags/shader-programming.md>), [shaders](<https://devfeed.tech/tags/shaders.md>), [vercel](<https://devfeed.tech/tags/vercel.md>), [vercel-prism](<https://devfeed.tech/tags/vercel-prism.md>), [vercel-vgpu](<https://devfeed.tech/tags/vercel-vgpu.md>), [vgpu](<https://devfeed.tech/tags/vgpu.md>), [web-graphics](<https://devfeed.tech/tags/web-graphics.md>), [web-shaders](<https://devfeed.tech/tags/web-shaders.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [webgl-shaders](<https://devfeed.tech/tags/webgl-shaders.md>)

### AI overview

A tutorial on creating Vercel's prism visual with vgpu shaders. It replaces costly ray-based light simulation with refracted paths connected into a 3D mesh, then adds an environment-mapped glass shader, bloom, and particles.

### Source excerpt

A look at how Vercel's vgpu creates a performant prism effect using shaders, geometry, glass, and adaptive rendering.