JasperDre
JasperDre

Reputation: 87

How to make a retro/neon/glow effect using shaders?

Let's say the concept is to create a map consisting of cubes with a neon aesthetic, such as:Example

Currently I have this vertex shader:

// 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);
}

And this pixel shader:

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);
}

How would I use this to create a neon effect such as in the example for 3D cubes? The cubes are simply models with a mesh/material. The only change would be to set the material color to black and the outlines to a bright pink or blue (maybe with a glow).

Any help is appreciated. :)

Upvotes: 4

Views: 3969

Answers (1)

datenwolf
datenwolf

Reputation: 162234

You'd normally implement this as a post-processing effect. First render with bright, saturated colours into a texture, then apply a bloom effect, when drawing that texture to screen.

Upvotes: 2

Related Questions