# Three.js custom shaders

Technique for writing custom GLSL vertex and fragment shaders for use with Three.js rendering materials.

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

## Turning Names Into Digital Architecture with Three.js

DevFeed: [Turning Names Into Digital Architecture with Three.js](<https://devfeed.tech/articles/turning-names-into-digital-architecture-with-three-js-4347.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/09/turning-names-into-digital-architecture-with-three-js/>)

Author: Serhii Polyvanyi

Published: 2026-09-09T17:55:00Z

Content type: article

Language: en

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

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

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [architecture](<https://devfeed.tech/tags/architecture.md>), [articles](<https://devfeed.tech/tags/articles.md>), [best-free-frontend-development-resources](<https://devfeed.tech/tags/best-free-frontend-development-resources.md>), [best-javascript-libraries-for-animations](<https://devfeed.tech/tags/best-javascript-libraries-for-animations.md>), [best-web-development-blogs](<https://devfeed.tech/tags/best-web-development-blogs.md>), [conference](<https://devfeed.tech/tags/conference.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [creative-ui-ideas-for-web-design](<https://devfeed.tech/tags/creative-ui-ideas-for-web-design.md>), [css-animations](<https://devfeed.tech/tags/css-animations.md>), [css-grid-vs-flexbox](<https://devfeed.tech/tags/css-grid-vs-flexbox.md>), [css-hover-effects](<https://devfeed.tech/tags/css-hover-effects.md>), [css-only-effects](<https://devfeed.tech/tags/css-only-effects.md>), [experiment](<https://devfeed.tech/tags/experiment.md>), [frontend-development](<https://devfeed.tech/tags/frontend-development.md>), [gsap-animation-examples](<https://devfeed.tech/tags/gsap-animation-examples.md>), [how-to-build-a-responsive-website-from-scratch](<https://devfeed.tech/tags/how-to-build-a-responsive-website-from-scratch.md>), [how-to-create-parallax-scrolling-effects](<https://devfeed.tech/tags/how-to-create-parallax-scrolling-effects.md>), [how-to-create-smooth-css-transitions](<https://devfeed.tech/tags/how-to-create-smooth-css-transitions.md>), [how-to-make-a-portfolio-website-interactive](<https://devfeed.tech/tags/how-to-make-a-portfolio-website-interactive.md>), [how-to-optimize-animations-for-performance](<https://devfeed.tech/tags/how-to-optimize-animations-for-performance.md>), [html5-and-css3-tricks](<https://devfeed.tech/tags/html5-and-css3-tricks.md>), [javascript-effects](<https://devfeed.tech/tags/javascript-effects.md>), [javascript-ui-interactions](<https://devfeed.tech/tags/javascript-ui-interactions.md>), [micro-interactions-for-websites](<https://devfeed.tech/tags/micro-interactions-for-websites.md>), [modern-web-development](<https://devfeed.tech/tags/modern-web-development.md>), [react-ui-animations](<https://devfeed.tech/tags/react-ui-animations.md>), [step-by-step-guide-to-webgl-animations](<https://devfeed.tech/tags/step-by-step-guide-to-webgl-animations.md>), [svg-animations-in-css](<https://devfeed.tech/tags/svg-animations-in-css.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [three-js-3d-animations](<https://devfeed.tech/tags/three-js-3d-animations.md>), [three-js-conference](<https://devfeed.tech/tags/three-js-conference.md>), [ui-ux-design-tips](<https://devfeed.tech/tags/ui-ux-design-tips.md>), [web-design-tutorials](<https://devfeed.tech/tags/web-design-tutorials.md>), [webgl-tutorials-for-beginners](<https://devfeed.tech/tags/webgl-tutorials-for-beginners.md>), [wordpress-themes-and-plugins](<https://devfeed.tech/tags/wordpress-themes-and-plugins.md>)

### AI overview

An interactive Three.js experiment turns typed names into lightweight, metallic-looking 3D letter structures. It explains contour generation, interpolation and deformation, structural line geometry, and a custom shader with a baked reflection map.

### Source excerpt

For the Three.js Conference in Paris, BL/S® created an interactive experiment that transforms your name into a dynamic 3D structure.

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

## Beyond the Luminance Ramp: A Shape-Aware ASCII Renderer in Three.js

DevFeed: [Beyond the Luminance Ramp: A Shape-Aware ASCII Renderer in Three.js](<https://devfeed.tech/articles/beyond-the-luminance-ramp-a-shape-aware-ascii-renderer-in-three-js-4337.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/04/beyond-the-luminance-ramp-a-shape-aware-ascii-renderer-in-three-js/>)

Author: Edoardo Lunardi

Published: 2026-09-04T15:01:38Z

Content type: tutorial

Language: en

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

Topics: [shape-aware rendering](<https://devfeed.tech/topics/shape-aware-rendering.md>), [ASCII art shader](<https://devfeed.tech/topics/ascii-art-shader.md>), [Three.js shaders](<https://devfeed.tech/topics/three-js-shaders.md>), [Three.js custom shaders](<https://devfeed.tech/topics/three-js-custom-shaders.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [ascii](<https://devfeed.tech/tags/ascii.md>), [ascii-art-shader](<https://devfeed.tech/tags/ascii-art-shader.md>), [ascii-dithering](<https://devfeed.tech/tags/ascii-dithering.md>), [ascii-shader](<https://devfeed.tech/tags/ascii-shader.md>), [atlas](<https://devfeed.tech/tags/atlas.md>), [browser-based-ascii-renderer](<https://devfeed.tech/tags/browser-based-ascii-renderer.md>), [creative-coding-three-js](<https://devfeed.tech/tags/creative-coding-three-js.md>), [custom-element-webgl](<https://devfeed.tech/tags/custom-element-webgl.md>), [draggable](<https://devfeed.tech/tags/draggable.md>), [draggable-3d-logo](<https://devfeed.tech/tags/draggable-3d-logo.md>), [glsl-ascii-shader](<https://devfeed.tech/tags/glsl-ascii-shader.md>), [glyph-atlas-rendering](<https://devfeed.tech/tags/glyph-atlas-rendering.md>), [glyph-matching-algorithm](<https://devfeed.tech/tags/glyph-matching-algorithm.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [gpu-ascii-rendering](<https://devfeed.tech/tags/gpu-ascii-rendering.md>), [gpu-glyph-search](<https://devfeed.tech/tags/gpu-glyph-search.md>), [interactive-ascii-art](<https://devfeed.tech/tags/interactive-ascii-art.md>), [luminance-ramp-alternative](<https://devfeed.tech/tags/luminance-ramp-alternative.md>), [procedural-ascii-art](<https://devfeed.tech/tags/procedural-ascii-art.md>), [real-time-ascii-rendering](<https://devfeed.tech/tags/real-time-ascii-rendering.md>), [shaders](<https://devfeed.tech/tags/shaders.md>), [shape-aware-ascii-renderer](<https://devfeed.tech/tags/shape-aware-ascii-renderer.md>), [shape-aware-rendering](<https://devfeed.tech/tags/shape-aware-rendering.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [three-js-ascii-renderer](<https://devfeed.tech/tags/three-js-ascii-renderer.md>), [three-js-custom-shaders](<https://devfeed.tech/tags/three-js-custom-shaders.md>), [three-js-shader-tutorial](<https://devfeed.tech/tags/three-js-shader-tutorial.md>), [three-js-webgl](<https://devfeed.tech/tags/three-js-webgl.md>), [tutorials](<https://devfeed.tech/tags/tutorials.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [webgl-ascii-art](<https://devfeed.tech/tags/webgl-ascii-art.md>), [webgl-post-processing](<https://devfeed.tech/tags/webgl-post-processing.md>), [webgl-shader-tutorial](<https://devfeed.tech/tags/webgl-shader-tutorial.md>)

### AI overview

A Three.js ASCII renderer improves on luminance-only glyph selection by sampling each character cell's shape and matching it against printable glyphs on the GPU.

### Source excerpt

The Codrops mark, rebuilt as a draggable solid and printed in ASCII on the GPU, where every character cell searches 95 glyphs for its own.

## How We Built the BFCM 2023 Globe

DevFeed: [How We Built the BFCM 2023 Globe](<https://devfeed.tech/articles/how-we-built-the-bfcm-2023-globe-1430.md>)

Original publisher: [Read original article](<https://shopify.engineering/how-we-built-shopifys-bfcm-2023-globe>)

Author: Diego Macario Bello

Published: 2024-10-30T19:03:30Z

Content type: article

Language: en

Sources: [Shopify Engineering](<https://devfeed.tech/sources/shopify-engineering.md>), [Shopify Engineering - Shopify Engineering](<https://devfeed.tech/sources/shopify-engineering-shopify-engineering.md>)

Topics: [Three.js](<https://devfeed.tech/topics/threejs.md>), [Three.js custom shaders](<https://devfeed.tech/topics/three-js-custom-shaders.md>), [Three.js shaders](<https://devfeed.tech/topics/three-js-shaders.md>), [real-time](<https://devfeed.tech/topics/real-time.md>), [3D](<https://devfeed.tech/topics/3d.md>), [Shopify](<https://devfeed.tech/topics/shopify.md>), [data](<https://devfeed.tech/topics/data.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [performance](<https://devfeed.tech/tags/performance.md>), [react-three-fiber](<https://devfeed.tech/tags/react-three-fiber.md>), [real-time](<https://devfeed.tech/tags/real-time.md>), [render](<https://devfeed.tech/tags/render.md>), [shaders](<https://devfeed.tech/tags/shaders.md>), [shopify](<https://devfeed.tech/tags/shopify.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [vertex](<https://devfeed.tech/tags/vertex.md>), [visualization](<https://devfeed.tech/tags/visualization.md>)

### AI overview

This article explains how Shopify built and optimized an interactive real-time 3D globe for BFCM purchases. It covers arcs representing orders, Bézier curves, mesh construction, camera-facing vertex-shader techniques, UV-based texturing, and independently animated dissolve effects using Three.js and React-three-fiber.

### Source excerpt

Every year for Black Friday Cyber Monday (BFCM), we put together a real-time visualization of purchases made through Shopify-powered merchants worldwide. This year we're cooking up something big, and in anticipation we wanted to show you how we built the globe last year. Video of BFCM 2023 Globe Besides going for better visuals, a big focus was performance.