preprocessor definitions inside a shadermaterial

[gero3]

Introduction

This is a suggestion on how we could make use of preprocessor definitions inside a shadermaterial.

Why

I needed a shadermaterial that had more then 16 texture uniforms defined but depending on the configuration of my application only used 16 or less texture uniforms. So I needed the rebuild my shader sourcecode programmatically or I could make a definition system which used preprocessor definitions.

How

We add a new property to the object to define the preprocessor definitions called 'defines'. We also add another property to the uniforms called 'defined' which indicate by which preprocessor definitions they are defined.

Example

/*global THREE:true requestAnimationFrame:true shaders:true*/

var shaders = {
    splat:{
        defines : {"USE_DIFFUSE2" : true},
        uniforms:{
            "alpha1" : { type: "t", value: null },

            "diffuse1" : { type: "t", value: null },
            "multiplier1" : {type: "f", value: 16.0 },
            "offset1" : {type: "f", value: 0.5 },

            "diffuse2" : { type: "t", value: null, defined: "USE_DIFFUSE2"},
            "multiplier2" : {type: "f", value: 1.0, defined: "USE_DIFFUSE2" },
            "offset2" : {type: "f", value: 0, defined: "USE_DIFFUSE2"}

        },
        vertexShader:[
            "varying vec2 vUv;",
            "",
            "void main() {",
            "  ",
            "  vUv = uv;",
            "  vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
            "  gl_Position = projectionMatrix * mvPosition;",
            "  ",
            "}"
        ].join("\n"),
        fragmentShader:[
            "uniform sampler2D alpha1;",

            "uniform sampler2D diffuse1;",
            "uniform float multiplier1;",
            "uniform float offset1;",

            "#ifdef USE_DIFFUSE2",

            "  uniform sampler2D diffuse2;",
            "  uniform float multiplier2;",
            "  uniform float offset2;",
            "#endif",

            "varying vec2 vUv;",
            "",
            "void main() {",
            "  vec4 alphaBlend = texture2D( alpha1, vUv);",
            "  vec4 texel1 = texture2D( diffuse1, offset1 + vUv * multiplier1 );",
            "  #ifdef USE_DIFFUSE2",
            "    vec4 texel2 = texture2D( diffuse2, offset2 + vUv * multiplier2 );",
            "  #endif",
            "  gl_FragColor = texel1;",
            "}"
        ].join("\n")

    }

};

Consequence

• When there are no defines, then the system stays the like it is now.
• When a defines changes, then the program needs to be rebuild and the uniforms relocated.
• There are 2 different kinds of defines: Boolean and Non-Boolean. Boolean defines are defined without value when true. Non-boolean are always defined with the value given.

[alteredq]

I was already thinking about something like that, just it would be probably simpler, just passing in values for defines somehow, not any explicit interaction with uniforms.

Anyways unused uniforms should be detectable from GL API (we already use this quite a lot).

[gero3]

I would love to have an update where it is possible to have preprocessor variables without a value.

function generateDefines ( defines ) {

  var chunk, chunks = [];
  for (var define in defines){
    if (defines[define] === true){
        chunks.push("#define " + define);
    } else if(defines[define] !== false && defines[define] != null){
        chunks.push("#define " + define + " " + defines[define]);
    }
  }

  return chunks.join("\n");
}

[mrdoob]

@gero3 I think it's better as it's now. It's more explicit and easier to understand/learn as it currently is.

[alteredq]

@gero3 So if I understood well your use case, what you would actually need is not to generate any #define when define[something] is false?

function generateDefines ( defines ) {

    var value, chunk, chunks = [];

    for ( var d in defines ) {

        value = defines[ d ];
        if ( value === false ) continue;

        chunk = "#define " + d + " " + value;
        chunks.push( chunk );

    }

    return chunks.join( "\n" );

};

[gero3]

indeed as it makes more sense for boolean values

[alteredq]

Yup, this should also work for true values.

So we would get this:

• for false values there is no #define generated and code guarded by #ifdef SOMETHING would be excluded from the compiled shader
• for true values we get #define SOMETHING true and code guarded by #ifdef SOMETHING would be included into the compiled shader

This would lead to nicer shader code than getting #define SOMETHING false and then needing to do #if defined(SOMETHING) && SOMETHING == true

[mrdoob]

This would lead to nicer shader code than getting #define SOMETHING false and then needing to do #if defined(SOMETHING) && SOMETHING == true

Ah, I see. Makes sense.