# real-time 3D

Published articles for real-time 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.

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

## What's new in Svelte: June 2024

DevFeed: [What's new in Svelte: June 2024](<https://devfeed.tech/articles/what-s-new-in-svelte-june-2024-3095.md>)

Original publisher: [Read original article](<https://svelte.dev/blog/whats-new-in-svelte-june-2024>)

Author: Dani Sandoval

Published: 2024-06-01T00:00:00Z

Content type: article

Language: en

Sources: [Svelte blog](<https://devfeed.tech/sources/svelte-blog.md>)

Topics: [Svelte](<https://devfeed.tech/topics/svelte.md>), [changelog](<https://devfeed.tech/topics/changelog.md>), [Compiler](<https://devfeed.tech/topics/compiler.md>), [Extension](<https://devfeed.tech/topics/extension.md>), [real-time 3D](<https://devfeed.tech/topics/real-time-3d.md>)

Tags: [changelog](<https://devfeed.tech/tags/changelog.md>), [chrome-extension](<https://devfeed.tech/tags/chrome-extension.md>), [compiler](<https://devfeed.tech/tags/compiler.md>), [real-time-3d](<https://devfeed.tech/tags/real-time-3d.md>), [svelte](<https://devfeed.tech/tags/svelte.md>)

### AI overview

Svelte's June 2024 newsletter covers pre-release Svelte 5 updates, including improved migration tooling, MathML support, the Svelte Inspector, a new reactive rune, and a compiler option for monorepos. It also highlights community projects and learning resources built around Svelte and SvelteKit.

### Source excerpt

The maintainers have been hard at work getting the Svelte 5 Release Candidate ready for release. In this month's newsletter, you'll find highlights from the pre-release CHANGELOG and a host of items from our community showcase. Let's dive in! What's new in Svelte bind: is now disallowed on component exports in runes mode and has much better types to tell if a prop is $bindable (5.0.0-next.113, 114 and 125, Docs, #11238, #11225 and #11498) Tons of work on the migrate tool to make migrating to Svelte 5 syntax easier (5.0.0-next.116, 136 and 137, Docs, #11334, #11659, #11704) MathML is now supported (5.0.0-next.120, Docs, #11387) The Svelte Inspector is now supported (5.0.0-next.125, Docs, #11514) The $state.is rune lets you compare values or check if an object exists within a deeply reactive object/array (5.0.0-next.134, Docs, #11613) The rootDir compiler option makes filenames relative to simplify development in monorepos or complex folder structures (5.0.0-next.135, #11627) Community ShowcaseApps & Sites built with Svelte Onlook is a chrome extension that enables designers to contribute to their team's UI codebase Fluid Type Generator is a modern fluid type generator built with Svelte 5 LCH Palette Generator is a tool that allows you to easily create and save gradient palettes to be used in UI design Typepost is a simple text post generator for social media Equimake is a collaborative real-time 3D platform for learners, gamers, artists, and coders svelte.dev-machine is a physical based animation to replicate the Svelte machine on the svelte.dev homepage Learning Resources Featuring Svelte Contributors and Ambassadors Svelte 5: Compiler, Signals, and Web App Performance by JSJ 627 with Rich Harris Svelte London - May 2024 This Week in Svelte - deep dives into the Svelte changelog and new learnings from the week: 3 May 10 May 17 May 24 May To Read Securing Your SvelteKit App and Prevent Waterfalls from Multiple SvelteKit Server Hooks in sequence by Captain Codeman Sve