现在的位置: 首页 > 综合 > 正文

GLSL实现Glow效果

2013年04月08日 ⁄ 综合 ⁄ 共 3976字 ⁄ 字号 小 中 大 ⁄ 评论关闭
  1.  Glow即辉光效果现在已成为3D图形中一个引人注目的特效.本文主要介绍如何使用GLSL实现一个典型的GLow效果.
  2.  实现步骤:1.渲染整个场景到一个祯缓冲区中
  3.     2.将场景中需要进行GLow处理的物体绘制第二个FBO纹理A中
  4.     3.在FBO纹理A和B之间进行横和纵"高斯"过滤
  5.     4.将进行过GLow处理后的FBO纹理A与祯缓冲区中的场景图像以glBlendFunc(GL_ONE, GL_ONE)方式进行混合处理
  6.    
  7.  GLSL文件功能简介:
  8.  FullScreen.vert - 用于绘制覆盖整个视口的四边形以进行Glow效果的高斯过滤
  9.  Filter.frag - 用于横和纵的高斯过滤
  10.  Blend.frag - 用于处理过的GLowFBO纹理与原始场景图像进行混合
  12.  为了直接进行生成Glow效果的介绍,这里假设程序已正确处理了OpenGL和GLSL的初始化.
  14. void RenderOrigionalScene()
  15. {
  16.  if (g_bUseFillRender)
  17.  {
  18.   glPolygonMode(GL_FRONT, GL_FILL);
  19.  }
  20.  else
  21.  {
  22.   glPolygonMode(GL_FRONT, GL_LINE);
  23.  }
  24.  RenderObject();
  25. }
  26.  首先让我们绘制原始场景,由于本Demo未绘制除辉光物体外的其它事物,所以此处就直接绘制为进行具有辉光效果的物体.
  28. void RenderGlowObject()
  29. {
  30.  // 设置视口
  31.  glViewport(0, 0, g_uiTextureWidth, g_uiTextureHeight);
  32.  // 将原始场景绘制到第二个FBO
  33.  glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, g_uiFboColorOne);
  34.  // 清除第一个FBO颜色和深度缓存
  35.  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
  36.  // 绘制辉光物体
  37.  RenderObject();
  38. }
  39.  然后设置绘制目标到FBO纹理A并将欲进行Glow处理的物体绘制到上面来,这里需要注意的是必须根据FBO纹理的尺寸设置一个
  40.  视口使其跟FBO纹理一样大,以使物体能够准确地映射到整个FBO纹理上.清除FBO颜色缓冲区和绘制深度缓冲区是必要的,因为
  41.  每次绘制到FBO纹理中的图像都不一样.
  43. void FilterGlowObject()
  44. {
  45.  glPolygonMode(GL_FRONT, GL_FILL);
  46.  // 将水平过滤后的图像绘制第二个FBO
  47.  glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, g_uiFboColorTwo);
  48.  // 清除第二个FBO颜色
  49.  glClear(GL_COLOR_BUFFER_BIT);
  50.  // 重新设置片元着色器
  51.  glUseProgram(g_ProgramObjectOne);
  52.  // 设置水平过滤标志
  53.  GLint iUniformIndex = glGetUniformLocation(g_ProgramObjectOne, "g_bFiterMode");
  54.  glUniform1i(iUniformIndex, 1);
  55.  // 设置纹理
  56.  glBindTexture(GL_TEXTURE_2D, g_uiIDOne);
  57.  // 绘制
  58.  RenderFullScreen();
  60.  // 将竖直过滤后的图像绘制第一个FBO
  61.  glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, g_uiFboColorOne);
  62.  // 清除第一个FBO颜色和深度缓存
  63.  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
  64.  // 设置竖直过滤标志
  65.  iUniformIndex = glGetUniformLocation(g_ProgramObjectOne, "g_bFiterMode");
  66.  glUniform1i(iUniformIndex, 0);
  67.  // 设置纹理
  68.  glBindTexture(GL_TEXTURE_2D, g_uiIDTwo);
  69.  // 绘制
  70.  RenderFullScreen();
  71. }
  72.  下面到Glow效果处理的重头戏,是否能生成完美的辉光效果关键就在于此步的处理.但其实也很简单,主要就是为Filter着色器设
  73.  置进行合适横,纵两次过滤的标志和绘制目标,然后绘制全视口四边形,剩下的过滤工作则由GLSL的高斯过滤着色器全权负责.
  75. void RenderToScreen()
  76. {
  77.  // 恢复视口
  78.  glViewport(0, 0, g_uiCurrentWindowWidth, g_uiCurrentWindowHeight);
  79.  // 恢复绘制目标为祯缓冲区
  80.  glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, NULL);
  81.  // 启动混合
  82.  glEnable(GL_BLEND);
  83.  glBlendFunc(GL_ONE, GL_ONE);
  84.  // 绑定纹理
  85.  glBindTexture(GL_TEXTURE_2D, g_uiIDOne);
  86.  // 重新设置片元着色器
  87.  glUseProgram(g_ProgramObjectTwo);
  88.  // 绘制
  89.  RenderFullScreen();
  90.  // 恢复固定功能管线
  91.  glUseProgram(0);
  92.  // 关闭混合
  93.  glDisable(GL_BLEND);
  94. }
  95.  最后一步无非就是将过滤好的Glow纹理与原始场景图像进行混合,当然使用OpenGL固定功能管线或GLSL都可以轻易实现,但首先必
  96.  须把视口设置回原来的状态.
  98.  以下是高斯过滤的GLSL着色器代码,粘贴于此以方便读者查阅.
  99.  顶点着色器:
  100. void main()
  101. {
  102.  gl_TexCoord[0] = gl_MultiTexCoord0;
  103.     gl_Position = gl_Vertex;
  104. }
  105.  高斯过滤着色器:
  106. const int g_iFilterTime = 9; // 过滤次数
  107. const float g_fGene = (1.0/(1.0 + 2.0*(0.93 + 0.8 + 0.7 + 0.6 + 0.5 + 0.4 + 0.3 + 0.2 + 0.1))); // 衰减因子
  109. uniform sampler2D g_Decal;
  110. uniform bool g_bFiterMode;
  111. uniform float g_fGlowGene;
  112. uniform vec2 g_vec2HorizontalDir; // 水平过滤方向
  113. uniform vec2 g_vec2VerticalDir;  // 竖直过滤方向
  114. uniform float g_fFilterOffset; // 过滤偏移
  116. void main()
  117. {
  118.  float aryAttenuation[g_iFilterTime];
  119.  aryAttenuation[0] = 0.93;
  120.  aryAttenuation[1] = 0.8;
  121.  aryAttenuation[2] = 0.7;
  122.  aryAttenuation[3] = 0.6;
  123.  aryAttenuation[4] = 0.5;
  124.  aryAttenuation[5] = 0.4;
  125.  aryAttenuation[6] = 0.3;
  126.  aryAttenuation[7] = 0.2;
  127.  aryAttenuation[8] = 0.1;
  129.  // 采样原始颜色
  130.  vec2 vec2Tex0 = gl_TexCoord[0].st;
  131.  vec4 vec4Color = texture2D(g_Decal, vec2Tex0)*g_fGene;
  133.  // 计算过滤方向
  134.  vec2 vec2FilterDir = g_vec2HorizontalDir + vec2(g_fFilterOffset, 0.0); // 水平过滤
  135.  if (!g_bFiterMode)
  136.  {
  137.   vec2FilterDir = g_vec2VerticalDir + vec2(0.0, g_fFilterOffset); // 竖直过滤
  138.  }
  140.  // 进行过滤
  141.  vec2 vec2Step = vec2FilterDir;
  142.  for(int i = 0; i< g_iFilterTime; ++i)
  143.  {
  144.   vec4Color += texture2D(g_Decal, vec2Tex0 + vec2Step)*aryAttenuation[i]*g_fGene;
  145.   vec4Color += texture2D(g_Decal, vec2Tex0 - vec2Step)*aryAttenuation[i]*g_fGene;
  146.   vec2Step += vec2FilterDir;
  147.  }
  149.  if (g_bFiterMode)
  150.  {
  151.   gl_FragColor = vec4Color*g_fGlowGene;
  152.  }
  153.  else
  154.  {
  155.   gl_FragColor = vec4Color;
  156.  }
  157. }
  159.  混合着色器:
  160. uniform sampler2D g_Decal;
  162. void main()
  163. {
  164.  gl_FragColor = texture2D(g_Decal, gl_TexCoord[0].st);
  165. }
  167. Demo效果图:

  168.  

  169. 参考资料:Nvidia OpenGL SDK 10.5 Simple Glow
  170. exe文件:http://www.fileupyours.com/view/219112/GLSL/Glow%20Demo.rar

 

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞