Include lighting properties into Shader Material

Questions
1

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/). 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).

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

Thanks,

2

Have you considered to enhance a built-in material with 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

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.

3

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 for this.

The original color coding is this (no lighting properties)

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

Thanks,

4

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

5

Try it like so: onBeforeCompile method - JSFiddle - Code Playground

1 Like
6

Mugen87, you are a LEGEND !

Thanks a lot !