# \#shaders

**URL:** https://discourse.threejs.org/tag/shaders/96.md

[Latest](https://discourse.threejs.org/latest.md) · [Categories](https://discourse.threejs.org/categories.md) · [Tags](https://discourse.threejs.org/tags.md)

---

## [Gargantua — a ray-traced black hole in my portfolio (WebGL, one draw call)](https://discourse.threejs.org/t/gargantua-a-ray-traced-black-hole-in-my-portfolio-webgl-one-draw-call/94960)

<div class="topic-metadata">

**Author:** [@jonas\_javier](https://discourse.threejs.org/u/jonas_javier)\
**Replies:** 4\
**Last updated:** [October 4, 2026, 2:29pm UTC](https://discourse.threejs.org/t/gargantua-a-ray-traced-black-hole-in-my-portfolio-webgl-one-draw-call/94960 "2026-10-04T14:29:05Z")

</div>

Hi everyone! I built my portfolio around a black hole inspired by Interstellar’s Gargantua, and I wanted to share it here. It isn’t a model or a texture: a fragment shader traces the light around a Schwarzschild blac…

---

## [High-Performance Grass Rendering in Three.js + WebGPU](https://discourse.threejs.org/t/high-performance-grass-rendering-in-three-js-webgpu/94175)

<div class="topic-metadata">

**Author:** [@Muhammad\_Bilal](https://discourse.threejs.org/u/Muhammad_Bilal)\
**Replies:** 5\
**Last updated:** [October 4, 2026, 7:58am UTC](https://discourse.threejs.org/t/high-performance-grass-rendering-in-three-js-webgpu/94175 "2026-10-04T07:58:57Z")

</div>

After 200+ hours of development, I’m finally sharing the first public demo of Three.js Grassworks, a real-time grass system I’ve been building for Three.js and WebGPU. The demo is now live: Three.js Grassworks is bui…

---

## [Porsche Driving Experience Game - Realistic Graphics (free)](https://discourse.threejs.org/t/porsche-driving-experience-game-realistic-graphics-free/94961)

<div class="topic-metadata">

**Author:** [@Vladimir\_Maximovich\_Tuchkevich](https://discourse.threejs.org/u/Vladimir_Maximovich_Tuchkevich)\
**Replies:** 2\
**Last updated:** [October 3, 2026, 12:11pm UTC](https://discourse.threejs.org/t/porsche-driving-experience-game-realistic-graphics-free/94961 "2026-10-03T12:11:43Z")

</div>

Dear colleagues, I would like to share my project showcase with you. I have made a small racing game with animated car model featuring trunk, spoiler, doors, wheels, lights, steering, exhaust, signals and gauge animatio…

---

## [ALIVE: a night farm, fully procedural, no assets](https://discourse.threejs.org/t/alive-a-night-farm-fully-procedural-no-assets/94679)

<div class="topic-metadata">

**Author:** [@red-reddington](https://discourse.threejs.org/u/red-reddington)\
**Replies:** 3\
**Last updated:** [October 2, 2026, 2:16pm UTC](https://discourse.threejs.org/t/alive-a-night-farm-fully-procedural-no-assets/94679 "2026-10-02T14:16:21Z")

</div>

CodePen | GitHub Pages | Source This started months ago. I needed something to get my head out of work, and instead of fidgeting aimlessly I decided to code, with zero plan and no aim whatsoever. I built a pig just for …

---

## [CÉNIT — a contemplative sky experience built with Three.js](https://discourse.threejs.org/t/cenit-a-contemplative-sky-experience-built-with-three-js/94898)

<div class="topic-metadata">

**Author:** [@thecocou](https://discourse.threejs.org/u/thecocou)\
**Replies:** 0\
**Last updated:** [October 1, 2026, 7:49pm UTC](https://discourse.threejs.org/t/cenit-a-contemplative-sky-experience-built-with-three-js/94898 "2026-10-01T19:49:08Z")

</div>

Hi everyone! I’m working on CÉNIT, an interactive nature experience built with Three.js, centered on looking up at the sky. Clouds drift by, birds cross overhead, constellations appear and fireflies light up the night. …

---

## [A Playable Snow Scene Built in threejs + webgpu + tsl](https://discourse.threejs.org/t/a-playable-snow-scene-built-in-threejs-webgpu-tsl/94896)

<div class="topic-metadata">

**Author:** [@cabbage\_blame](https://discourse.threejs.org/u/cabbage_blame)\
**Replies:** 0\
**Last updated:** [October 1, 2026, 7:47pm UTC](https://discourse.threejs.org/t/a-playable-snow-scene-built-in-threejs-webgpu-tsl/94896 "2026-10-01T19:47:05Z")

</div>

Have fun!! question/contact : knockonglass@crechetank.com

---

## [Three-gpu-pathtracer: A modular shader-based path tracing extension for three.js](https://discourse.threejs.org/t/three-gpu-pathtracer-a-modular-shader-based-path-tracing-extension-for-three-js/36903)

<div class="topic-metadata">

**Author:** [@gkjohnson](https://discourse.threejs.org/u/gkjohnson)\
**Replies:** 54\
**Last updated:** [October 1, 2026, 9:00am UTC](https://discourse.threejs.org/t/three-gpu-pathtracer-a-modular-shader-based-path-tracing-extension-for-three-js/36903 "2026-10-01T09:00:02Z")

</div>

Hello! Over the last several months I’ve been working on a high fidelity, physically based path tracer based on my three-mesh-bvh project and have just released the initial version! It includes material features such as …

---

## [4x4 Builder - Off Road Vehicle Configurator](https://discourse.threejs.org/t/4x4-builder-off-road-vehicle-configurator/20428)

<div class="topic-metadata">

**Author:** [@theshanergy](https://discourse.threejs.org/u/theshanergy)\
**Replies:** 7\
**Last updated:** [October 1, 2026, 5:41am UTC](https://discourse.threejs.org/t/4x4-builder-off-road-vehicle-configurator/20428 "2026-10-01T05:41:36Z")

</div>

https://4x4builder.com 4x4Builder is a feature-rich, browser-based 3D off-road vehicle configurator and driving simulator built with Three.js, React Three Fiber, and Drei, allowing enthusiasts to customize detailed 4…

---

## [Infinite Shaders](https://discourse.threejs.org/t/infinite-shaders/94714)

<div class="topic-metadata">

**Author:** [@Andy\_Ray](https://discourse.threejs.org/u/Andy_Ray)\
**Replies:** 2\
**Last updated:** [September 28, 2026, 10:27pm UTC](https://discourse.threejs.org/t/infinite-shaders/94714 "2026-09-28T22:27:41Z")

</div>

This is a tech demo I put together that dynamically composes custom Three.js shaders together on the fly. I hope you enjoy it!

---

## [Conference Room Configurator](https://discourse.threejs.org/t/conference-room-configurator/94724)

<div class="topic-metadata">

**Author:** [@bcube.ae](https://discourse.threejs.org/u/bcube.ae)\
**Replies:** 1\
**Last updated:** [September 28, 2026, 6:33am UTC](https://discourse.threejs.org/t/conference-room-configurator/94724 "2026-09-28T06:33:35Z")

</div>

https://www.bcube.ae/lab/room-studio/run A photoreal boardroom you can walk through in a browser, with real-world lighting, a screen measured in nits and your own content playing on it. Built by Bcube to show what real-…

---

## [Shaderfrog2 glsl shaders](https://discourse.threejs.org/t/shaderfrog2-glsl-shaders/85357)

<div class="topic-metadata">

**Author:** [@steven](https://discourse.threejs.org/u/steven)\
**Replies:** 12\
**Last updated:** [September 28, 2026, 3:52am UTC](https://discourse.threejs.org/t/shaderfrog2-glsl-shaders/85357 "2026-09-28T03:52:45Z")

</div>

is there somebody who knows how we can make the shaders from shaderfrog2 work in three.js ?

---

## [MANIFOLD — Procedural Mathematical Surfaces & Topologies in Three.js](https://discourse.threejs.org/t/manifold-procedural-mathematical-surfaces-topologies-in-three-js/94657)

<div class="topic-metadata">

**Author:** [@MatNoble](https://discourse.threejs.org/u/MatNoble)\
**Replies:** 1\
**Last updated:** [September 27, 2026, 7:36pm UTC](https://discourse.threejs.org/t/manifold-procedural-mathematical-surfaces-topologies-in-three-js/94657 "2026-09-27T19:36:09Z")

</div>

Hello everyone, I’d like to share MANIFOLD, an interactive 3D digital gallery built with Three.js that explores procedural differential geometry, minimal surfaces, and topological manifolds in a cosmic, museum-like envi…

---

## [JellyBlob - wobbly jellies and slime-trail combat in Three.js](https://discourse.threejs.org/t/jellyblob-wobbly-jellies-and-slime-trail-combat-in-three-js/94682)

<div class="topic-metadata">

**Author:** [@Mans\_Gullberg](https://discourse.threejs.org/u/Mans_Gullberg)\
**Replies:** 0\
**Last updated:** [September 26, 2026, 5:05am UTC](https://discourse.threejs.org/t/jellyblob-wobbly-jellies-and-slime-trail-combat-in-three-js/94682 "2026-09-26T05:05:35Z")

</div>

Hi everyone! I’ve been working on JellyBlob, a multiplayer browser game where you grow a jelly, leave slippery trails and try to make someone else’s next turn a bad one. You can hop over trails; running into another jel…

---

## [Interactive Tank Combat Portfolio](https://discourse.threejs.org/t/interactive-tank-combat-portfolio/94638)

<div class="topic-metadata">

**Author:** [@Long\_Hoang](https://discourse.threejs.org/u/Long_Hoang)\
**Replies:** 10\
**Last updated:** [September 25, 2026, 10:01am UTC](https://discourse.threejs.org/t/interactive-tank-combat-portfolio/94638 "2026-09-25T10:01:29Z")

</div>

Hey everyone! :waving\_hand: After over a year, 2,300+ hours of work, and countless iterations, my first-ever creative portfolio is finally live! Explore it here: https://longhoang-lyo.com Built with Three.js, GSAP, an…

---

## [Collective Pixels - Shader Display](https://discourse.threejs.org/t/collective-pixels-shader-display/94550)

<div class="topic-metadata">

**Author:** [@PedroPereira](https://discourse.threejs.org/u/PedroPereira)\
**Replies:** 0\
**Last updated:** [September 22, 2026, 5:47am UTC](https://discourse.threejs.org/t/collective-pixels-shader-display/94550 "2026-09-22T05:47:13Z")

</div>

Hello! I’m sharing a project I’ve been working on and off, Collective Pixels is an interactive display of creative 3D coding. This is a collection of fifty shader variations all stemming from the same algorithm. With th…

---

## [Render 300 Different Body Types with 40 Instances Each](https://discourse.threejs.org/t/render-300-different-body-types-with-40-instances-each/94500)

<div class="topic-metadata">

**Author:** [@Taron\_Holikyan](https://discourse.threejs.org/u/Taron_Holikyan)\
**Replies:** 1\
**Last updated:** [September 20, 2026, 11:21pm UTC](https://discourse.threejs.org/t/render-300-different-body-types-with-40-instances-each/94500 "2026-09-20T23:21:48Z")

</div>

Question I have 300 THREE.InstancedMesh objects, and each InstancedMesh contains 40 instances, for a total of 12,000 bodies. I understand that each InstancedMesh is rendered with one draw call, so my current scene requi…

---

## [Paid task ($200): shader-pack style ambient occlusion for a three.js viewer](https://discourse.threejs.org/t/paid-task-200-shader-pack-style-ambient-occlusion-for-a-three-js-viewer/94398)

<div class="topic-metadata">

**Author:** [@Sagar\_Khurana](https://discourse.threejs.org/u/Sagar_Khurana)\
**Replies:** 3\
**Last updated:** [September 20, 2026, 9:54pm UTC](https://discourse.threejs.org/t/paid-task-200-shader-pack-style-ambient-occlusion-for-a-three-js-viewer/94398 "2026-09-20T21:54:07Z")

</div>

Job is now finished, thanks for your interest

---

## [Documentation of built-in attributes and uniforms](https://discourse.threejs.org/t/documentation-of-built-in-attributes-and-uniforms/94409)

<div class="topic-metadata">

**Author:** [@mathiasplans](https://discourse.threejs.org/u/mathiasplans)\
**Replies:** 0\
**Last updated:** [September 16, 2026, 12:47pm UTC](https://discourse.threejs.org/t/documentation-of-built-in-attributes-and-uniforms/94409 "2026-09-16T12:47:18Z")

</div>

Hello. Can anyone point me to the location in the documentation that states what built-in attributes and uniforms are defined for vertex and fragment shaders? There is an archived version here: three.js docs but I canno…

---

## [100,000 real commercial flights visualised across 1,148 airports](https://discourse.threejs.org/t/100-000-real-commercial-flights-visualised-across-1-148-airports/94403)

<div class="topic-metadata">

**Author:** [@Albert\_Kovtoun](https://discourse.threejs.org/u/Albert_Kovtoun)\
**Replies:** 0\
**Last updated:** [September 16, 2026, 12:01pm UTC](https://discourse.threejs.org/t/100-000-real-commercial-flights-visualised-across-1-148-airports/94403 "2026-09-16T12:01:13Z")

</div>

Hey everyone! I visualised 100.000 real commercial flights. Earth shader made in TSL. Used InstancedMeshes for the airplanes. Live: https://aero-viz.vercel.app/ X post: Albert Kovtoun on X: "New showcase website is out…

---

## [Creative frontend — Three.js / R3F, GSAP, Next.js — cinematic product experiences (Istanbul, remote)](https://discourse.threejs.org/t/creative-frontend-three-js-r3f-gsap-next-js-cinematic-product-experiences-istanbul-remote/94400)

<div class="topic-metadata">

**Author:** [@Mine](https://discourse.threejs.org/u/Mine)\
**Replies:** 0\
**Last updated:** [September 16, 2026, 11:59am UTC](https://discourse.threejs.org/t/creative-frontend-three-js-r3f-gsap-next-js-cinematic-product-experiences-istanbul-remote/94400 "2026-09-16T11:59:31Z")

</div>

I build browser-based 3D product experiences end to end: geometry in Blender, scene in Three.js / React Three Fiber, site in Next.js and TypeScript, motion in GSAP and framer-motion, then testing and release. I design…

---

## [EmberGrids — an interactive ribbon sculpture with WebGPU, TSL and motion fallbacks](https://discourse.threejs.org/t/embergrids-an-interactive-ribbon-sculpture-with-webgpu-tsl-and-motion-fallbacks/94313)

<div class="topic-metadata">

**Author:** [@ghassan\_ghanem](https://discourse.threejs.org/u/ghassan_ghanem)\
**Replies:** 0\
**Last updated:** [September 13, 2026, 5:21am UTC](https://discourse.threejs.org/t/embergrids-an-interactive-ribbon-sculpture-with-webgpu-tsl-and-motion-fallbacks/94313 "2026-09-13T05:21:45Z")

</div>

We built an interactive ribbon sculpture for our own website at EmberGrids. The idea was to give the visual identity a physical presence while keeping the site’s reading and navigation independent of the canvas. The sce…

---

## [Emotion Agency is an immersive WebGL experience where an entire digital landscape becomes the agency’s identity.](https://discourse.threejs.org/t/emotion-agency-is-an-immersive-webgl-experience-where-an-entire-digital-landscape-becomes-the-agency-s-identity/94306)

<div class="topic-metadata">

**Author:** [@leonid-kostetskyi](https://discourse.threejs.org/u/leonid-kostetskyi)\
**Replies:** 0\
**Last updated:** [September 13, 2026, 5:15am UTC](https://discourse.threejs.org/t/emotion-agency-is-an-immersive-webgl-experience-where-an-entire-digital-landscape-becomes-the-agency-s-identity/94306 "2026-09-13T05:15:38Z")

</div>

An immersive agency website built with Three.js and WebGL. A procedural 3D landscape, real-time particle systems, custom shaders and interactive motion create a living environment that evolves as the user explores the ex…

---

## [An interactive drafting table: draw a plan, tilt the sheet, and sculpt it in perspective](https://discourse.threejs.org/t/an-interactive-drafting-table-draw-a-plan-tilt-the-sheet-and-sculpt-it-in-perspective/94304)

<div class="topic-metadata">

**Author:** [@lpb](https://discourse.threejs.org/u/lpb)\
**Replies:** 1\
**Last updated:** [September 25, 2026, 2:49pm UTC](https://discourse.threejs.org/t/an-interactive-drafting-table-draw-a-plan-tilt-the-sheet-and-sculpt-it-in-perspective/94304 "2026-09-25T14:49:04Z")

</div>

A drafting table in the browser. Draw rectangles on a flat 8px grid and they stay as your plan. Scroll, and the sheet tilts: the camera lifts from plan into perspective and every rectangle stands up into a volume you can…

---

## [Big question about batched mesh](https://discourse.threejs.org/t/big-question-about-batched-mesh/94258)

<div class="topic-metadata">

**Author:** [@Gabriel\_Cuadros\_Caceres](https://discourse.threejs.org/u/Gabriel_Cuadros_Caceres)\
**Replies:** 3\
**Last updated:** [September 12, 2026, 8:29am UTC](https://discourse.threejs.org/t/big-question-about-batched-mesh/94258 "2026-09-12T08:29:50Z")

</div>

i have tons of batched and instanced mesh and im analzying my game using spector.js and im seeing alof of framebuffer, one per each of batchedd or instanced mesh im using , is that normal behavior? none of the draw hav…

---

## [Sergii´s Portfolio need feedback](https://discourse.threejs.org/t/sergii-s-portfolio-need-feedback/94170)

<div class="topic-metadata">

**Author:** [@Sergii\_Butrii](https://discourse.threejs.org/u/Sergii_Butrii)\
**Replies:** 3\
**Last updated:** [September 10, 2026, 6:44pm UTC](https://discourse.threejs.org/t/sergii-s-portfolio-need-feedback/94170 "2026-09-10T18:44:22Z")

</div>

Hi everyone :waving\_hand: I just launched my portfolio: a small island you can walk around. The projects are boards out in the park, there’s a house you can go inside, and two minigames with a shared leaderboard. I h…

---

## [Allow dust follow rcCar](https://discourse.threejs.org/t/allow-dust-follow-rccar/93684)

<div class="topic-metadata">

**Author:** [@meded90](https://discourse.threejs.org/u/meded90)\
**Replies:** 12\
**Last updated:** [September 10, 2026, 1:15pm UTC](https://discourse.threejs.org/t/allow-dust-follow-rccar/93684 "2026-09-10T13:15:43Z")

</div>

i added shader const dust = new THREE.Points(geometry, material); scene.add(dust); it updates in gameloop const positionAttribute = dustGeometry.getAttribute("position"); for (let i = 0; i \< count; i++) { con…

---

## [NOOKS: building Earth in creative mode with three.js](https://discourse.threejs.org/t/nooks-building-earth-in-creative-mode-with-three-js/94161)

<div class="topic-metadata">

**Author:** [@Nooks](https://discourse.threejs.org/u/Nooks)\
**Replies:** 0\
**Last updated:** [September 8, 2026, 7:24pm UTC](https://discourse.threejs.org/t/nooks-building-earth-in-creative-mode-with-three-js/94161 "2026-09-08T19:24:49Z")

</div>

Hi everyone. Today I’m introducing Earth in creative mode with NOOKS. Toronto in the NOOKS public preview. Real geographic data becomes block worlds you can explore in your browser. The public preview displays four …

---

## [Camping Season - a procedural autumn valley you can drive, camp and photograph wildlife](https://discourse.threejs.org/t/camping-season-a-procedural-autumn-valley-you-can-drive-camp-and-photograph-wildlife/94158)

<div class="topic-metadata">

**Author:** [@optikalefx](https://discourse.threejs.org/u/optikalefx)\
**Replies:** 0\
**Last updated:** [September 8, 2026, 7:19pm UTC](https://discourse.threejs.org/t/camping-season-a-procedural-autumn-valley-you-can-drive-camp-and-photograph-wildlife/94158 "2026-09-08T19:19:33Z")

</div>

A quiet camping game in three.js: drive a camper through an autumn valley, pitch a tent where you stop, kayak the river, take a bike up the ridge, and photograph the animals for a scavenger-hunt journal. There is a day…

---

## [Real-time Schwarzschild + binary black-hole lensing in WebGL — with an honest writeup of where the two-body integrator breaks](https://discourse.threejs.org/t/real-time-schwarzschild-binary-black-hole-lensing-in-webgl-with-an-honest-writeup-of-where-the-two-body-integrator-breaks/94150)

<div class="topic-metadata">

**Author:** [@Guruprasad](https://discourse.threejs.org/u/Guruprasad)\
**Replies:** 0\
**Last updated:** [September 8, 2026, 7:11pm UTC](https://discourse.threejs.org/t/real-time-schwarzschild-binary-black-hole-lensing-in-webgl-with-an-honest-writeup-of-where-the-two-body-integrator-breaks/94150 "2026-09-08T19:11:25Z")

</div>

Built a real-time gravitational lensing shader pair for a personal project: single Schwarzschild black hole, and a binary inspiral/merger set-piece. Sharing the code and, more importantly, a full technical writeup of a n…

---

## [Screen Space Reflections (SSR)](https://discourse.threejs.org/t/screen-space-reflections-ssr/94147)

<div class="topic-metadata">

**Author:** [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Replies:** 0\
**Last updated:** [September 8, 2026, 7:10pm UTC](https://discourse.threejs.org/t/screen-space-reflections-ssr/94147 "2026-09-08T19:10:57Z")

</div>

live link: Screen-space reflections · Meep SSR: ON SSR: OFF A while back Babylon.js was brought up with this specific “Back to the Future”-inspired scene here’s Babylon (camera is locked, so I apologize for diffe…

[Next page](https://discourse.threejs.org/tag/shaders/96.md?match_all_tags=true&page=1&tags%5B%5D=shaders)