Texture mapping for lit objects?

p5.js
1

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.

2

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

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:

  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() function in your shader.

3

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?

4

Here’s the original source code (referenced by phong.frag in the same folder): p5.js/lighting.glsl at 374acfb44588bfd565c54d61264df197d798d121 · processing/p5.js · GitHub

1 Like