# Three.js shaders

Custom GPU shader programming using Three.js materials and rendering APIs.

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.

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

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

## Behind the build: 2025's BFCM globe in a pinball machine 🌎🕹

DevFeed: [Behind the build: 2025's BFCM globe in a pinball machine 🌎🕹](<https://devfeed.tech/articles/behind-the-build-2025-s-bfcm-globe-in-a-pinball-machine-1276.md>)

Original publisher: [Read original article](<https://shopify.engineering/2025-bfcm-live-globe>)

Author: Shopify Engineering

Published: 2025-12-03T14:28:24Z

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: [Shopify](<https://devfeed.tech/topics/shopify.md>), [Three.js](<https://devfeed.tech/topics/threejs.md>), [real-time](<https://devfeed.tech/topics/real-time.md>), [React](<https://devfeed.tech/topics/react.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Three.js shaders](<https://devfeed.tech/topics/three-js-shaders.md>)

Tags: [2025](<https://devfeed.tech/tags/2025.md>), [3d](<https://devfeed.tech/tags/3d.md>), [browser](<https://devfeed.tech/tags/browser.md>), [js](<https://devfeed.tech/tags/js.md>), [performance](<https://devfeed.tech/tags/performance.md>), [physics](<https://devfeed.tech/tags/physics.md>), [pixel](<https://devfeed.tech/tags/pixel.md>), [react](<https://devfeed.tech/tags/react.md>), [react-three-fiber](<https://devfeed.tech/tags/react-three-fiber.md>), [real-time](<https://devfeed.tech/tags/real-time.md>), [server-sent-events](<https://devfeed.tech/tags/server-sent-events.md>), [shopify](<https://devfeed.tech/tags/shopify.md>), [stream](<https://devfeed.tech/tags/stream.md>), [three-js](<https://devfeed.tech/tags/three-js.md>)

### AI overview

Shopify describes its 2025 BFCM live globe, implemented as a browser-based pinball machine that visualizes merchant sales in real time. The three.js app uses react-three-fiber, server-sent events, a physics engine, VR support, and shaders for its display animations.

### Source excerpt

Real-time merchant sales rendered on our globe, Easter eggs galore, and a pinball machine because... why not?

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