Getting ready

Start with an OpenGL program that draws two triangles to form a quad. Provide the position at vertex attribute location 0, and the texture coordinate (0 to 1 in each direction) at vertex attribute location 1 (see the Sending data to a shader using vertex attributes and vertex buffer objects recipe).

We'll use the following vertex shader:

#version 430 
 
layout (location = 0) in vec3 VertexPosition; 
layout (location = 1) in vec3 VertexTexCoord; 
 
out vec3 TexCoord; 
 
void main() { 
  TexCoord = VertexTexCoord; 
  gl_Position = vec4(VertexPosition,1.0); 
} 

The fragment shader contains the uniform block, and is responsible for drawing our
fuzzy circle:

#version 430 
 
in vec3 TexCoord; 
layout (location = 0) out vec4 FragColor; 
 
layout (binding = 0) uniform BlobSettings { 
  vec4 InnerColor; 
  vec4 OuterColor; 
  float RadiusInner; 
  float RadiusOuter; 
}; 
 
void main() { 
  float dx = TexCoord.x - 0.5; 
  float dy = TexCoord.y - 0.5; 
  float dist = sqrt(dx * dx + dy * dy); 
  FragColor =
mix( InnerColor, OuterColor,
smoothstep( RadiusInner, RadiusOuter, dist )); }

Note the uniform block named BlobSettings. The variables within this block define the parameters of our fuzzy circle. The OuterColor variable defines the color outside of the circle. InnerColor is the color inside of the circle. RadiusInner is the radius that defines the part of the circle that is a solid color (inside the fuzzy edge), and the distance from the center of the circle to the inner edge of the fuzzy boundary. RadiusOuter is the outer edge of the fuzzy boundary of the circle (when the color is equal to OuterColor).

The code within the main function computes the distance of the texture coordinate to the center of the quad located at (0.5, 0.5). It then uses that distance to compute the color by using the smoothstep function. This function provides a value that smoothly varies between 0.0 and 1.0 when the value of the third argument is between the values of the first two arguments. Otherwise, it returns 0.0 or 1.0, depending on whether dist is less than the first or greater than the second, respectively. The mix function is then used to linearly interpolate between InnerColor and OuterColor based on the value returned by the smoothstep function.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
52.14.84.29