After referencing Apply color gradient to material on mesh - three.js
I successfully implemented a flower shader that applies a vertical color gradient across the Zinnia. The colors transition from red to yellow vertically, creating a gradient based on height. (refer to image 1)
Here is the selected vertex shader:
float f = clamp((vPos.z - bbMin.z) / (bbMax.z - bbMin.z), 0., 1.);
vec3 col = mix(color1, color2, f);
vec4 diffuseColor = vec4( col, opacity );
And the selected fragment shader:
gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0);
The code above indicates that the color gradient properly responds to the z-axis.
I also managed to create a flower shader where the color transitions from black at the center of the rose to red at the edges, responding to the Y axis horizontally. (refer to image 2)
Here is the selected vertex shader for this setup:
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
And the selected fragment shader:
gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0);
This code demonstrates that the color blending occurs along the y-axis in this instance.
(FINALLY!) My question: How can I combine these two shaders to achieve a composition where the center of the flower darkens towards black as it approaches the center, while maintaining the existing vertical gradient? The blend from black to red would occur on the y-axis (or even from black to transparent?), and the blend from red to yellow on the z-axis? -- This adjustment aims to add depth to the zinnia when viewed from the side.
https://i.sstatic.net/Dt982.png
https://codepen.io/ricky1280/pen/zYWyzQv (shader begins on line 271 in html of this pen)
To ensure petals are visible from a perfect profile view:
https://i.sstatic.net/hAH6u.png
https://codepen.io/ricky1280/pen/RwMEgmj (shader starts on line 227 of html in this pen)
For example, here is the red-yellow shader applied to the rose, with the gradient visible from a perfect profile view https://i.sstatic.net/sVtuX.png
https://codepen.io/ricky1280/pen/dymwRBW (shader starts on line 265 of html in this pen)
(for instance, the red-yellow shader applied to the rose creates a visible gradient from a profile view)
Thank you for taking the time to read through all this—I struggle with GLSL, so any assistance would be greatly appreciated.