Shulou(Shulou.com)06/01 Report--

This article mainly introduces how OpenGL Shader realizes the lighting effect, which has certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let Xiaobian take you to understand it together.

principle of internal luminescence

A simple overview of the inner luminescence principle is: sample the surrounding pixels alpha and take the average superposition effect. In summary, it seems very simple, but it requires some understanding and digestion. The luminous object can be regarded as a circular object to collect pixel values around the circular object. For example, given that the radius of a circle is R and the angle is Angle, then the current pixel coordinate position is deduced according to the radius and angle, and the transparency is obtained from the current pixel coordinate position and then calculated.

But it seems to have been introduced in the shadow mask effect can also pass. The difference is that shadow masking is rendered using circles to smudge outward while the inner glow effect is applied inward.

illuminant realization

Firstly, RGB superposition is realized by drawing circle. You can see that the center of the circle is darker, and the color fades outward. It didn't work, but I knew what to do next.

void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; uv -= 0.5; uv.x *= iResolution.x/iResolution.y; vec3 color = vec3(0.); float glow = length(uv); color += glow; gl_FragColor = vec4(color,1.);}

By inverting, you can reduce the size of a value slightly by dividing a number by length(uv) and multiplying by a decimal. The desired effect can be seen in the final result. Comparing the previous results shows that dividing is equivalent to reversing the original result, the original internal value is the smallest, and after dividing, the internal value becomes the largest.

void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; uv -= 0.5; uv.x *= iResolution.x/iResolution.y; vec3 color = vec3(0.); float glow = 0.05 * 3./ length(uv); color += glow; gl_FragColor = vec4(color,1.);}

However, the transition effect of white range seems to be too large to continue to optimize the original algorithm. Adding pow makes the value smaller.

float getGlow(float dist, float radius, float intensity){ return pow(radius/dist, intensity);}void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; uv -= 0.5; uv.x *= iResolution.x/iResolution.y; vec3 color = vec3(0.); float glow = 0.05 * getGlow(length(uv), 1., 2.); color += glow; gl_FragColor = vec4(color,1.);}

Extended effect Small Sun

Change the position and color of the light to simulate the effect of sunlight.

float getGlow(float dist, float radius, float intensity){ return radius/dist;}void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; vec3 color = vec3(0.); vec2 uv2 = uv; uv2 -=1.0; float glow = 0.09 * 3./ length(uv2); color += (5.0 * vec3(0.02 * glow) + vec3(0.9686, 0.6941, 0.0) * glow); gl_FragColor = vec4(color,1.);}

float getGlow(float dist, float radius, float intensity){ return radius/dist;}void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; vec3 color = texture(iChannel1,uv).rgb; float position = sin(iTime) / 2.; vec2 uv2 = uv; uv2 -=0.5; uv2.x *= iResolution.x/iResolution.y; uv2 += position; float glow = 0.09 * 3./ length(uv2); color += (5.0 * vec3(0.02 * glow)); gl_FragColor = vec4(color,1.);}

Thank you for reading this article carefully. I hope that the article "OpenGL Shader How to Realize Illumination Effect" shared by Xiaobian will help everyone. At the same time, I hope that everyone will support you a lot and pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.