# interactive 3D

Published articles for interactive 3D.

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 Depth: Designing and Developing a 3D Renderer Inside Figma

DevFeed: [Building Depth: Designing and Developing a 3D Renderer Inside Figma](<https://devfeed.tech/articles/building-depth-designing-and-developing-a-3d-renderer-inside-figma-8995.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/13/building-depth-designing-and-developing-a-3d-renderer-inside-figma/>)

Author: Aleksei Kipin

Published: 2026-09-13T11:34:39Z

Content type: article

Language: en

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

Topics: [Figma 3D renderer](<https://devfeed.tech/topics/figma-3d-renderer.md>), [Figma](<https://devfeed.tech/topics/figma.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [3d-design](<https://devfeed.tech/tags/3d-design.md>), [3d-modeling](<https://devfeed.tech/tags/3d-modeling.md>), [3d-renderer-for-figma](<https://devfeed.tech/tags/3d-renderer-for-figma.md>), [3d-rendering](<https://devfeed.tech/tags/3d-rendering.md>), [3d-visualization](<https://devfeed.tech/tags/3d-visualization.md>), [3d-workflow](<https://devfeed.tech/tags/3d-workflow.md>), [articles](<https://devfeed.tech/tags/articles.md>), [case-study](<https://devfeed.tech/tags/case-study.md>), [creative-development](<https://devfeed.tech/tags/creative-development.md>), [depth-3d-renderer](<https://devfeed.tech/tags/depth-3d-renderer.md>), [depth-figma](<https://devfeed.tech/tags/depth-figma.md>), [depth-figma-plugin](<https://devfeed.tech/tags/depth-figma-plugin.md>), [design-engineering](<https://devfeed.tech/tags/design-engineering.md>), [design-tools](<https://devfeed.tech/tags/design-tools.md>), [figma](<https://devfeed.tech/tags/figma.md>), [figma-3d](<https://devfeed.tech/tags/figma-3d.md>), [figma-3d-renderer](<https://devfeed.tech/tags/figma-3d-renderer.md>), [figma-plugin](<https://devfeed.tech/tags/figma-plugin.md>), [figma-plugin-design](<https://devfeed.tech/tags/figma-plugin-design.md>), [interactive-3d](<https://devfeed.tech/tags/interactive-3d.md>), [plugin-development](<https://devfeed.tech/tags/plugin-development.md>), [product-design](<https://devfeed.tech/tags/product-design.md>), [product-design-case-study](<https://devfeed.tech/tags/product-design-case-study.md>), [real-time-rendering](<https://devfeed.tech/tags/real-time-rendering.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [ui-design](<https://devfeed.tech/tags/ui-design.md>), [ux-design](<https://devfeed.tech/tags/ux-design.md>), [visualization](<https://devfeed.tech/tags/visualization.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [workflow](<https://devfeed.tech/tags/workflow.md>)

### AI overview

An article about building Depth, a Figma plugin for quickly rendering 3D models during design work. It describes the workflow, plugin architecture, rendering behavior, and export approach.

### Source excerpt

A look at how Depth came together, from building a 3D renderer inside Figma to designing a website that explores what it can do.

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

## Building a Real-Time 3D Face Mask with MediaPipe, Threlte and Three.js

DevFeed: [Building a Real-Time 3D Face Mask with MediaPipe, Threlte and Three.js](<https://devfeed.tech/articles/building-a-real-time-3d-face-mask-with-mediapipe-threlte-and-three-js-4342.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/06/building-a-real-time-3d-face-mask-with-mediapipe-threlte-and-three-js/>)

Author: Marek Jóźwiak

Published: 2026-09-06T13:09:52Z

Content type: tutorial

Language: en

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

Topics: [Three.js webcam](<https://devfeed.tech/topics/three-js-webcam.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [3d-face-mask](<https://devfeed.tech/tags/3d-face-mask.md>), [canonical-face-model](<https://devfeed.tech/tags/canonical-face-model.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [face-landmarks](<https://devfeed.tech/tags/face-landmarks.md>), [face-mesh](<https://devfeed.tech/tags/face-mesh.md>), [face-tracking](<https://devfeed.tech/tags/face-tracking.md>), [facial-landmarks](<https://devfeed.tech/tags/facial-landmarks.md>), [generative-graphics](<https://devfeed.tech/tags/generative-graphics.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [inference](<https://devfeed.tech/tags/inference.md>), [interactive-3d](<https://devfeed.tech/tags/interactive-3d.md>), [javascript-3d](<https://devfeed.tech/tags/javascript-3d.md>), [mediapipe](<https://devfeed.tech/tags/mediapipe.md>), [mediapipe-face-landmarker](<https://devfeed.tech/tags/mediapipe-face-landmarker.md>), [mesh](<https://devfeed.tech/tags/mesh.md>), [real-time](<https://devfeed.tech/tags/real-time.md>), [real-time-3d](<https://devfeed.tech/tags/real-time-3d.md>), [real-time-face-tracking](<https://devfeed.tech/tags/real-time-face-tracking.md>), [svelte](<https://devfeed.tech/tags/svelte.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [three-js-face-mask](<https://devfeed.tech/tags/three-js-face-mask.md>), [three-js-webcam](<https://devfeed.tech/tags/three-js-webcam.md>), [threlte](<https://devfeed.tech/tags/threlte.md>), [threlte-three-js](<https://devfeed.tech/tags/threlte-three-js.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>), [tutorials](<https://devfeed.tech/tags/tutorials.md>), [video](<https://devfeed.tech/tags/video.md>), [vision](<https://devfeed.tech/tags/vision.md>), [wasm](<https://devfeed.tech/tags/wasm.md>), [webcam](<https://devfeed.tech/tags/webcam.md>), [webcam-effects](<https://devfeed.tech/tags/webcam-effects.md>), [webcam-face-tracking](<https://devfeed.tech/tags/webcam-face-tracking.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [webgl-face-tracking](<https://devfeed.tech/tags/webgl-face-tracking.md>)

### AI overview

Tutorial on building a real-time textured 3D face mask by mapping MediaPipe face landmarks onto a Three.js mesh with Threlte.

### Source excerpt

Learn how MediaPipe's face landmarks, Google's canonical face model, and Three.js come together to create a real-time textured 3D face mask.

## Inside Shopify Hack Days: Building a prototype for music-playing pages

DevFeed: [Inside Shopify Hack Days: Building a prototype for music-playing pages](<https://devfeed.tech/articles/inside-shopify-hack-days-building-a-prototype-for-music-playing-pages-1406.md>)

Original publisher: [Read original article](<https://shopify.engineering/hack-days>)

Author: Justin Henricks

Published: 2026-07-14T13:55:57Z

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: [glsl](<https://devfeed.tech/topics/glsl.md>), [real-time](<https://devfeed.tech/topics/real-time.md>), [App](<https://devfeed.tech/topics/app.md>), [Web](<https://devfeed.tech/topics/web.md>), [API](<https://devfeed.tech/topics/api.md>), [Template](<https://devfeed.tech/topics/template.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [api](<https://devfeed.tech/tags/api.md>), [app](<https://devfeed.tech/tags/app.md>), [audio](<https://devfeed.tech/tags/audio.md>), [generation](<https://devfeed.tech/tags/generation.md>), [glsl](<https://devfeed.tech/tags/glsl.md>), [hackathon](<https://devfeed.tech/tags/hackathon.md>), [interactive-3d](<https://devfeed.tech/tags/interactive-3d.md>), [real-time](<https://devfeed.tech/tags/real-time.md>), [shopify](<https://devfeed.tech/tags/shopify.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

Shopify's Hack Days team built a prototype for music-playing product pages in three days. The project combined a Shopify app, audio playback, per-track purchasing, GLSL visualizers driven by real-time audio, synced lyrics, and tour-date information.

### Source excerpt

How a Hack Days team built a music player, custom GLSL visualizers, and an artist toolkit for storefronts, all in three days.