# \#shader

**URL:** https://discourse.threejs.org/tag/shader/1127.md

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

---

## [I made two real-time diamond shaders](https://discourse.threejs.org/t/i-made-two-real-time-diamond-shaders/92948)

<div class="topic-metadata">

**Author:** [@ehsan\_wwe](https://discourse.threejs.org/u/ehsan_wwe)\
**Replies:** 1\
**Last updated:** [October 15, 2026, 9:31am UTC](https://discourse.threejs.org/t/i-made-two-real-time-diamond-shaders/92948 "2026-10-15T09:31:18Z")

</div>

Hi everyone, I have been working on a real-time diamond rendering experiment using Three.js and custom GLSL shaders. Live demo: Source code: The project includes two different diamond rendering methods. The f…

---

## [Threejs Sketchbook ( updated )](https://discourse.threejs.org/t/threejs-sketchbook-updated/94157)

<div class="topic-metadata">

**Author:** [@vipin018](https://discourse.threejs.org/u/vipin018)\
**Replies:** 0\
**Last updated:** [September 8, 2026, 7:15pm UTC](https://discourse.threejs.org/t/threejs-sketchbook-updated/94157 "2026-09-08T19:15:23Z")

</div>

My Three.js Sketchbook Finally got some time to update my sketchbook! It’s a collection of my Three.js experiments and explorations around motion, materials, physics, and generative forms. It currently contains a colle…

---

## [Dry Ice Effect with shader](https://discourse.threejs.org/t/dry-ice-effect-with-shader/93179)

<div class="topic-metadata">

**Author:** [@Jing\_An1](https://discourse.threejs.org/u/Jing_An1)\
**Replies:** 6\
**Last updated:** [July 26, 2026, 9:10pm UTC](https://discourse.threejs.org/t/dry-ice-effect-with-shader/93179 "2026-07-26T21:10:28Z")

</div>

Who can create a Shader for Dry Ice Effect?

---

## [TSL Shaders: Improving ergonomics using wgsl "tag template literal" functions](https://discourse.threejs.org/t/tsl-shaders-improving-ergonomics-using-wgsl-tag-template-literal-functions/90010)

<div class="topic-metadata">

**Author:** [@gkjohnson](https://discourse.threejs.org/u/gkjohnson)\
**Replies:** 4\
**Last updated:** [February 25, 2026, 3:12am UTC](https://discourse.threejs.org/t/tsl-shaders-improving-ergonomics-using-wgsl-tag-template-literal-functions/90010 "2026-02-25T03:12:04Z")

</div>

tl;dr: jump to the Tag Template Literal Functions section for a look at a suggested new mechanism for writing TSL-compatible wgsl. I’ve recently taken a first dive into three.js’ new Node Materials and TSL. And admitted…

---

## [Realistic Sun with noise and rays](https://discourse.threejs.org/t/realistic-sun-with-noise-and-rays/87759)

<div class="topic-metadata">

**Author:** [@Tibi](https://discourse.threejs.org/u/Tibi)\
**Replies:** 11\
**Last updated:** [February 19, 2026, 10:56am UTC](https://discourse.threejs.org/t/realistic-sun-with-noise-and-rays/87759 "2026-02-19T10:56:55Z")

</div>

Playing with shaders again, I pushed my idea using ChatGPT. This is what I came up to.

---

## [Fireworks particles](https://discourse.threejs.org/t/fireworks-particles/87666)

<div class="topic-metadata">

**Author:** [@Tibi](https://discourse.threejs.org/u/Tibi)\
**Replies:** 1\
**Last updated:** [October 21, 2025, 5:23pm UTC](https://discourse.threejs.org/t/fireworks-particles/87666 "2025-10-21T17:23:52Z")

</div>

I am taking a break from work, and I am doing the SimonDev course on game dev, I love it. Here is a fireworks particle experiment based on one of its particle lessons I encourage anyone to have a good time and get a …

---

## [WebGPU - Problems Creating WGSL Shader to Resize Image](https://discourse.threejs.org/t/webgpu-problems-creating-wgsl-shader-to-resize-image/86493)

<div class="topic-metadata">

**Author:** [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Replies:** 6\
**Last updated:** [August 23, 2025, 5:24am UTC](https://discourse.threejs.org/t/webgpu-problems-creating-wgsl-shader-to-resize-image/86493 "2025-08-23T05:24:45Z")

</div>

UPDATE (Sep 1) The reason I was attempting to resize the position points buffer was to allow me to increase the resolution of the Normal Map and to add more detail. I have since found an easier way to add detail in the…

---

## [What do I replace a material's 'normalNode' with to force fragments to be shaded as if they were always pointing world-up (0,1,0)?](https://discourse.threejs.org/t/what-do-i-replace-a-materials-normalnode-with-to-force-fragments-to-be-shaded-as-if-they-were-always-pointing-world-up-0-1-0/86199)

<div class="topic-metadata">

**Author:** [@torrent](https://discourse.threejs.org/u/torrent)\
**Replies:** 4\
**Last updated:** [August 13, 2025, 10:57pm UTC](https://discourse.threejs.org/t/what-do-i-replace-a-materials-normalnode-with-to-force-fragments-to-be-shaded-as-if-they-were-always-pointing-world-up-0-1-0/86199 "2025-08-13T22:57:37Z")

</div>

Let’s say I have a sphere mesh with a MeshLambertNodeMaterial on it. I also have a DirectionalLight shining directly down from above. What do I replace material.normalNode with such that the Lambert shading thinks all …

---

## [Practical way to animate scene.environment?](https://discourse.threejs.org/t/practical-way-to-animate-scene-environment/84319)

<div class="topic-metadata">

**Author:** [@LordWellingtonIII](https://discourse.threejs.org/u/LordWellingtonIII)\
**Replies:** 8\
**Last updated:** [July 10, 2025, 3:55pm UTC](https://discourse.threejs.org/t/practical-way-to-animate-scene-environment/84319 "2025-07-10T15:55:05Z")

</div>

I’m using the Sky addon and animating the sun and other parameters. I’d like to update scene.environment every frame. Is there a way to do this that’s more efficient than this craziness? createEnvironment({ scene, ren…

---

## [Changing rimlight shader math to achieve a specific look](https://discourse.threejs.org/t/changing-rimlight-shader-math-to-achieve-a-specific-look/83678)

<div class="topic-metadata">

**Author:** [@grml](https://discourse.threejs.org/u/grml)\
**Replies:** 5\
**Last updated:** [June 6, 2025, 2:17pm UTC](https://discourse.threejs.org/t/changing-rimlight-shader-math-to-achieve-a-specific-look/83678 "2025-06-06T14:17:30Z")

</div>

I’ve adapted this fresnel rimlight shader I found a while ago in this forum. For my use case it would look better if the rimlight was independent from the view angle, i. e. at a fixed angle and sharp falloff, no matt…

---

## [Linear Slider is free](https://discourse.threejs.org/t/linear-slider-is-free/83594)

<div class="topic-metadata">

**Author:** [@Tibi](https://discourse.threejs.org/u/Tibi)\
**Replies:** 0\
**Last updated:** [June 5, 2025, 2:58am UTC](https://discourse.threejs.org/t/linear-slider-is-free/83594 "2025-06-05T02:58:11Z")

</div>

I just wanted to share this with the threejs community, I have finished the Linear Slider, and it is a freebie, it can be downloaded here Linear Slider WordPress and WooCommerce Plugin - WPBay Thank you for all the help…

---

## [attributeArray.element(x) always returns current element](https://discourse.threejs.org/t/attributearray-element-x-always-returns-current-element/83522)

<div class="topic-metadata">

**Author:** [@DarkPhoenix](https://discourse.threejs.org/u/DarkPhoenix)\
**Replies:** 5\
**Last updated:** [June 5, 2025, 9:47am UTC](https://discourse.threejs.org/t/attributearray-element-x-always-returns-current-element/83522 "2025-06-05T09:47:54Z")

</div>

attributeArray.element(x) returns \[instanceIndex\] element always. In fact it does not care about parameters at all, you can write attributeArray.element() it will do the same. Or even just attributeArray. const count = …

---

## [Shader Editor Vanila](https://discourse.threejs.org/t/shader-editor-vanila/83355)

<div class="topic-metadata">

**Author:** [@didi\_softwares](https://discourse.threejs.org/u/didi_softwares)\
**Replies:** 0\
**Last updated:** [May 30, 2025, 6:13am UTC](https://discourse.threejs.org/t/shader-editor-vanila/83355 "2025-05-30T06:13:52Z")

</div>

A shader editor (not three), can share your shader ! ( not time to describe my last 5 min in work ) My Site or Code Pen

---

## [Endless Terrain](https://discourse.threejs.org/t/endless-terrain/83284)

<div class="topic-metadata">

**Author:** [@didi\_softwares](https://discourse.threejs.org/u/didi_softwares)\
**Replies:** 1\
**Last updated:** [May 29, 2025, 6:02pm UTC](https://discourse.threejs.org/t/endless-terrain/83284 "2025-05-29T18:02:32Z")

</div>

An endless terrain, use W and D to turn. Project 9 or codepen Codepen I’ve already done it a while ago, but I used a good part of someone else’s. Since I lost my repository, I decided to recreate this one, now ent…

---

## [How to limit scale range (min/max) efficiently for many sprites?](https://discourse.threejs.org/t/how-to-limit-scale-range-min-max-efficiently-for-many-sprites/82029)

<div class="topic-metadata">

**Author:** [@bergun](https://discourse.threejs.org/u/bergun)\
**Replies:** 0\
**Last updated:** [May 5, 2025, 12:33pm UTC](https://discourse.threejs.org/t/how-to-limit-scale-range-min-max-efficiently-for-many-sprites/82029 "2025-05-05T12:33:27Z")

</div>

How can I set the min. and max. scale values of the sprite when the sizeAttenuation value is true in SpriteMaterial? I want it to be minScale when the camera is too far away and maxScale when it is too close and I want t…

---

## [Sphere with fog effect inside, raymarching?](https://discourse.threejs.org/t/sphere-with-fog-effect-inside-raymarching/79108)

<div class="topic-metadata">

**Author:** [@tommhuth](https://discourse.threejs.org/u/tommhuth)\
**Replies:** 10\
**Last updated:** [March 11, 2025, 4:07pm UTC](https://discourse.threejs.org/t/sphere-with-fog-effect-inside-raymarching/79108 "2025-03-11T16:07:39Z")

</div>

Im trying get a sphere geometry to have a fog effect inside: the close to the sphere center, the more intense the fog should be, and on the surface of the sphere the fog should be 0. I want the fog to obscure things behi…

---

## [Bloom on renderTarget](https://discourse.threejs.org/t/bloom-on-rendertarget/76864)

<div class="topic-metadata">

**Author:** [@aronanol45](https://discourse.threejs.org/u/aronanol45)\
**Replies:** 2\
**Last updated:** [January 23, 2025, 1:22am UTC](https://discourse.threejs.org/t/bloom-on-rendertarget/76864 "2025-01-23T01:22:21Z")

</div>

Hi guys, I am actually trying to add a bloom effect to one of my renderTarget’s with R3F, I actually got this error: Cannot read properties of undefined (reading ‘mask’) The error seems to come from =\> composer.render…

---

## [DLSS for Webgl - Upscaling](https://discourse.threejs.org/t/dlss-for-webgl-upscaling/76303)

<div class="topic-metadata">

**Author:** [@Lunatictactoc](https://discourse.threejs.org/u/Lunatictactoc)\
**Replies:** 0\
**Last updated:** [January 10, 2025, 12:17pm UTC](https://discourse.threejs.org/t/dlss-for-webgl-upscaling/76303 "2025-01-10T12:17:02Z")

</div>

Hello everyone, These days I’ve been investigating the question of using upascling techniques to improve performance with webgl. With the arrival of AI (dlss for example), the subject is current but I haven’t found man…

---

## [Jagged edges on shader material](https://discourse.threejs.org/t/jagged-edges-on-shader-material/74774)

<div class="topic-metadata">

**Author:** [@kalabedo](https://discourse.threejs.org/u/kalabedo)\
**Replies:** 6\
**Last updated:** [December 4, 2024, 2:55pm UTC](https://discourse.threejs.org/t/jagged-edges-on-shader-material/74774 "2024-12-04T14:55:07Z")

</div>

Hi there, currently i am writing shaders to display different patterns on a plane. That works fine but the output looks like anti-aliasing is missing for me. Although antialiasing is enabled. I also tried to increase th…

---

## [Need help writing a "true skybox" TSL shader node](https://discourse.threejs.org/t/need-help-writing-a-true-skybox-tsl-shader-node/74406)

<div class="topic-metadata">

**Author:** [@torrent](https://discourse.threejs.org/u/torrent)\
**Replies:** 6\
**Last updated:** [December 2, 2024, 4:19am UTC](https://discourse.threejs.org/t/need-help-writing-a-true-skybox-tsl-shader-node/74406 "2024-12-02T04:19:32Z")

</div>

I have here a JSFiddle that renders a simple 3D environment: a small flat plane geometry for the “ground”, placed within a box to act as the “skybox”. The skybox is textured with an equirectangular sky texture, and is ro…

---

## [Is GPU Object Picking possible with a single render?](https://discourse.threejs.org/t/is-gpu-object-picking-possible-with-a-single-render/70228)

<div class="topic-metadata">

**Author:** [@rob-myers](https://discourse.threejs.org/u/rob-myers)\
**Replies:** 5\
**Last updated:** [September 4, 2024, 1:09am UTC](https://discourse.threejs.org/t/is-gpu-object-picking-possible-with-a-single-render/70228 "2024-09-04T01:09:25Z")

</div>

Suppose I render a Mesh with a ShaderMaterial. Further suppose the fragment shader has the following form: layout(location = 1) out vec4 gObjectPick; // ... // shader code setting gl\_FragColor and gObjectPick // ... I…

---

## [Make mesh looks "solid" when camera frustum intersect it](https://discourse.threejs.org/t/make-mesh-looks-solid-when-camera-frustum-intersect-it/70226)

<div class="topic-metadata">

**Author:** [@sjuksin](https://discourse.threejs.org/u/sjuksin)\
**Replies:** 2\
**Last updated:** [September 3, 2024, 11:44am UTC](https://discourse.threejs.org/t/make-mesh-looks-solid-when-camera-frustum-intersect-it/70226 "2024-09-03T11:44:56Z")

</div>

I develop some kind of model viewer, that render CAD-models. Model mesh generated as multiple triangular prism. So it looks nice until camera frustum cut the model’s mesh. Can i somehow fill the camera cut with a sol…

---

## [How to fix minimum shadow radius in three js](https://discourse.threejs.org/t/how-to-fix-minimum-shadow-radius-in-three-js/54659)

<div class="topic-metadata">

**Author:** [@victor\_Avelar](https://discourse.threejs.org/u/victor_Avelar)\
**Replies:** 4\
**Last updated:** [August 29, 2024, 3:33am UTC](https://discourse.threejs.org/t/how-to-fix-minimum-shadow-radius-in-three-js/54659 "2024-08-29T03:33:40Z")

</div>

I’ve been trying to make shadows only appear in a certain radius on the camera but it just does not work, it always gives errors and also does not even do anything when there is no errors to make the shadows appear only …

---

## [Projected vector](https://discourse.threejs.org/t/projected-vector/68635)

<div class="topic-metadata">

**Author:** [@Gaelle\_Berton](https://discourse.threejs.org/u/Gaelle_Berton)\
**Replies:** 3\
**Last updated:** [August 13, 2024, 11:24pm UTC](https://discourse.threejs.org/t/projected-vector/68635 "2024-08-13T23:24:33Z")

</div>

I am writing a shader to draw a frame around a shape geometry, I am passing the corners -2D points- to the shaderprojecting the position on to the edge to check the distance. Somehow the trigonometry is off, i cant see …

---

## [Object rendering behind](https://discourse.threejs.org/t/object-rendering-behind/68892)

<div class="topic-metadata">

**Author:** [@Gaelle\_Berton](https://discourse.threejs.org/u/Gaelle_Berton)\
**Replies:** 3\
**Last updated:** [August 12, 2024, 6:51pm UTC](https://discourse.threejs.org/t/object-rendering-behind/68892 "2024-08-12T18:51:09Z")

</div>

I havd an object on the scene, rendering behind the scene, i dont understand why, here is the material: const cubeMaterial = new THREE.RawShaderMaterial({ uniforms: {}, vertexShader: \` precision highp flo…

---

## [Multitexture Material](https://discourse.threejs.org/t/multitexture-material/67088)

<div class="topic-metadata">

**Author:** [@hibert42](https://discourse.threejs.org/u/hibert42)\
**Replies:** 5\
**Last updated:** [June 26, 2024, 8:37pm UTC](https://discourse.threejs.org/t/multitexture-material/67088 "2024-06-26T20:37:20Z")

</div>

Second question, is there a way to achieve a multitexture material, with different textures stacked above each other? Like when I set material.map but instead material.map\[0\] = texture1 material.map\[1\] = texture2 …

---

## [Procedural Prototype Grid Shader](https://discourse.threejs.org/t/procedural-prototype-grid-shader/60979)

<div class="topic-metadata">

**Author:** [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Replies:** 13\
**Last updated:** [February 14, 2024, 5:41pm UTC](https://discourse.threejs.org/t/procedural-prototype-grid-shader/60979 "2024-02-14T17:41:33Z")

</div>

Hi everyone, I’m trying to create a material that will keep the texture at a constant predefined size while repeating it. Often used in the prototyping phase, and very helpful to get a visual reference of the surroundin…

---

## [Calculate uv coordinates from spherical coordinates](https://discourse.threejs.org/t/calculate-uv-coordinates-from-spherical-coordinates/60222)

<div class="topic-metadata">

**Author:** [@Federico\_Toledo](https://discourse.threejs.org/u/Federico_Toledo)\
**Replies:** 7\
**Last updated:** [January 12, 2024, 2:47pm UTC](https://discourse.threejs.org/t/calculate-uv-coordinates-from-spherical-coordinates/60222 "2024-01-12T14:47:33Z")

</div>

I’m using the phyllotaxis algorithm to draw a sphere of dots, and then I’m passing a texture to the vertex shader, but the uv coordinates are not calculated correctly cause the texture is not showing right. const vector…

---

## [Three.js transparency projection](https://discourse.threejs.org/t/three-js-transparency-projection/59135)

<div class="topic-metadata">

**Author:** [@ljm31337](https://discourse.threejs.org/u/ljm31337)\
**Replies:** 5\
**Last updated:** [December 12, 2023, 7:15am UTC](https://discourse.threejs.org/t/three-js-transparency-projection/59135 "2023-12-12T07:15:00Z")

</div>

I’m using the code below. I can’t touch depthwrite and depthTest because of other rendering issues. I used a shader to make my one tubegeometry transparent in the front and not transparent in the back, but I want …

---

## [Meshrefractionalmaterial in threejs vanilla](https://discourse.threejs.org/t/meshrefractionalmaterial-in-threejs-vanilla/58144)

<div class="topic-metadata">

**Author:** [@Mostafa\_Salloum](https://discourse.threejs.org/u/Mostafa_Salloum)\
**Replies:** 1\
**Last updated:** [November 14, 2023, 5:00pm UTC](https://discourse.threejs.org/t/meshrefractionalmaterial-in-threejs-vanilla/58144 "2023-11-14T17:00:25Z")

</div>

Hello i am trying to use meshrefractional from drei in threejs vanilla but i hit a block where i cant debug whats happening or how do i fix it, there’s no error can someone please check it and advice me if there’s a b…

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