# Texture mapping for lit objects?

**URL:** <https://discourse.processing.org/t/texture-mapping-for-lit-objects/30897>\
**Category:** p5.js\
**Created:** [June 24, 2021, 10:12pm UTC](https://discourse.processing.org/t/texture-mapping-for-lit-objects/30897 "2021-06-24T22:12:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![modusponens](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/modusponens/32/13888_2.png) [@modusponens](https://discourse.processing.org/u/modusponens)\
**Post date:** [June 24, 2021, 10:12pm UTC](https://discourse.processing.org/t/texture-mapping-for-lit-objects/30897/1 "2021-06-24T22:12:45Z")

</div>

Is it possible in p5 to use a texture as a normal map, or as a specular map, etc., and have that affect the way an object appears and interacts with lights? I know that there are functions like `normalMaterial` and `specularMaterial` in p5, but they don’t seem to provide what I’m looking for.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [June 24, 2021, 11:02pm UTC](https://discourse.processing.org/t/texture-mapping-for-lit-objects/30897/2 "2021-06-24T23:02:19Z")

</div>

It is definitely theoretically possible, but you would need to write your own “bump map” shader to accomplish this. Here’s an example I wrote that procedurally adjusts normals in the fragment shader (not based on a texture map but based on a simple mathematical formula): [Waving Flag Shader - OpenProcessing](https://openprocessing.org/sketch/1116549)

I stole most of the lighting code from the standard p5.js “phong” shader, the critical bit is where it adjust the normal vector that is passed to the lighting function:

```auto
  vec3 vRippledNormal = vNormal + vec3(sin((coord.x - time / 3000. + coord.y / 4.) * PI * 6.) * 0.2, 0, 0);
  totalLight(vViewPosition, normalize(vRippledNormal), diffuse, specular);

```

to do something similar with a bump map you would bind a p5.Graphics or p5.Image object as a `uniform` in your shader and then sample values based on texture coordinates using the [`texture2D()`](https://thebookofshaders.com/glossary/?search=texture2D) function in your shader.

---

<div class="post-metadata">

**Author:** ![modusponens](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/modusponens/32/13888_2.png) [@modusponens](https://discourse.processing.org/u/modusponens)\
**Post date:** [June 25, 2021, 1:37am UTC](https://discourse.processing.org/t/texture-mapping-for-lit-objects/30897/3 "2021-06-25T01:37:00Z")

</div>

Okay, so in other words, there is no handy automatic system that lets me pass in a texture and it handles the rest, but if I’m willing to do the math, I can still do it with shaders? I see that in your example here, you’re calling this `totalLight` function. Is that a function found in the Phong shader or something? Also, where can I find the code for the Phong shader that you borrowed?

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [June 25, 2021, 2:17am UTC](https://discourse.processing.org/t/texture-mapping-for-lit-objects/30897/4 "2021-06-25T02:17:28Z")

</div>

Here’s the original source code (referenced by phong.frag in the same folder): [p5.js/lighting.glsl at 374acfb44588bfd565c54d61264df197d798d121 · processing/p5.js · GitHub](https://github.com/processing/p5.js/blob/374acfb44588bfd565c54d61264df197d798d121/src/webgl/shaders/lighting.glsl)