WebGL2 Shader Definitions Explained

Question 1: Varying and FragColor Definitions

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

These lines handle the transition from WebGL1 (GLSL ES 1.0) to WebGL2 (GLSL ES 3.0) syntax:

1. #define varying in - In WebGL2, the varying keyword is deprecated and replaced with in for fragment shaders. This define allows WebGL1 shader code using varying to work in WebGL2.

2. out highp vec4 pc_fragColor; and #define gl_FragColor pc_fragColor - In WebGL1, fragment shaders output their color through the built-in gl_FragColor variable. In WebGL2, this global variable is deprecated, and you must define your own output variable. These lines create a custom output variable pc_fragColor and map the old gl_FragColor to it.

Question 2: Texture Function Definitions

GLSLCopied
#define texture2D texture
#define textureCube texture

Yes, you're correct. These definitions are handling the texture sampling function changes:

1. In WebGL1, separate functions exist for different texture types: texture2D() for 2D textures and textureCube() for cubemaps.

2. In WebGL2, these are replaced by the overloaded texture() function that handles multiple texture types based on the sampler type.

These defines allow WebGL1 shader code to run in WebGL2 by mapping the old specific functions to the new generic texture() function.

These definitions are part of Three.js's compatibility layer that allows the same shader code to work across both WebGL1 and WebGL2 contexts.