着色器（练习）

Q：修改顶点着色器让三角形上下颠倒：参考解答

A：直接修改顶点数组

Q：使用uniform定义一个水平偏移量，在顶点着色器中使用这个偏移量把三角形移动到屏幕右侧：参考解答

A：

• 在cpp文件中的绘制部分，设置

•  float offset = 0.5f; 
   ourShader.setFloat("xOffset", offset);
  
  

• 顶点着色器

•  #version 330 core layout (location = 0) in vec3 aPos; 
   layout (location = 1) in vec3 aColor; 
   out vec3 ourColor; 
   uniform float xOffset; 
   void main() { 
       gl_Position = vec4(aPos.x + xOffset, aPos.y, aPos.z, 1.0); // add the xOffset to the x position of the vertex position 
       ourColor = aColor; 
   }
  
  

Q：使用out关键字把顶点位置输出到片段着色器，并将片段的颜色设置为与顶点位置相等（来看看连顶点位置值都在三角形中被插值的结果）。做完这些后，尝试回答下面的问题：为什么在三角形的左下角是黑的?：参考解答

A：

• 顶点着色器

•  #version 330 core
   layout (location = 0) in vec3 aPos;
   layout (location = 1) in vec3 aColor;
  
   // out vec3 ourColor;
   out vec3 ourPosition;
  
   void main()
   {
       gl_Position = vec4(aPos, 1.0); 
       // ourColor = aColor;
       ourPosition = aPos;
   }
  
  

• 片段着色器

•  #version 330 core
   out vec4 FragColor;
   // in vec3 ourColor;
   in vec3 ourPosition;
  
   void main()
   {
       FragColor = vec4(ourPosition, 1.0);    // note how the position value is linearly interpolated to get all the different colors
   }
  
  

• 其中颜色属性在后面虽然被设置，但是没有用到

• 效果

• ![_CR1%24171MAS3Y%L]59(70.png](https://img.haomeiwen.com/i8820600/67616d0a011fa212.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 想一想：我们片段的颜色输出等于的（内插）坐标三角形。三角形左下角的坐标是什么？是（-0.5f，-0.5f，0.0f）。 因为x、y值为负，它们实际被设置为0.0f。这种情况一直发生到三角形中间，因为从该点开始，值将再次被正插值。 0.0f的值当然是黑色的，这解释了三角形的黑色面。