I can't seem to use a uniform shader variable if I name it "uAmbientColor"

p5.js Coding Questions
1

Just as the title says, if I make a p5 sketch with WEBGL enabled and all that, and I make a shader and try to give it a uniform variable called uAmbientColor, I am unable to use it correctly.

Regard this humble sketch:
https://editor.p5js.org/modusponens/sketches/q3uLSb2Vk

Inside it, you will find basic.frag, which defines uniform vec3 uAmbient. In sketch.js, I set things up so that I use a simple test shader I wrote and draw a square on the screen. The square should be yellow because I have

theShader.setUniform("uAmbient", [1, 1, 0]);

in the sketch file and I have

gl_FragColor = vec4(uAmbient, 1.0)

in the fragment shader.

If you change the name of the variable to uAmbientColor in basic.frag and sketch.js, the square looks black instead of yellow, and nothing you can do with the numbers passed into that function seems to make any difference.

I even went as far as to try turning uAmbientColor into a float and adding two additional floats, so that in my shader I had

uniform float uAmbientColor; // r for red
uniform float uAmbientColog; // g for green
uniform float uAmbientColob; // b for blue
// ... //
gl_FragColor = vec4(uAmbientColor, uAmbientColog, uAmbientColob, 1.0);

in the fragment shader, and then I had

  theShader.setUniform("uAmbientColor", 1);
  theShader.setUniform("uAmbientColog", 1);
  theShader.setUniform("uAmbientColob", 1);

in my sketch file. The result was a cyan square, which is consistent with the 1 I’m trying to pass into the R, G, and B channels only making it through to the G and B and being replaced with a 0 in R.

I’m baffled. What might be causing this?

1 Like
2

uAmbientColor is one of the many uniform names that p5.js uses for its built in shaders. See p5.RendererGL.js.

Here’s a full listing of the reserved uniforms:

uMaterialColor
uSampler
uTint
uSpecular
uEmissive
uShininess
uUseLighting
uPointLightCount
uPointLightLocation
uPointLightDiffuseColors
uPointLightSpecularColors
uDirectionalLightCount
uLightingDirection
uDirectionalDiffuseColors
uDirectionalSpecularColors
uAmbientLightCount
uAmbientColor
uSpotLightCount
uSpotLightAngle
uSpotLightConc
uSpotLightDiffuseColors
uSpotLightSpecularColors
uSpotLightLocation
uSpotLightDirection
uConstantAttenuation
uLinearAttenuation
uQuadraticAttenuation
2 Likes
3

Oh, okay! So p5 has built-in shaders? It doesn’t support normal mapping through any built-in means, though, does it? This is my ultimate goal.

4

Yes, p5.js has a number of basic built in shaders for different scenarios (with or without lights, with or without stroke, and with or without a texture). And all of the uniforms and attributes that are available to the built in shaders are available to your custom shaders.

Here is an example of a shader that manipulates the vertex normal in the fragment shader (as well as deforming the geometry in the vertex shader): Waving Flag Shader - OpenProcessing

Similarly, you should be able to make a normal map shader using a sampler2D uniform which you provide as a p5.Graphics or p5.Image.

2 Likes