Un método de implementación eficiente de Hexagon Bokeh basado en glsl
Acerca de Hexagon Bokeh
Quienes encontraron esta publicación de blog ya deberían saber qué es Hexagon Bokeh. Pero para completar, aquí hay una breve introducción.
Bokeh es una palabra derivada del japonés, que significa imágenes desenfocadas. Significa que cuando la cámara toma la imagen, la parte más allá de la distancia focal se verá borrosa. Este tipo de desenfoque hará que las áreas con mayor brillo en la imagen desenfocada se vean borrosas y difusas, y la forma de la difusión borrosa está determinada por la forma de la apertura de la lente. Hexágono significa hexágono, y Hexagon Bokeh también se refiere al efecto de desenfoque cáustico de la apertura de una cámara hexagonal.
Explicación de realización
El método de implementación descrito en este artículo no es original Las primeras ideas surgieron del intercambio técnico del personal de Frost Engine en SIGGRAPH 2011. Puede hacer clic aquí para descargar el pdf del discurso en ese momento.
Colin Barré-Brisebois también tiene una maravillosa explicación de este método en una de las publicaciones de su blog .
En esta publicación de blog, explico principalmente los problemas y las soluciones correspondientes que encontré al intentar usar este método para lograr el efecto Hexagon Bokeh y acercarlo lo más posible al efecto del complemento oficial Camera Lens Blur en After Effects.
1. Método básico
El núcleo de este algoritmo es desmontar un hexágono en tres rombos, o el cuadro de sesgo (Skewed Box) llamado en Frost PPT. Luego, al mezclar estos tres diamantes, se produce el desenfoque hexagonal final. Como se muestra abajo
Primero expliquemos cómo renderizar un diamante borroso.
Primero, realizamos un desenfoque unidireccional en la imagen. Como se muestra en la figura siguiente, el círculo de la izquierda representa los píxeles de la imagen original. Después de desenfocarlo hacia arriba, el resultado será el que se muestra a la derecha, con una línea recta hacia arriba.
Luego aplicamos el resultado difuminado a la siguiente ronda de desenfoque de dirección. Esta vez necesitamos difuminarlo hacia la parte inferior izquierda. Después de este desenfoque, podemos obtener una forma de diamante.
De la misma forma, solo necesitamos ajustar la dirección del desenfoque, y es fácil conseguir los otros dos diamantes. Luego mezcle los tres rombos para obtener el efecto de desenfoque hexagonal final.
El siguiente es el algoritmo central para el desenfoque de la dirección de la imagen
// 模糊方向的计算
// blurAngle: 指的是模糊方向的弧度值
// amount: 指的是模糊的强度
vec2 direction = vec2(cos(blurAngle), sin(blurAngle)) * amount;
// 模糊结果的计算
vec4 BlurTexture(sampler2D tex, vec2 uv, vec2 direction, float amount) {
if (amount >= 1.0){
vec4 finalColor = vec4(0.0);
for (float i = 0; i < amount; i += 1.0) {
float percent = i / amount;
vec4 color = texture(tex, (uv + direction * percent) / texSize);
finalColor += color;
}
return (finalColor / amount);
}
return texture(tex, uv / texSize);
}
Cuando mezclamos el contenido de los tres diamantes, el código también es muy simple
vec4 result = (color1 + color2 + color3) / 3.0;
2. Resuelve el problema de la atenuación de la pantalla.
A partir del algoritmo de desenfoque anterior y el algoritmo de mezcla de canales de desenfoque, no es difícil inferir que el brillo del color de la imagen final disminuirá rápidamente a medida que aumenta el valor de desenfoque. Este resultado es bastante diferente del efecto de Desenfoque de lente de cámara en After Effects. Podemos ver en la siguiente figura que la disminución del valor del color también conduce a una disminución en la visibilidad de los hexágonos causada por el desenfoque del área resaltada.
Para resolver este problema, necesitamos aumentar el valor de gamma de la imagen original antes de desenfocar la imagen original y luego restaurar el valor de gamma después de que se complete el desenfoque. Esto puede garantizar que el brillo del color no se pierda durante el proceso de desenfoque.
//提高gamma值，在进行任何模糊操作之前运行
//power代表新的gamma值，根据测试，power为2.2比较接近Camera Lens Blur的效果
vec4 color = pow(srcColor, vec4(power));
//还原gamma值，在对三个菱形进行颜色混合得出最终的颜色值后运行
vec4 outputColor = pow(result, vec4(1.0 / power));
3. Soporte adicional para rotación y ajuste proporcional hexagonal
Para controlar mejor el efecto de desenfoque, necesitamos aumentar la función de ajustar el ángulo del hexágono difuso y el hexágono. El efecto de ajuste específico se muestra en la siguiente figura:
Después del ajuste, podemos obtener efectos de imagen más interesantes. Para una implementación específica, solo necesitamos integrar la influencia de la relación y la rotación al calcular la dirección del desenfoque. El código es el siguiente
mat2 rotate(float _angle) { return mat2(cos(_angle),-sin(_angle), sin(_angle), cos(_angle)); }
// 模糊方向的计算
// blurAngle: 指的是模糊方向的弧度值
// amount: 指的是模糊的强度
// ratio: 六边形的比例
// rotation: 旋转弧度值
vec2 direction = rotate(rotation) * vec2(cos(blurAngle) * ratio, sin(blurAngle)) * amount;