# glass

Published articles for glass.

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.

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