What does 'pc_FragColor' do in WebGL2 shaders?

Questions
1

I’m reading through the compiled shaders in MeshLambertMaterial, and I discovered that there are about 14 additional lines of #defines when using a WebGL2 context compared to a WebGL1 context.

Webgl2Comparison
Webgl2Comparison1277×625 33.2 KB

I have two questions:

1. What do these three lines do?

#define varying in
out highp vec4 pc_fragColor;
#define gl_FragColor pc_fragColor

2. Is this simply undoing the function overload for texture()?

#define texture2D texture
#define textureCube texture
2

Some keywords and function names changed in WebGL2 from WebGL1. Three.js automatically adds some defines at the top of the shader to make the old WebGL1 shaders forward compatible with WebGL2. In this case:

  • varying changed to in
  • You must declare an output from the fragment shader rather than using gl_FragColor
  • The texture2D, textureCube functions are now just called with the texture function in WebGL2.
  • Functions that used to require an extension (ending in EXT) are replaced with their WebGL2 equivalents.
5 Likes
3

I didn’t know you could map the value of one variable to another with a #define so assigning a value to gl_FragColor will automatically update pc_FragColor. That’s very valuable info, thanks!