CODEWITHSUNDEEP
openglglslgradient
Vasiliy Stavenko
Vasiliy Stavenko

Reputation: 1214

How to make radial gradient on each face using shader in OpenGL

using simple shaders I've found a way to create gradients. Here's result of my job: http://goo.gl/A7pY01 (A little updated after OpenGL ES 2.0 Shader - 2D Radial Gradient in Polygon question)

It's nice, but I still need to display this gradient pattern on each face of my meshes. Or on the billboard face, just like it's a texture.

The glsl function gl_FragCoord returns window-related coordinates. Could someone explain me the way how to translate this into face-related coords and then draw my pattern?

Upvotes: 0

Views: 6975

Answers (1)

Vasiliy Stavenko
Vasiliy Stavenko

Reputation: 1214

Okey. A little surfing of stackoverflow gave me this topic: OpenGL: How to render perfect rectangular gradient?

Here is the meaning string: gl_FragColor = mix(color0, color1, uv.u + uv.v - 2 * uv.u * uv.v);

Of course we cannot translate window-space coordinates into something "face-related", but we could use UV coordinates of a face. So, I decided, what if we have a square face with uv-coordinates corresponding to full-sized texture (like 0,0; 0,1; 1,0; 1,1); So the center of a structure is 0.5,0.5. This could be a center of my round-gradient.

so my code of fragment shader is:

vec2 u_c = vec2(0.5,0.5);

float distanceFromLight = length(uv - u_c);

gl_FragColor = mix(vec4(1.,0.5,1.,1.), vec4(0.,0.,0.,1.), distanceFromLight*2.0);

Vertex shader:

gl_Position = _mvProj * vec4(vertex, 1.0);
uv = uv1;

Of course, we need to give correct UV coordinates, but the point is understood.

Here's example: http://goo.gl/A7pY01

Upvotes: 2

Related Questions