Understanding pc_fragColor in Three.js

Based on the code snippet you've shared, the pc_fragColor variable is part of Three.js's WebGL shader compatibility layer.

The "pc" in pc_fragColor most likely stands for "pixel color" or "programmable color". It serves as a custom output variable for fragment shaders when using WebGL 2.0 with GLSL ES 1.0 compatibility.

Purpose and Function

The code is handling compatibility between different GLSL versions:

1. When using GLSL ES 3.0 (parameters.glslVersion === GLSL3), the code doesn't define pc_fragColor because GLSL 3.0 requires explicit output variables.

2. When using older GLSL versions, the code:

   • Defines pc_fragColor as an explicit output variable with layout(location = 0) out highp vec4 pc_fragColor;
   • Remaps the deprecated gl_FragColor to pc_fragColor with #define gl_FragColor pc_fragColor

This approach allows Three.js to:

• Support both older and newer GLSL syntax
• Maintain backward compatibility with shaders written for WebGL 1.0
• Properly handle fragment shader outputs in WebGL 2.0 contexts

The variable essentially bridges the gap between the automatic output variable gl_FragColor (which was built-in in older GLSL versions) and the explicit output variables required in newer GLSL versions.