So I've been trying to edit this flower geometry to have some dots like this shader https://www.shadertoy.com/view/4tSXR1 and I am learning a lot about GLSL in the process. Basically, I was planning on trying to incorporate those dots into this codepen demo of a flower geometry but it seems like I'm unable to write ANY function (even an empty one) in the fragment shader as it compiles.
https://codepen.io/ricky1280/pen/ZEoXVgZ on line 481 of the html file from the codepen you'll find where the fragment shader starts, which is consistent with the documentation found on https://threejs.org/docs/#api/en/materials/Material.onBeforeCompile
the fragment shader code looks like this:
shader.fragmentShader = `
uniform vec3 bbMin;
uniform bool vertCenterGradient;
uniform bool lowlights;
uniform bool subtleFade;
uniform bool topf2;
uniform bool defaultFade;
uniform vec3 bbMax;
uniform vec3 color1;
uniform vec3 color2;
uniform vec3 color3;
uniform vec3 color4;
uniform float vertOffset;
uniform float centerSize;
uniform float centerSize2;
uniform float u_time;
uniform float f3Offset;
varying vec2 vUv;
varying vec3 vPos;
${shader.fragmentShader}
`.replace(
`vec4 diffuseColor = vec4( diffuse, opacity );`,
`
vec4 white = vec4(1.0, 1.0, 1.0, 1.0);
vec4 red = vec4(1.0, 0.0, 0.0, 1.0);
vec4 blue = vec4(0.0, 0.0, 1.0, 1.0);
vec4 green = vec4(0.0, 1.0, 0.0, 1.0);
float f2 = 0.0;
float f = clamp((vPos.z - bbMin.z) / (bbMax.z - bbMin.z)+vertOffset, 0., 1.);
// + is slider for vertical color position, -1 to 1
float linear_modifier = (1.00 * abs(1.) * f);
//vertical gradient position!!
//moves from 0-10?
vec3 col = mix(color1, color2, linear_modifier);
vec2 pos_ndc = vPos.xy*centerSize2;
float dist = length(pos_ndc*centerSize);
//controls central gradient position!
//the lower the larger?
//0-20
if(vertCenterGradient) col = mix(color3, col, dist);
//NOT USING DIST REMOVES VERTICAL CENTRAL GRADIENT
// vec4 diffuseColor = vec4( col, opacity );
float f3 = clamp(vUv.x+f3Offset, 0., 1.);
// ^ THIS controls brightness of lowlights. lower the more intense.
if (lowlights) col = mix(color3, col, f3);
//not using this removes LOWLIGHTS
//f3 is subtle fade
if(subtleFade) col = mix(color3, col, f3);
if(defaultFade){
if(topf2){
f2 = clamp((vPos.x - bbMin.x) / (bbMax.x - bbMin.x), 0., 1.);
} else {
f2 = clamp(vUv.x, 0., 1.);
}
col = mix(color3, col, f2);
//f2 is default
}
vec4 diffuseColor = vec4( col, opacity );`
);
and it returns a syntax error pointing to the curly brace after any function declaration—I've tried a lot of things and it still doesn't seem to compile properly and the common denominator is merely having a function declaration. No function declaration, no problem. In this case, yes problem because not using functions is just horrible.
If you manage to write a function in the fragment shader that's all I need—I wish I could do it and I should be able to do it and there's no understandable reason why this doesn't work.
Thank you and please help