# Include lighting properties into Shader Material

**URL:** <https://discourse.threejs.org/t/include-lighting-properties-into-shader-material/32351>\
**Category:** Questions\
**Tags:** shader-material\
**Created:** [December 4, 2021, 8:13am UTC](https://discourse.threejs.org/t/include-lighting-properties-into-shader-material/32351 "2021-12-04T08:13:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nemines](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nemines/32/16023_2.png) [@Nemines](https://discourse.threejs.org/u/Nemines)\
**Post date:** [December 4, 2021, 8:13am UTC](https://discourse.threejs.org/t/include-lighting-properties-into-shader-material/32351/1 "2021-12-04T08:13:14Z")

</div>

Hi Community,

I’m using a shader Material to color code an extrude geometry according to some Data values ([https://jsfiddle.net/nemines/8rLuv1hy/18/](https://jsfiddle.net/nemines/8rLuv1hy/18/)). This works fine and I get the results I am looking for. However, it’s not the most sexy looking mesh as it needs lighting. I tried including lights and conserving the color coding but without success.

here is the desired effect with lighting but without the color coding ([JSFiddle](https://jsfiddle.net/nemines/3v86c2w9/2/)).

Any idea how to apply the lighting to my custom shader and preserve the color coding ?

Thanks,

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 4, 2021, 9:55am UTC](https://discourse.threejs.org/t/include-lighting-properties-into-shader-material/32351/2 "2021-12-04T09:55:29Z")

</div>

Have you considered to enhance a built-in material with [Material.onBeforeCompile()](https://threejs.org/docs/index.html?q=material#api/en/materials/Material.onBeforeCompile) instead of writing a custom shader from scratch? Have a look at the following example in order to see how it’s done: [three.js webgl - materials - modified](https://threejs.org/examples/webgl_materials_modified)

`Material.onBeforeCompile()` would make it easier to make use of lighting and other existing material features. Considering the amount of your custom code, it should be the preferred approach.

---

<div class="post-metadata">

**Author:** ![Nemines](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nemines/32/16023_2.png) [@Nemines](https://discourse.threejs.org/u/Nemines)\
**Post date:** [December 4, 2021, 2:44pm UTC](https://discourse.threejs.org/t/include-lighting-properties-into-shader-material/32351/3 "2021-12-04T14:44:44Z")

</div>

Thanks @Mugen87,

So I tried what you recommended and I got the lighting effect I was looking for. However, it seems to me that I only have the color corresponding to the first attribute (RMR) value of the geometry\_data. Maybe something is wrong with the definition of norm\_z.

I made a [JSFiddle](https://jsfiddle.net/nemines/h8jwpLfm/25/) for this.

The original color coding is this ([no lighting properties](https://jsfiddle.net/nemines/8rLuv1hy/22/))

If you could help me debug this, I would really appreciate it !

Thanks,

---

<div class="post-metadata">

**Author:** ![Nemines](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nemines/32/16023_2.png) [@Nemines](https://discourse.threejs.org/u/Nemines)\
**Post date:** [December 6, 2021, 3:30pm UTC](https://discourse.threejs.org/t/include-lighting-properties-into-shader-material/32351/4 "2021-12-06T15:30:17Z")

</div>

Anyone interested in giving it a try debugging this sucker ?  
I promise you would save me hours of trial and errors but not luck

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 7, 2021, 10:29am UTC](https://discourse.threejs.org/t/include-lighting-properties-into-shader-material/32351/5 "2021-12-07T10:29:12Z")

</div>

Try it like so: [onBeforeCompile method - JSFiddle - Code Playground](https://jsfiddle.net/m8xs1you/1/)

---

<div class="post-metadata">

**Author:** ![Nemines](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nemines/32/16023_2.png) [@Nemines](https://discourse.threejs.org/u/Nemines)\
**Post date:** [December 7, 2021, 12:00pm UTC](https://discourse.threejs.org/t/include-lighting-properties-into-shader-material/32351/6 "2021-12-07T12:00:43Z")

</div>

Mugen87, you are a LEGEND !

Thanks a lot !