如何使用着色器制作复古/霓虹/发光效果?

4

假设概念是创建一个由立方体组成的地图,具有霓虹美学,例如:Example

目前我有这个顶点着色器:

// Uniforms
uniform mat4 u_projection;
uniform mat4 u_view;
uniform mat4 u_model;

// Vertex atributes
in vec3 a_position;
in vec3 a_normal;
in vec2 a_texture;

vec3 u_light_direction = vec3(1.0, 2.0, 3.0);

// Vertex shader outputs
out vec2 v_texture;
out float v_intensity;

void main()
{
    vec3 normal = normalize((u_model * vec4(a_normal, 0.0)).xyz);
    vec3 light_dir = normalize(u_light_direction);
    v_intensity = max(0.0, dot(normal, light_dir));
    v_texture = a_texture;
    gl_Position = u_projection * u_view * u_model * vec4(a_position, 1.0);
}

还有这个像素着色器:

in float v_intensity;
in vec2 v_texture;

uniform sampler2D u_texture;

out vec4 fragColor;

void main()
{
  fragColor = texture(u_texture, v_texture) * vec4(v_intensity, v_intensity, v_intensity, 1.0);
}

我该如何使用这个来创建类似于3D立方体示例中的霓虹灯效果?立方体只是一个具有网格/材质的模型。唯一的变化将是将材质颜色设置为黑色,轮廓线设置为亮粉色或蓝色(也许带有发光效果)。

非常感谢您的帮助 :)

1个回答

2

通常情况下,您会将其实现为后处理效果。首先使用明亮、饱和的颜色渲染到纹理中,然后在将该纹理绘制到屏幕时应用泛光效果。


有道理。我可能会创建一个带有明亮轮廓和UV映射的黑色纹理,并使用着色器添加泛光效果。我想这将是比在着色器中全部完成更简单的解决方案。我现在会尝试它,但如果您有其他建议或示例,那将很好。 - JasperDre
1
有一篇关于GPU Gems中实时bloom的好文章:http://http.developer.nvidia.com/GPUGems/gpugems_ch21.html。代码已经过时,但理论可能会有所帮助。 - BDL
保存填充率并呈现代表线的“LINES”或三角形带。 - LJᛃ
1
更新后的GPU Gems链接为:https://developer.nvidia.com/gpugems/gpugems/part-iv-image-processing/chapter-21-real-time-glow - Doug
阅读此 https://danielilett.com/2019-05-08-tut1-3-smo-blur/ 以及上述提到的 gpgems 第21章是有帮助的。 - dehinrsu

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接