Skip to content

Latest commit

 

History

History

lab5

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

Lab 5: Manipulation of polygons using shaders

Code for this lab found, however it is recommended you clone the whole repository.

Task

  1. Update shaders
  2. Look at shaders
  3. Use the shaders to draw 3 extra triangles per face

Source code found and adapted from Karia Rodriguez


Journey

Using the lab 4 source code as my base, I removed all the unnecessary functions such as basicCamera() to keep it simple (KISS).

My first approach on this task was to find the centre of the triangle being rendered and then change the position of each vertex, as detailed below. All the code would have to do then is draw it three times in different positions.

void drawTriangle(vec4 one, vec4 two, vec4 three, vec3 colour){
  fragmentColor = colour;
  Normal_cameraspace = vertices[0].Normal_cameraspace;
  Position_worldspace = vertices[0].Position_worldspace;
  EyeDirection_cameraspace = vertices[0].EyeDirection_cameraspace;
  LightDirection_cameraspace = vertices[0].LightDirection_cameraspace;
  gl_Position = one;
  EmitVertex();

  fragmentColor = colour;
  Normal_cameraspace = vertices[1].Normal_cameraspace;
  Position_worldspace = vertices[1].Position_worldspace;
  EyeDirection_cameraspace = vertices[1].EyeDirection_cameraspace;
  LightDirection_cameraspace = vertices[1].LightDirection_cameraspace;
  gl_Position = two;
  EmitVertex();

  fragmentColor = colour;
  Normal_cameraspace = vertices[2].Normal_cameraspace;
  Position_worldspace = vertices[2].Position_worldspace;
  EyeDirection_cameraspace = vertices[2].EyeDirection_cameraspace;
  LightDirection_cameraspace = vertices[2].LightDirection_cameraspace;
  gl_Position = three;
  EmitVertex();

  EndPrimitive();
}

void main(){
  vec4 centre = (gl_in[2].gl_Position + gl_in[1].gl_Position + gl_in[0].gl_Position) / 3;

  //triangle 1
  v1 = gl_in[0].gl_Position;
  v2 = gl_in[1].gl_Position;
  v3 = centre;

  drawTriangle(v1, v2, v3, vec3(1.0, 0.0, 0.0));

  //triangle 2
  v1 = gl_in[0].gl_Position;
  v2 = gl_in[2].gl_Position;
  v3 = centre;

  drawTriangle(v1, v2, v3, vec3(0.0, 0.0, 1.0));

  //triangle 3
  v1 = gl_in[1].gl_Position;
  v2 = gl_in[2].gl_Position;
  v3 = centre;

  drawTriangle(v1, v2, v3, vec3(0.0, 1.0, 0.0));
}

drawTriangle was a function that takes in three vectors and a colour vector and emits the primitive.

However this method did not work the way I expected... changing nothing.

A pyramid that hasn't changed

This needed more investigation. So in the next tutorial I consulted with Karina, and she helped me find a solution. The main error I made was assuming that only the vector position had to be centered and changed. In the process of fixing this I removed the drawTriangle() function as it made the code more obtuse. To fix this error, I found the averaged positions of everything.

  vec4 centre = ((gl_in[2].gl_Position + gl_in[1].gl_Position + gl_in[0].gl_Position) / 3);
  vec3 normal = ((vertices[2].Normal_cameraspace + vertices[1].Normal_cameraspace + vertices[0].Normal_cameraspace) / 3);
  vec3 eye = ((vertices[2].EyeDirection_cameraspace + vertices[1].EyeDirection_cameraspace + vertices[0].EyeDirection_cameraspace) / 3);
  vec3 position = ((vertices[2].Position_worldspace + vertices[1].Position_worldspace + vertices[0].Position_worldspace) / 3);
  vec3 light = ((vertices[2].LightDirection_cameraspace + vertices[1].LightDirection_cameraspace + vertices[0].LightDirection_cameraspace) / 3);

Once I had all the variables for the centre vertex calculated, I could then start drawing each triangle on the base face manually. This resulted in:

A pyramid that displays all three triangles

Unfortunately there is an error with my lighting code that is causing a dark spot on top of the centre vector. I tried for more than two hours to fix this, and consulted with Karina, but I was unable to get rid of it. I decided it wasn't worth any more time spent on it, as I had achieved the main goal of displaying 3 different coloured vectors.


Final Product

Input:

make lab5

Output: A pyramid that displays all three triangles


Conclusion

It was interesting to learn about the GLSL shaders and how they can be used to manipulate the final graphical output.


Sources

Stack Overflow

Tutorials Point

University of Brighton intranet/lectures