javascriptthree.jsglsl

Three.js / WebGL / GLSL - What does "#include <common>" mean?


In this Three.js shader example a function called rand() (taking a vec2 as an argument) is used to generate random numbers.

However, the function is not defined in the shader code. Instead, it seems to get included using #include <common> (first line of the fragment shader).

I guess #include works a bit like in C/C++, but what exactly does <common> refer to? Is it an external file? Is it something specific to Three.js or will it also work with WebGL/GLSL in general?


Solution

  • It is to do with how three.js tries to make shaders modular via "shaderChunks".
    Examples of the included three.js shaders can be see HERE.

    That particular part #include <common> is referring to this "shaderChunk", which seems to be included in most of the three.js shaders to provide common utility type functions and variables.