# Three.js Shading Language

Published articles for Three.js Shading Language.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Still: From Akira to Ink Wash, Building a Generative Garden in WebGPU

DevFeed: [Still: From Akira to Ink Wash, Building a Generative Garden in WebGPU](<https://devfeed.tech/articles/still-from-akira-to-ink-wash-building-a-generative-garden-in-webgpu-4346.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/09/still-from-akira-to-ink-wash-building-a-generative-garden-in-webgpu/>)

Author: Ming Jyun Hung

Published: 2026-09-09T14:11:57Z

Content type: article

Language: en

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

Topics: [webgpu](<https://devfeed.tech/topics/webgpu.md>), [procedural flowers](<https://devfeed.tech/topics/procedural-flowers.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [articles](<https://devfeed.tech/tags/articles.md>), [case-study](<https://devfeed.tech/tags/case-study.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [deep-dive](<https://devfeed.tech/tags/deep-dive.md>), [flower-animation](<https://devfeed.tech/tags/flower-animation.md>), [generative](<https://devfeed.tech/tags/generative.md>), [generative-art](<https://devfeed.tech/tags/generative-art.md>), [generative-garden](<https://devfeed.tech/tags/generative-garden.md>), [generative-tendrils](<https://devfeed.tech/tags/generative-tendrils.md>), [gpu-instancing](<https://devfeed.tech/tags/gpu-instancing.md>), [ink-wash-effect](<https://devfeed.tech/tags/ink-wash-effect.md>), [interactive-3d](<https://devfeed.tech/tags/interactive-3d.md>), [japanese-art](<https://devfeed.tech/tags/japanese-art.md>), [japanese-print-style](<https://devfeed.tech/tags/japanese-print-style.md>), [procedural](<https://devfeed.tech/tags/procedural.md>), [procedural-animation](<https://devfeed.tech/tags/procedural-animation.md>), [procedural-art](<https://devfeed.tech/tags/procedural-art.md>), [procedural-flowers](<https://devfeed.tech/tags/procedural-flowers.md>), [real-time](<https://devfeed.tech/tags/real-time.md>), [real-time-3d](<https://devfeed.tech/tags/real-time-3d.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [three-js-case-study](<https://devfeed.tech/tags/three-js-case-study.md>), [three-js-shading-language](<https://devfeed.tech/tags/three-js-shading-language.md>), [toon-shading](<https://devfeed.tech/tags/toon-shading.md>), [tsl](<https://devfeed.tech/tags/tsl.md>), [tsl-shaders](<https://devfeed.tech/tags/tsl-shaders.md>), [vat](<https://devfeed.tech/tags/vat.md>), [vertex-animation-textures](<https://devfeed.tech/tags/vertex-animation-textures.md>), [webgpu](<https://devfeed.tech/tags/webgpu.md>), [webgpu-shaders](<https://devfeed.tech/tags/webgpu-shaders.md>)

### AI overview

A technical deep dive into a WebGPU-based, real-time 3D generative garden. It describes combining toon shading, ink-wash shadows, silk-like grain, and procedural flowers and tendrils to translate Japanese print-inspired visual principles into an interactive web scene.

### Source excerpt

A technical deep dive into Still, exploring how WebGPU, procedural systems, and Japanese art influences come together to create a living generative garden.

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