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 <mon> (first line of the fragment shader).

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

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 <mon> (first line of the fragment shader).

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

• javascript
• three.js
• glsl

• 1 I think there is shader preprocessor to add mon code to the shader. But maybe i am wrong. – Unick Commented Jan 25, 2018 at 9:34

2 Answers 2

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 <mon> is referring to this "shaderChunk", which seems to be included in most of the three.js shaders to provide mon utility type functions and variables.

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.