WebGL2: same function in different shaders - glsl

Question

I have a big function with complex mathematics in it, and I want to call this same function in several fragment shaders. Do I have to copy-paste the code of the function to every shader? Or is there any way to avoid this, to share code between shaders? Can I have any kind of a "library" for common shader functions?

Answer 1

The way to share code in shaders in WebGL is via string manipulation. Example
const hsv2rgb = `
vec3 hsv2rgb(vec3 c) {
c = vec3(c.x, clamp(c.yz, 0.0, 1.0));
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
`;
const fragmentShader1 = `#version 300 es
${hsv2rgb}
in float hue;
out vec4 color;
void main() {
color = vec4(hsv2Rgb(vec3(hue, 1.0, 0.8)), 1);
}
const fragmentShader2 = `#version 300 es
${hsv2rgb}
in vec3 hsv;
out vec4 color;
void main() {
color = vec4(hsv2Rgb(hsv), 1);
}
`;
there is no need for a library as it's trivial. Example
Example
const snippets = {
hsv2rgb: `...code-from-above--...`,
rgb2hsv: `...some code ...`,
};
now just use the snippets
const fragmentShader2 = `#version 300 es
${snippets.hsv2rgb}
${snippets.rgb2hsv}
in vec3 v_color;
out vec4 color;
void main() {
vec3 hsv = rgb2hsv(v_color);
color = vec4(hsv2Rgb(hsv + vec3(0.5, 0, 0), 1);
}
`;
Though I'd recommend against using an object to collect strings as whatever builder you use may not be able to discard unused snippets.
To organize you can use es6 imports
/* hsv2rgb.glsl.js */
export default `
vec3 hsv2rgb(vec3 c) {
c = vec3(c.x, clamp(c.yz, 0.0, 1.0));
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
`;
And then you can import
/* somefragshader.glsl.js */
import hsv2rgb from './hsv2rgb.glsl.js';
export default `#version 300 es
${hsv2rgb}
in vec3 hsv;
out vec4 color;
void main() {
color = vec4(hsv2Rgb(hsv), 1);
}
`;
And then use in some program
import someFragmentShaderSource from './somefragmentshader.glsl.js';
...
...compile shader using someFragmentShaderSource ...
If you don't like using template string substitution it's trivial to make your own
const subs = {
hsv2rgb: `...code-from-above--...`,
rgb2hsv: `...some code ...`,
};
// replace `#include <name>` with named sub
function replaceSubs(str, subs) {
return str.replace(/#include\s+<(\w+)>/g, (m, key) => {
return subs[key];
});
}
and then
const fragmentShader2 = replaceSubs(`#version 300 es
#include <hsv2rgb>
in vec3 hsv;
out vec4 color;
void main() {
color = vec4(hsv2Rgb(hsv), 1);
}
`, snippets);

Answer 2

In OpenGL / WebGL, GLSL code is passed just as a text. So that if you have a function reusable in multiple GLSL programs - you may write a shader manager that will concatenate various shader blocks.
There are several common approaches:
Mega Shader shared by all your GLSL programs, with #ifdefs in code to activate/deactivate specific blocks. May become very messy.
Shader Manager dynamically constructing GLSL programs from string constants (like code generation).
Shader Manager substituting sub-strings with predefined list of standard functions. Core GLSL syntax does not support #include directives, but Shader Manager might implement them or use another syntax for identifying sub-strings to substitute like %ColorLighting% (or just use ${theVariable} in case of JavaScript).
So that the sample in JavaScript might look like that:
// reusable GLSL functions
var getColor_Red = "vec4 getColor() { return vec4(1.0, 0.0, 0.0, 1.0); }\n"
// fragment shader generator
function getFragShaderRed() {
return "precision highp float;\n"
+ getColor_Red
+ "void main() { gl_FragColor = getColor(); }";
}
A longer answer covering also non-WebGL case is below.
Desktop OpenGL gives more flexibility in this context - it allows multiple Shaders for the same stage to be attached to a single GLSL program. This means, that dedicated function may be moved into dedicated Shader, reused in others Shaders with help of forward declaration of function without body, and linked in multiple GLSL programs - in similar way, how C++ programs are normally compiled and linked.
const GLchar* aShader1Text =
"vec4 getColor() { return vec4(1.0, 0.0, 0.0, 1.0); }";
GLuint aShader1Id = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(aShader1Id, 1, &aShader1Text, NULL);
glCompileShader(aShader1Id);
const GLchar* aShader2Text =
"vec4 getColor();" // forward declaration
"void main() { gl_FragColor = getColor(); }"
GLuint aShader2Id = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(aShader2Id, 1, &aShader2Text, NULL);
glCompileShader(aShader2Id);
GLuint aProgramID = glCreateProgram();
glAttachShader (aProgramID, aShader0Id); // some vertex shader
glAttachShader (aProgramID, aShader1Id); // fragment shader block 1
glAttachShader (aProgramID, aShader2Id); // fragment shader block 2
glLinkProgram (aProgramID);
There are two problems with this functionality:
Unlike C++ programs, OpenGL drivers normally do not really "compile" individual shader objects, but rather validate their syntax, while real compilation is done on "linkage" stage of entire GLSL program. This practically eliminates any benefit from compiling individual GLSL blocks compared to strings concatenation and re-compiling entire GLSL program source code (e.g. from performance point of view).
OpenGL ES and WebGL just removed this functionality from their specification, so that portable program cannot rely on this feature available in desktop OpenGL (from the very beginning of GLSL introduction). The API itself is the same, but OpenGL driver will fail to compile GLSL shader without a main() function.
Desktop OpenGL 4.0 introduced another functionality shader subroutines, which gives more flexibility to GLSL program definition, making it configurable in runtime. This is rather complex functionality is unlikely reasonable for static GLSL programs, and it is also unavailable in OpenGL ES / WebGL.