• DEMO DOWNLOAD
• GeeXLab Downloads
• Forum thread (EN)
• Source code @ GitHub

I took a little moment few days ago to adapt a wireframe shader I found some years ago HERE. This wireframe shader is based on a vertex and a fragment shaders only, but requires the vertex shader to know the position of all vertices of a triangle. What’s more, this wireframe shader does not work with indexed meshes.

To make this wireframe shader compatible with indexed meshes that are very common in GeeXLab demos, I had to add a geometry stage in the GPU program. Thanks to the geometry shader that knows the position of all vertices of a triangle, it was easy to convert the original wireframe shader.

The demo is available in two versions, one for OpenGL 3.2 capable platforms (Windows, Linux and macOS), and the second one for ASUS Tinker Board that supports OpenGL ES 3.1. Among the new features introduced by OpenGL ES 3.1, we find the geometry shader support. Perfect!

You can download the GeeXLab demo from the following link:

The demo is also available in the full code sample pack in the gl-32/wireframe-shader/ folder).

You need a recent version of GeeXLab to run the demo. GeeXLab can be downloaded from the THIS PAGE.

Here are some screenshots of the demo on Windows. I added some controls to change the wireframe color as well as the one of the solid surface:

 
And here is the demo on the Tinker Board with the Mali T-760 GPU with OpenGL ES 3.1 support:

 
Here is the complete GPU program (OpenGL 3.2):

Vertex Shader

#version 150
in vec4 gxl3d_Position;
void main()
{
  gl_Position = gxl3d_Position;
}

Geometry Shader

#version 150
layout(triangles) in;
layout(triangle_strip, max_vertices=3) out;
uniform mat4 gxl3d_ModelViewProjectionMatrix; // GeeXLab auto uniform
uniform vec2 WIN_SCALE;

out vec3 dist;

void main()
{
  vec4 p0_3d = gl_in[0].gl_Position;
  vec4 p1_3d = gl_in[1].gl_Position;
  vec4 p2_3d = gl_in[2].gl_Position;

  // Compute the vertex position in the usual fashion. 
  p0_3d = gxl3d_ModelViewProjectionMatrix * p0_3d;  
  // 2D position
  vec2 p0 = p0_3d.xy / p0_3d.w; 

  // Compute the vertex position in the usual fashion. 
  p1_3d = gxl3d_ModelViewProjectionMatrix * p1_3d;  
  // 2D position
  vec2 p1 = p1_3d.xy / p1_3d.w; 

  // Compute the vertex position in the usual fashion. 
  p2_3d = gxl3d_ModelViewProjectionMatrix * p2_3d;  
  // 2D position
  vec2 p2 = p2_3d.xy / p2_3d.w; 
  
  
  
  //--------------------------------
  // Project p1 and p2 and compute the vectors v1 = p1-p0
  // and v2 = p2-p0                                  
  vec2 v10 = WIN_SCALE*(p1 - p0);   
  vec2 v20 = WIN_SCALE*(p2 - p0);   
  
  // Compute 2D area of triangle.
  float area0 = abs(v10.x*v20.y - v10.y*v20.x);
  
  // Compute distance from vertex to line in 2D coords
  float h0 = area0/length(v10-v20); 
  
  dist = vec3(h0, 0.0, 0.0);
  
  // Quick fix to defy perspective correction
  dist *= p0_3d.w;
  
  gl_Position = p0_3d;
  EmitVertex();
  


  //--------------------------------
  // Project p0 and p2 and compute the vectors v01 = p0-p1
  // and v21 = p2-p1                                  
  vec2 v01 = WIN_SCALE*(p0 - p1);   
  vec2 v21 = WIN_SCALE*(p2 - p1);   
  
  // Compute 2D area of triangle.
  float area1 = abs(v01.x*v21.y - v01.y*v21.x);
  
  // Compute distance from vertex to line in 2D coords
  float h1 = area1/length(v01-v21); 
  
  
  dist = vec3(0.0, h1, 0.0);
  
  // Quick fix to defy perspective correction
  dist *= p1_3d.w;
  
  gl_Position = p1_3d;
  EmitVertex();
  


  //--------------------------------
  // Project p0 and p1 and compute the vectors v02 = p0-p2
  // and v12 = p1-p2                                  
  vec2 v02 = WIN_SCALE*(p0 - p2);   
  vec2 v12 = WIN_SCALE*(p1 - p2);   
  
  // Compute 2D area of triangle.
  float area2 = abs(v02.x*v12.y - v02.y*v12.x);
  
  // Compute distance from vertex to line in 2D coords
  float h2 = area2/length(v02-v12); 
  
  dist = vec3(0.0, 0.0, h2);

  // Quick fix to defy perspective correction
  dist *= p2_3d.w;
  
  gl_Position = p2_3d;
  EmitVertex();

  //--------------------------------
  EndPrimitive();
  
}

Pixel Shader

#version 150
uniform vec3 WIRE_COL;
uniform vec3 FILL_COL;
in vec3 dist;
out vec4 FragColor;
void main()
{
  // Undo perspective correction.      
  //vec3 dist_vec = dist * gl_FragCoord.w;
  
  // Wireframe rendering is better like this:
  vec3 dist_vec = dist;
  
  // Compute the shortest distance to the edge
  float d = min(dist_vec[0], min(dist_vec[1], dist_vec[2]));

  // Compute line intensity and then fragment color
  float I = exp2(-2.0*d*d);

  FragColor.rgb = I*WIRE_COL + (1.0 - I)*FILL_COL; 
  FragColor.a = 1.0;
}

• DEMO DOWNLOAD
• GeeXLab Downloads
• Forum thread (EN)
• Source code @ GitHub

Here is a simple fire shader based on ideas from this tweet and this tweet.

You can download the GeeXLab demo from THIS LINK (the demo is also available in the full code sample pack in the gl-21/fire-shader/ folder). As usual, GeeXLab can be downloaded from the THIS PAGE.

You should be able to run this demo on any OpenGL 2.1-capable platform: Windows, Linux, macOS and Raspberry Pi with OpenGL desktop enabled.

For any feedback, a thread is available HERE on Geeks3D forums.

Here is a crappy video of the fire shader. Better to see it with GeeXLab!

Here is the pixel shader in GLSL:

#version 120
uniform sampler2D tex_noise;
uniform sampler2D tex_gradient;
uniform sampler2D tex_gradient_color;
uniform sampler2D tex_distortion;
uniform sampler2D tex_color;
uniform float alpha_threshold;
uniform float time;
uniform float speed;

void main (void)
{
  vec2 uv = gl_TexCoord[0].xy * vec2(4.0, 1.0);
  
  vec2 uv_noise = uv * 0.3;

  uv_noise.y -= time * speed;

  vec2 uv_grad = uv * vec2(1.0, 1.0);
  
  vec2 uv_distor = uv;
  vec3 tdistortion = texture2D(tex_distortion,uv_distor).rgb * 0.015;

  vec2 uv_noise_distor = vec2(uv_noise.x + tdistortion.g, uv_noise.y + tdistortion.r);  
  vec3 tnoise = texture2D(tex_noise, uv_noise_distor).rgb;
  tnoise *= 1.75;
  
  float tgradient = 1.0-texture2D(tex_gradient,uv_grad).r;

  vec3 tgradientcolor = texture2D(tex_gradient_color,uv_grad).rgb;

  vec3 tcolor = texture2D(tex_color,uv_noise_distor*3.0).rgb * vec3(2.0, 1.6, 1.2);

  float alpha0 = (tnoise.x + tnoise.y + tnoise.z) / 3.0;

  float flamewob = ((1.0 + (sin(time + uv.x*8.0) * cos(time - uv.x*5.0)))*0.5) * 0.30;

  float thres = alpha_threshold * tgradient *2.15 + flamewob;

  float alpha = 1.0-smoothstep(thres-0.15, thres+0.3, alpha0);  

  
  vec3 flame = clamp(tnoise * 2.1, 0.0, 1.0) * tgradientcolor; 
  vec3 color = mix(tcolor, flame, (alpha-alpha0)*1.5);
  
  gl_FragColor = vec4(color, alpha);
}

• DEMO DOWNLOAD
• GeeXLab Downloads
• Forum thread (EN)
• Source code @ GitHub

Yesterday I stumbled upon this small math note that explains how to compute the normal from a procedural heightmap:

 
Here is a small demo that puts in practice the calcNormal() function to compute the normal vector in the vertex shader.

You can download the GeeXLab demo from THIS LINK (the demo is also available in the full code sample pack in the gl-32/heightmap-normal/ folder). As usual, GeeXLab can be downloaded from the THIS PAGE.

For any feedback, a thread is available HERE on Geeks3D forums.

The vertex shader:

#version 150
in vec4 gxl3d_Position;
in vec4 gxl3d_TexCoord0;
in vec4 gxl3d_Normal;
out vec4 v_normal;
out vec4 v_lightdir;
out vec4 v_eyedir;
uniform mat4 gxl3d_ProjectionMatrix; // GeeXLab auto-uniform.
uniform mat4 gxl3d_ModelViewMatrix; // GeeXLab auto-uniform.
uniform mat4 gxl3d_ViewMatrix; // GeeXLab auto-uniform.
uniform vec4 light_position;

float f(float x, float z)
{
  return sin(x) * cos(z);
}

vec3 calc_normal(float x, float z)
{
  float eps = 0.0001;
  return normalize(vec3(
  f(x-eps, z) - f(x+eps, z), 
  2.0*eps,
  f(x, z-eps) - f(x, z+eps)
  ));
}

void main()
{
  vec4 P = gxl3d_Position;
  P.y = f(P.x, P.z);

  vec3 N = calc_normal(P.x, P.z);
 
  vec4 view_position = gxl3d_ModelViewMatrix * P;
  gl_Position = gxl3d_ProjectionMatrix * view_position;
  
  v_normal = gxl3d_ModelViewMatrix * vec4(N, 0.0);
  v_eyedir = -view_position;
  
  vec4 lp = gxl3d_ViewMatrix * light_position;
  v_lightdir = lp - view_position;
}

The fragment shader:

#version 150
in vec4 v_normal;
in vec4 v_lightdir;
in vec4 v_eyedir;
out vec4 FragColor;
void main()
{
  vec3 albedo = vec3(0.9, 0.7, 0.5);
  vec3 N = normalize(v_normal.xyz);
  vec3 L = normalize(v_lightdir.xyz);
  float NdotL = max(dot(N, L), 0.0);
  vec3 color = albedo * vec3(0.4);
  color += albedo * NdotL;
  
  vec3 E = normalize(v_eyedir.xyz);
  vec3 R = reflect(-L, N);
  float specular = pow(max(dot(R, E), 0.0), 64.0);
  color += vec3(0.8, 0.8, 0.8) * specular;	

  FragColor.rgb = color;
  FragColor.a = 1.0;
}

The Heeelix demo has been ported to GeeXLab (OpenGL 2.1). I didn’t test on all platforms but this demo should run on Windows, Linux, macOS. In theory, it should be work on Raspberry Pi but in practice, I think the pixel shader is a little bit too heavy for the VideoCore IV GPU.

Heeelix won the first place at the Revision 2018 party animated gif compo.

The pixel shader is ready to be live-coded. Just run the demo (gl21-heeelix.xml) in GeeXLab, edit the pixel shader in your favorite text editor and hack the demo!

The GeeXLab demo can be downloaded from THIS LINK. The latest GeeXLab (Windows, Linux or macOS) is available on THIS PAGE.

For any feedback, a thread on Geeks3D forums is available HERE.

On my GTX 1080, it takes around 2 seconds to compile the GLSL pixel shader each time you add a new modification. If the modification is already known by the GLSL compiler, the update is extremely fast.

Heeelix runs at 174 FPS (res: 800×480) on a GeForce GTX 1080 + R391.35.

If you uncomment the line 14 of the pixel shader (ANOTHER_LEVEL) you will get:

And if you add two extra levels:

#ifdef ANOTHER_LEVEL
  scale *= pModHelixScale(p, lead, innerRatio);
  p.x *= -1.;
  scale *= pModHelixScale(p, lead, innerRatio);
  p.x *= -1.;
  scale *= pModHelixScale(p, lead, innerRatio);
  p.x *= -1.;
#endif

A vertical separator is a handy gadget you can meet in many situations like in post processing filters where it’s nice to show the image with and without filter at the same time.

One basic way to draw a vertical separator in GLSL is to check texture coordinates:

...
uniform float mouse_x;
in vec4 uv; // texture coordinates
out vec4 FragColor;

void main() 
{ 
  vec4 fragcolor = texture(...);

  float sep = 1.0;
  if ((uv.x > mouse_x-0.1) && (uv.x < mouse_x+0.1))
    sep = 0.0;

  FragColor = fragcolor * sep;
}

This technique is simple and works fine. But this separator has hard edges:

 

We can do better using the GLSL smoothstep() function:

y = smoothstep(a, b, x)

When x is smaller than a, smoothstep() returns 0.0, when x is greater than b, smoothstep() returns 1.0. When x is between a and b, smoothstep() performs an Hermite interpolation:

 
To code our improved vertical separator, we will use the result of two smoothstep functions:

float y1 = smoothstep(a, b, x);
float y2 = smoothstep(b, c, x);
float sep = 1.0 - y1*y2;

The previous fragment shader becomes:

...
uniform float mouse_x;
in vec4 uv; // texture coordinates
out vec4 FragColor;

void main() 
{ 
  vec4 fragcolor = texture(...);
  
  float y1 = smoothstep(mouse_x-0.1, mouse_x, uv.x);
  float y2 = smoothstep(mouse_x, mouse_x+0.1, uv.x);
  float sep = 1.0 - y1*y2;
  
  FragColor = fragcolor * sep;
}

This smoothstep-based separator has smooth egdes.

 
The complete demo is available HERE. This demo requires an OpenGL 3.2 support.

You can download GeeXLab from THIS PAGE.

Unzip the archive where you want and load the 01-vertical-separator/main-gl3.xml file into GeeXLab. The source code of the pixel shader is available in the 01-vertical-separator/ps-gl3.glsl file.

A second demo (26-triangle-blur) is also available in the archive. This second demo shows a video filter. On Windows platform, the video filter is applied to the webcam output. On Linux or macOS, a simple image is used in place of the webcam.

For any feedback or bug-report, a thread is available HERE on GeeXLab forums.

What? Two sided lighting? Isn’t it the old OpenGL 1.2 feature that allows lighting calculation on both sides of a triangle? Yes it is!

I spend most my time in the Vulkan renderer (which gets better and better), so don’t panic, it’s not a new killer feature of GeeXLab. I just added this feature for the needs of this article: NVIDIA Quadro P5000 vs GeForce GTX 1080.

Two sided lighting is a feature used in many CAD softwares and NVIDIA Quadro cards are particularly fast in rendering polygons with two sided lighting enabled. According to my tests, a Quadro is around 7 times faster (up to 20 times faster in some cases) than the equivalent GeForce graphics card. Some results are available HERE.

GeeXLab supports OpenGL 2, 3 and 4 (as well as DX12 and Vulkan). GeeXLab is based on a low level API that allows more or less a direct control of the rendering and it’s easy to render an OpenGL scene with fixed pipeline functions only: just render objects without shaders. You can also enable / disable some OpenGL states if you need.

To properly support two sided lighting, I added the following functions to the gh_renderer lib (in Lua only):
– light_model_double_side()
– light_set_ambient()
– light_set_diffuse()
– light_set_specular()
– light_set_position()
– material_set_ambient()
– material_set_specular()
– material_set_diffuse()

The gh_renderer.light_model_double_side() function is nothing more than a wrapper around:

glLightModeli(GL_LIGHT_MODEL_TWO_SIDE, GL_TRUE);

I’m sure that I wasted my time adding these functions because GeeXLab comes with LuaGL that should support these old functions. An example of LuaGL is available in the gl-21/lua-gl/ folder of the code sample pack. It doesn’t matter because I quickly coded these functions.

Here is the FRAME script of the two sided lighting demo that shows how to use these functions:

local elapsed_time = gh_utils.get_elapsed_time()

gh_renderer.set_depth_test_state(1)

gh_camera.bind_v2(camera, 1, 1, 1, 1, 1)

gh_renderer.clear_color_depth_buffers(0.0, 0.0, 0.0, 1.0, 1.0)


gh_renderer.disable_state("GL_CULL_FACE")
gh_renderer.enable_state("GL_LIGHTING")
gh_renderer.enable_state("GL_LIGHT0")

gh_renderer.light_model_double_side(1)

gh_renderer.light_set_ambient(0, 0.2, 0.2, 0.2, 1.0)
gh_renderer.light_set_diffuse(0, 0.9, 0.9, 0.9, 1.0)
gh_renderer.light_set_specular(0, 0.0, 0.0, 0.0, 1.0)
gh_renderer.light_set_position(0, 2.0, 10.0, 30.0, 1.0)


local POLYGON_FACE_BACK = 1
local POLYGON_FACE_FRONT = 2
local POLYGON_FACE_BACK_FRONT = 3

gh_renderer.material_set_ambient(0.6, 0.6, 0.6, 1.0, POLYGON_FACE_BACK_FRONT)
gh_renderer.material_set_specular(0.0, 0.0, 0.0, 1.0, POLYGON_FACE_BACK_FRONT)
gh_renderer.material_set_diffuse(0.9, 0.2, 0.1, 1.0, POLYGON_FACE_FRONT)
gh_renderer.material_set_diffuse(0.2, 0.9, 0.1, 1.0, POLYGON_FACE_BACK)


--gh_renderer.wireframe()
    
gh_object.set_euler_angles(mesh_cyl, elapsed_time*10, elapsed_time*20, elapsed_time*30)
gh_object.render(mesh_cyl)

gh_object.set_euler_angles(mesh_cyl, elapsed_time*10, 90+elapsed_time*20, elapsed_time*30)
gh_object.render(mesh_cyl)

gh_object.set_euler_angles(mesh_cyl, elapsed_time*10, 45+elapsed_time*20, elapsed_time*30)
gh_object.render(mesh_cyl)

gh_object.set_euler_angles(mesh_cyl, elapsed_time*10, 135+elapsed_time*20, elapsed_time*30)
gh_object.render(mesh_cyl)

--gh_renderer.solid()

gh_renderer.light_model_double_side(0)
gh_renderer.disable_state("GL_LIGHT0")
gh_renderer.disable_state("GL_LIGHTING")
gh_renderer.enable_state("GL_CULL_FACE")

The two sided lighting function is available in the gl-21/two-sided-lighthing/ folder of the code sample pack.

GeeXLab 0.15.0.1 comes with an improved Vulkan renderer and Intel GPUs are now supported. More information about GeeXLab and Vulkan in a future post. If you want to play with Vulkan, some demos are available in the vk/ folder of the code sample pack.

GeeXLab 0.15.0.1 is only available for Windows 64-bit. As usual, you can download it from THIS PAGE.

Here is the changelog (full changelog is available HERE):

Version 0.15.0.1 – 2017.05.12
+ added support of double sided lighting in the OpenGL renderer (old OpenGL, fixed pipeline).
! [WINDOWS] improved the Vulkan renderer plugin, support for Intel GPUs fixed.
* fixed a bug in gh_texture.get_texel_2d(), buffer offset was wrong.
! [WINDOWS] updated the GPU monitoring plugin with NVIDIA TITAN Xp.
! [WINDOWS] GPU monitoring plugin: updated Radeon RX 500 / RX 400 support.
! [WINDOWS] updated GPU Shark 0.10.0.0

To check the presence of an extension, just use the check_opengl_extension of the gh_renderer lib (Lua / Python). This function returns 1 if the extension is exposed and 0 otherwise.

local ret = gh_renderer.check_opengl_extension("GL_ARB_tessellation_shader")
if (ret == 1) then
  -- the extension is supported
else
  -- the extension is NOT supported
end

Here is a code snippet in Lua to log OpenGL errors:

function LogGLError(where)
  local errcode = gh_renderer.get_opengl_error()
  local errcodestr = gh_renderer.opengl_error_code_to_str(errcode)
  print(where .. " - " .. errcodestr)
end  

get_opengl_error() returns the real OpenGL error code (ex: 1282) and opengl_error_code_to_str() translates this code into a string: “GL_INVALID_OPERATION”.

GLSL Hacker offers another way to log errors, this time with a minimal amount of code. Just enable the gl_debug_profile attribute in the XML window node
and all OpenGL events will reported in GLSL Hacker log file. This feature is based on GL_ARB_debug_output introduced with OpenGL 4.3.

And if you find some code sequences that generate OpenGL errors, post them in the forum, I’ll try to fix them.

In the last version of the code sample pack, there is a demo (host_api/RubikCube/Cube_Rotation_Quaternion/demo_v3.xml) where the vertex shader has the following code:

#version 150
in vec4 gxl3d_Position;
uniform mat4 gxl3d_ViewProjectionMatrix;

struct Transform
{
  vec4 position;
  vec4 axis_angle;
};
uniform Transform T;


...
...

vec3 rotate_vertex_position(vec3 position, vec3 axis, float angle)
{
  ...
}

void main()
{
  vec3 P = rotate_vertex_position(gxl3d_Position.xyz, T.axis_angle.xyz, T.axis_angle.w);
  P += T.position.xyz;
  gl_Position = gxl3d_ViewProjectionMatrix * vec4(P, 1);
  ...
  ...
}

In this vertex shader, the variable T is a structure (struct Transform {...}) and is used as an uniform variable. Setting the values of the uniforms from Lua (or Python, or in C/C++) is quite simple:

gh_gpu_program.bind(gpu_prog)
gh_gpu_program.uniform4f(gpu_prog, "T.axis_angle", 1, 0, 0, angle)
gh_gpu_program.uniform4f(gpu_prog, "T.position", x, y, z, 1)

Like in most apps based on GLSL Hacker, Lua is used as the scripting language because it does not require an installation like Python (especially on Windows systems where Python is not installed).

To display OpenGL information, GL-Z uses the FreeType GL plugin that is available since GLSL Hacker version 0.8.0. Two or three TTF fonts are used. Fonts are managed with the gx_font.lua lib (part of GLSL Hacker standard libs). A small GLSL program combined with a fullscreen quad and an orthographic camera are the main ingredients of the background effect.

GL-Z source code is available in the glz_src/ folder.

GL-Z on Linux Mint 17, GeForce GTX 680