Texture mapping for lit objects?

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.

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.

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?

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