# \#shader-material

**URL:** https://discourse.threejs.org/tag/shader-material/103.md

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

---

## [Low-end mobile devices (4GB RAM) rendering mesh/car models with flat/pointy shading despite](https://discourse.threejs.org/t/low-end-mobile-devices-4gb-ram-rendering-mesh-car-models-with-flat-pointy-shading-despite/95240)

<div class="topic-metadata">

**Author:** [@Ragib\_Nizam](https://discourse.threejs.org/u/Ragib_Nizam)\
**Replies:** 1\
**Last updated:** [October 17, 2026, 4:42pm UTC](https://discourse.threejs.org/t/low-end-mobile-devices-4gb-ram-rendering-mesh-car-models-with-flat-pointy-shading-despite/95240 "2026-10-17T16:42:11Z")

</div>

Hi everyone, I am building a standalone HTML 3D arcade racing game using Three.js (no web-based editor). The game runs completely fine on high-end PCs, but I am facing a weird visual bug on low-end mobile devices and PC…

---

## [\[ FREE GAME \] GoPuzzleGo – jigsaw puzzles in Three.js: car-paint metals, beveled pieces and planets you can assemble](https://discourse.threejs.org/t/free-game-gopuzzlego-jigsaw-puzzles-in-three-js-car-paint-metals-beveled-pieces-and-planets-you-can-assemble/95131)

<div class="topic-metadata">

**Author:** [@Alexei\_Tacu](https://discourse.threejs.org/u/Alexei_Tacu)\
**Replies:** 0\
**Last updated:** [October 8, 2026, 7:58pm UTC](https://discourse.threejs.org/t/free-game-gopuzzlego-jigsaw-puzzles-in-three-js-car-paint-metals-beveled-pieces-and-planets-you-can-assemble/95131 "2026-10-08T19:58:06Z")

</div>

Hi everyone! :waving\_hand: I’ve been building GoPuzzleGo, a free browser jigsaw puzzle site, and recently moved the board to a Three.js renderer. Every piece is a real 3D object: extruded, beveled, lit, and you can tilt…

---

## [How to make objects unaffected by camera height](https://discourse.threejs.org/t/how-to-make-objects-unaffected-by-camera-height/88673)

<div class="topic-metadata">

**Author:** [@binbin0916](https://discourse.threejs.org/u/binbin0916)\
**Replies:** 8\
**Last updated:** [December 17, 2025, 10:07am UTC](https://discourse.threejs.org/t/how-to-make-objects-unaffected-by-camera-height/88673 "2025-12-17T10:07:55Z")

</div>

I created an object using ShaderMaterial and how to make it unaffected when zooming in and out of the camera example

---

## [Fluid Simulation using Shaders ( Tutorial )](https://discourse.threejs.org/t/fluid-simulation-using-shaders-tutorial/85109)

<div class="topic-metadata">

**Author:** [@bandinopla](https://discourse.threejs.org/u/bandinopla)\
**Replies:** 3\
**Last updated:** [July 19, 2025, 10:29am UTC](https://discourse.threejs.org/t/fluid-simulation-using-shaders-tutorial/85109 "2025-07-19T10:29:40Z")

</div>

Tutorial on how to use and understand: GitHub - bandinopla/threejs-fluid-simulation A fluid ( or smoke / plasma / dust / … ) simulation using shaders. Versions for webGL and webGPU available (TSL) English: …

---

## [3D clothes Configurator](https://discourse.threejs.org/t/3d-clothes-configurator/60156)

<div class="topic-metadata">

**Author:** [@Parisa\_Shahbazi](https://discourse.threejs.org/u/Parisa_Shahbazi)\
**Replies:** 6\
**Last updated:** [June 11, 2025, 4:35am UTC](https://discourse.threejs.org/t/3d-clothes-configurator/60156 "2025-06-11T04:35:26Z")

</div>

Hi. I am three.js developer. I want to create a project as a 3d clothes configurator like below. I need to know what is 2d part. Is it by fabric js? Does it contain a .dxf file? what are these template pictures of t-s…

---

## [R3f shaderMaterial uniform not updating from leva](https://discourse.threejs.org/t/r3f-shadermaterial-uniform-not-updating-from-leva/77562)

<div class="topic-metadata">

**Author:** [@jjrchrds](https://discourse.threejs.org/u/jjrchrds)\
**Replies:** 2\
**Last updated:** [April 22, 2025, 12:07pm UTC](https://discourse.threejs.org/t/r3f-shadermaterial-uniform-not-updating-from-leva/77562 "2025-04-22T12:07:00Z")

</div>

When I change elevation in leva, the vertexShader isn’t reflecting the change. import { useRef, useEffect, useMemo } from "react"; import { useThree, useFrame } from "@react-three/fiber"; import { Html, OrbitControls } …

---

## [Bloom behind glass?](https://discourse.threejs.org/t/bloom-behind-glass/77036)

<div class="topic-metadata">

**Author:** [@Kazoo](https://discourse.threejs.org/u/Kazoo)\
**Replies:** 1\
**Last updated:** [January 29, 2025, 3:22pm UTC](https://discourse.threejs.org/t/bloom-behind-glass/77036 "2025-01-29T15:22:24Z")

</div>

Is it possible to set a bloom pass on materials that are inside/ other side of glass?

---

## [SSAO renderer on obj viewer makes the whole screen white](https://discourse.threejs.org/t/ssao-renderer-on-obj-viewer-makes-the-whole-screen-white/76412)

<div class="topic-metadata">

**Author:** [@verina09](https://discourse.threejs.org/u/verina09)\
**Replies:** 8\
**Last updated:** [January 28, 2025, 8:32am UTC](https://discourse.threejs.org/t/ssao-renderer-on-obj-viewer-makes-the-whole-screen-white/76412 "2025-01-28T08:32:04Z")

</div>

I have a simple 3d obj viewer that I try to add SSAO with. Normal rendering works just fine but when I add SSAO (composer renderer), the whole screen turns all white. I’ve tried making the value of light smaller, radiu…

---

## [I have an issue on the map texture setting on my model using the shadermaterial i am using the points not the mesh](https://discourse.threejs.org/t/i-have-an-issue-on-the-map-texture-setting-on-my-model-using-the-shadermaterial-i-am-using-the-points-not-the-mesh/75580)

<div class="topic-metadata">

**Author:** [@Adhil\_Habeeb](https://discourse.threejs.org/u/Adhil_Habeeb)\
**Replies:** 0\
**Last updated:** [December 24, 2024, 3:18am UTC](https://discourse.threejs.org/t/i-have-an-issue-on-the-map-texture-setting-on-my-model-using-the-shadermaterial-i-am-using-the-points-not-the-mesh/75580 "2024-12-24T03:18:02Z")

</div>

let particles ={} let model=await callglb(“…/public/ship\_in\_a\_bottle.glb”) let geometry = adhhhh.nodes.boat\_export\_veliero001\_baked\_material\_0.geometry const particleCount = geometry.attributes.position.count; part…

---

## [Multiple moving spotlight with GLSL shaders](https://discourse.threejs.org/t/multiple-moving-spotlight-with-glsl-shaders/73923)

<div class="topic-metadata">

**Author:** [@Vatsal\_Pandya](https://discourse.threejs.org/u/Vatsal_Pandya)\
**Replies:** 8\
**Last updated:** [December 2, 2024, 1:34pm UTC](https://discourse.threejs.org/t/multiple-moving-spotlight-with-glsl-shaders/73923 "2024-12-02T13:34:32Z")

</div>

I’m trying to achieve multiple spotlights that move across each mesh material individually, illuminating the specific areas of the bump map in each spotlight’s path. Currently, a single spotlight moves across the mesh a…

---

## [Starry Shader for Sky Sphere](https://discourse.threejs.org/t/starry-shader-for-sky-sphere/7578)

<div class="topic-metadata">

**Author:** [@sneha-belkhale](https://discourse.threejs.org/u/sneha-belkhale)\
**Replies:** 37\
**Last updated:** [October 22, 2024, 11:27am UTC](https://discourse.threejs.org/t/starry-shader-for-sky-sphere/7578 "2024-10-22T11:27:48Z")

</div>

Thought i’d share a starry sky shader that I am applying to a sky sphere in one of my recent projects. Fully procedural, and generated with layers of perlin noise in the shader ( no particles ). Check out the isolated e…

---

## [LogarithmicDepthBuffer with rawShader and transparent materials](https://discourse.threejs.org/t/logarithmicdepthbuffer-with-rawshader-and-transparent-materials/72943)

<div class="topic-metadata">

**Author:** [@jakubprus](https://discourse.threejs.org/u/jakubprus)\
**Replies:** 2\
**Last updated:** [October 21, 2024, 6:07am UTC](https://discourse.threejs.org/t/logarithmicdepthbuffer-with-rawshader-and-transparent-materials/72943 "2024-10-21T06:07:43Z")

</div>

This is a minimal example of the problem I have. Settings on the renderer as they are, are required. My main problem is that shader material is not calculating depth properly with logarithmic depth buffer on the rendere…

---

## [Why is there a line when I rotate texture shader in sphere?](https://discourse.threejs.org/t/why-is-there-a-line-when-i-rotate-texture-shader-in-sphere/72916)

<div class="topic-metadata">

**Author:** [@miao\_chen](https://discourse.threejs.org/u/miao_chen)\
**Replies:** 4\
**Last updated:** [October 18, 2024, 3:30am UTC](https://discourse.threejs.org/t/why-is-there-a-line-when-i-rotate-texture-shader-in-sphere/72916 "2024-10-18T03:30:33Z")

</div>

Hey, I mapped a UV value between \[0.1, 1.1\] to \[0, 1\], which is equivalent to rotating a circle by one tenth, but at the point where the texture is connected appears a line. At first I think it may be casued by accuracy…

---

## [LDraw-like edges](https://discourse.threejs.org/t/ldraw-like-edges/17100)

<div class="topic-metadata">

**Author:** [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Replies:** 53\
**Last updated:** [October 10, 2024, 2:19pm UTC](https://discourse.threejs.org/t/ldraw-like-edges/17100 "2024-10-10T14:19:14Z")

</div>

Hi, community! Recently I had a discussion about how to draw a cylinder with outline and contours just for its lids. I remembered, that I saw such functionality in LDrawLoader example. After reading the source code of…

---

## [Texture Atlas to single Shader Material texture](https://discourse.threejs.org/t/texture-atlas-to-single-shader-material-texture/72587)

<div class="topic-metadata">

**Author:** [@Ahlecss](https://discourse.threejs.org/u/Ahlecss)\
**Replies:** 1\
**Last updated:** [October 9, 2024, 8:42pm UTC](https://discourse.threejs.org/t/texture-atlas-to-single-shader-material-texture/72587 "2024-10-09T20:42:25Z")

</div>

Hey ! Hope you are well, I’m currently working with Blender and React Three Fiber, I have a parent mesh, that contains children meshes. A hierarchy. In Three, I want to be able to use raycast and other selectable feat…

---

## [Glowing-neon like material appear white -gltfloader](https://discourse.threejs.org/t/glowing-neon-like-material-appear-white-gltfloader/72288)

<div class="topic-metadata">

**Author:** [@Parisa\_Shahbazi](https://discourse.threejs.org/u/Parisa_Shahbazi)\
**Replies:** 5\
**Last updated:** [October 2, 2024, 5:32pm UTC](https://discourse.threejs.org/t/glowing-neon-like-material-appear-white-gltfloader/72288 "2024-10-02T17:32:39Z")

</div>

Hi guys. I loaded this 3d model on my website but it appears white. Would you please check and tell me the reason and solution? on three.js and I have another model too that I have used realistic rend…

---

## [Transparent material for some objects | Hide objects |Isolate](https://discourse.threejs.org/t/transparent-material-for-some-objects-hide-objects-isolate/69513)

<div class="topic-metadata">

**Author:** [@Parisa\_Shahbazi](https://discourse.threejs.org/u/Parisa_Shahbazi)\
**Replies:** 0\
**Last updated:** [August 20, 2024, 1:50pm UTC](https://discourse.threejs.org/t/transparent-material-for-some-objects-hide-objects-isolate/69513 "2024-08-20T13:50:33Z")

</div>

Hi guys, I want to filter my model based on mesh names. Then I want to show some parts and instead of hiding other parts I want to make them a transparent gray and disable for selecting. How Can we hide groups, and m…

---

## [Texture repetition & Drawing lines issue with GLSL shaders](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829)

<div class="topic-metadata">

**Author:** [@Vatsal\_Pandya](https://discourse.threejs.org/u/Vatsal_Pandya)\
**Replies:** 13\
**Last updated:** [August 16, 2024, 7:57am UTC](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829 "2024-08-16T07:57:48Z")

</div>

I have some meshes in scene, trying to repeat the texture on it. facing some difficulties as following. not able to correctly draw the lines in between the texture repetition. how can I repeat all the available textur…

---

## [Updating from r140 to r167 and color managament](https://discourse.threejs.org/t/updating-from-r140-to-r167-and-color-managament/69226)

<div class="topic-metadata">

**Author:** [@lezan](https://discourse.threejs.org/u/lezan)\
**Replies:** 3\
**Last updated:** [August 12, 2024, 5:33pm UTC](https://discourse.threejs.org/t/updating-from-r140-to-r167-and-color-managament/69226 "2024-08-12T17:33:30Z")

</div>

I am porting a three.js script from r140 to r167. I am totaly newbie with three.js and shader. Before moving directly to r167 I digged into changes and moved before to r151, then to r152 and finally r167. I moved to r15…

---

## [ThreeJS Points (Point Cloud) with Lighting using custom Shader Material](https://discourse.threejs.org/t/threejs-points-point-cloud-with-lighting-using-custom-shader-material/28502)

<div class="topic-metadata">

**Author:** [@pawan](https://discourse.threejs.org/u/pawan)\
**Replies:** 2\
**Last updated:** [July 10, 2024, 3:27pm UTC](https://discourse.threejs.org/t/threejs-points-point-cloud-with-lighting-using-custom-shader-material/28502 "2024-07-10T15:27:39Z")

</div>

Coded using: Using ThreeJS v0.130.1 Framework: Angular 12, but that’s not relevant to the issue. Testing on Chrome browser. I am building an application that gets more than 100K points. I use these points to render a T…

---

## [Morph sphere to plane geometry with complex shader material](https://discourse.threejs.org/t/morph-sphere-to-plane-geometry-with-complex-shader-material/67309)

<div class="topic-metadata">

**Author:** [@Faonfable](https://discourse.threejs.org/u/Faonfable)\
**Replies:** 6\
**Last updated:** [June 28, 2024, 7:25am UTC](https://discourse.threejs.org/t/morph-sphere-to-plane-geometry-with-complex-shader-material/67309 "2024-06-28T07:25:51Z")

</div>

Hi Three Commu ! :v:t5: I try to achieve a scene in Webflow with Threejs. On one hand I made a sphere with a liquid distortion effect using fragment shader material. \<!-- Include Three.js --\> \<script src="https://cdn.…

---

## [Double mirror Image decal Geometry on curve meshes](https://discourse.threejs.org/t/double-mirror-image-decal-geometry-on-curve-meshes/66615)

<div class="topic-metadata">

**Author:** [@Parisa\_Shahbazi](https://discourse.threejs.org/u/Parisa_Shahbazi)\
**Replies:** 6\
**Last updated:** [June 16, 2024, 8:49am UTC](https://discourse.threejs.org/t/double-mirror-image-decal-geometry-on-curve-meshes/66615 "2024-06-16T08:49:44Z")

</div>

I am creating a t-shirt configurator and I use decal geometry to show images on each mesh. But for sleeves, it appears twice like a mirror this is my code: const decalMaterial = new THREE.MeshStandardMaterial( { …

---

## [Exporting a model with ShaderMaterial](https://discourse.threejs.org/t/exporting-a-model-with-shadermaterial/22834)

<div class="topic-metadata">

**Author:** [@JRefusta](https://discourse.threejs.org/u/JRefusta)\
**Replies:** 1\
**Last updated:** [January 26, 2021, 1:43pm UTC](https://discourse.threejs.org/t/exporting-a-model-with-shadermaterial/22834 "2021-01-26T13:43:32Z")

</div>

Hello everyone, I was trying to export a model which uses a ShaderMaterial in three js. The first idea was trying to do it with GLTFEXporter, but since this method doesn’t support ShaderMaterials, (and thanks to the ans…

---

## [Applying other undynamic maps to ShaderMaterial in Three.js](https://discourse.threejs.org/t/applying-other-undynamic-maps-to-shadermaterial-in-three-js/30053)

<div class="topic-metadata">

**Author:** [@hopkuba](https://discourse.threejs.org/u/hopkuba)\
**Replies:** 2\
**Last updated:** [May 8, 2024, 8:15am UTC](https://discourse.threejs.org/t/applying-other-undynamic-maps-to-shadermaterial-in-three-js/30053 "2024-05-08T08:15:04Z")

</div>

I am trying to create visualization of Earth Moon System (Or maybe full solar system in the future) and I found this amazing shader that dynamically applies day and night textures to Earth parts based on lightning. Ther…

---

## [ShaderMaterial preventing Instance Mesh setMatrixAt from updating](https://discourse.threejs.org/t/shadermaterial-preventing-instance-mesh-setmatrixat-from-updating/63915)

<div class="topic-metadata">

**Author:** [@Vardan\_Betikyan](https://discourse.threejs.org/u/Vardan_Betikyan)\
**Replies:** 2\
**Last updated:** [April 10, 2024, 1:36pm UTC](https://discourse.threejs.org/t/shadermaterial-preventing-instance-mesh-setmatrixat-from-updating/63915 "2024-04-10T13:36:51Z")

</div>

The SphereInstanceMeshOutline’s instances are stuck at 0,0,0 and aren’t updating at all. I think the shader is causing an interference? // Outlines const outlineThickness = 0.05; const outlineGeo = new THREE.SphereGeome…

---

## [How to keep the stripes of zebra crossings vertical in the shape at all times](https://discourse.threejs.org/t/how-to-keep-the-stripes-of-zebra-crossings-vertical-in-the-shape-at-all-times/63341)

<div class="topic-metadata">

**Author:** [@wc19950724](https://discourse.threejs.org/u/wc19950724)\
**Replies:** 11\
**Last updated:** [April 10, 2024, 1:49am UTC](https://discourse.threejs.org/t/how-to-keep-the-stripes-of-zebra-crossings-vertical-in-the-shape-at-all-times/63341 "2024-04-10T01:49:05Z")

</div>

Like this demo, how to adjust the shader code to keep zebra stripes always vertical crosswalk demo

---

## [HDRi illumination and reflections using a shaderMaterial](https://discourse.threejs.org/t/hdri-illumination-and-reflections-using-a-shadermaterial/63304)

<div class="topic-metadata">

**Author:** [@iamagro](https://discourse.threejs.org/u/iamagro)\
**Replies:** 0\
**Last updated:** [March 27, 2024, 9:03am UTC](https://discourse.threejs.org/t/hdri-illumination-and-reflections-using-a-shadermaterial/63304 "2024-03-27T09:03:49Z")

</div>

Hello, I’m looking to replicate the illumination and reflection effects of a 360 HDRi using a ShaderMaterial instead of a MeshStandardMaterial. How should I approach this? So far, I’ve managed to achieve reflections (ha…

---

## [ShaderMaterial: getting same color output for when rendering to screen and via a texture](https://discourse.threejs.org/t/shadermaterial-getting-same-color-output-for-when-rendering-to-screen-and-via-a-texture/61609)

<div class="topic-metadata">

**Author:** [@ummwat](https://discourse.threejs.org/u/ummwat)\
**Replies:** 4\
**Last updated:** [February 19, 2024, 6:04pm UTC](https://discourse.threejs.org/t/shadermaterial-getting-same-color-output-for-when-rendering-to-screen-and-via-a-texture/61609 "2024-02-19T18:04:26Z")

</div>

Hi, after upgrading to the recent versions of Threejs, I figured out that (unlike, let’s say, MeshBasicMaterial preserving colors specified by the color parameter regardless of the render target) ShaderMaterial produces …

---

## [Mixed material color / wireframe](https://discourse.threejs.org/t/mixed-material-color-wireframe/61653)

<div class="topic-metadata">

**Author:** [@hofk](https://discourse.threejs.org/u/hofk)\
**Replies:** 0\
**Last updated:** [February 19, 2024, 5:31pm UTC](https://discourse.threejs.org/t/mixed-material-color-wireframe/61653 "2024-02-19T17:31:34Z")

</div>

To improve the visualization of my geometries created by triangulation and deformation, I have used several variants so far. single color one-sided and wireframe and transparent. see TriangulationSphereWithHoles con…

---

## [How do I offset and scale a texture within ShaderMaterial?](https://discourse.threejs.org/t/how-do-i-offset-and-scale-a-texture-within-shadermaterial/60746)

<div class="topic-metadata">

**Author:** [@nikolas.karinja](https://discourse.threejs.org/u/nikolas.karinja)\
**Replies:** 1\
**Last updated:** [January 26, 2024, 9:15pm UTC](https://discourse.threejs.org/t/how-do-i-offset-and-scale-a-texture-within-shadermaterial/60746 "2024-01-26T21:15:04Z")

</div>

Preamble I’m working on a strategy game in which I need to draw borders based upon a bitmap. I understand how to draw the borders and I have implemented it, but it looks off. In some places it looks great but in others …

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