# glass shader

Published articles for glass shader.

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.