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

Question

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?

Dextrality

I think there is shader preprocessor to add common code to the shader. But maybe i am wrong. – Habsburg

Answer 1

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.

Herrmann

They are compiled to formatted strings and available as a dictionary in the Three namespace. These are then parsed in a pre processing step before yielding valid GLSL. – Heiskell

they are not compiled in the build process but in runtime. so you can write you can replace them with your own shader chunk – Lottie

Answer 2

As an additional information and for documentation purpose, you can use the same macro to import extra glsl code in a separate glsl file by following this structure:

#include perlin_noise3d.glsl;

assuming both files are placed in the same folder.

Racine