翻译:GLSL的顶点位移贴图

翻译自: Vertex Displacement Mapping using GLSL

  • 译者: FreeBlues

说明: 之所以选择这篇文档, 是因为现在但凡提到位移贴图(Displacement Mapping), 都要求设备支持镶嵌细分(tessellates), 但是目前大多数的移动设备都不支持这个特性, 而本文的年代比较久远(2006~2008), 那时的设备更不可能支持镶嵌细分了, 说明位移贴图并非必需镶嵌细分这个特性, 也意味着本文的实现方法可以在大多数设备上运行.

介绍

顶点位移贴图(Vertex Displacement Mapping)或者简单点儿位移贴图(Displacement Mapping) 是一种技术, 它允许用一个纹理贴图(位移图-displacement map)对一个多边形网格(mesh)进行变形, 以便增加表面细节. 它的原理并不新鲜. 它甚至是一些地形生成算法的基础(请参考 Terrain Generator GLUT 项目). 新鲜的是使用 GPU 来实现实时网格变形.

  • 2006.11.5 更新

位移贴图需要显卡允许在顶点着色器中访问至少一个纹理贴图单元. 在顶点着色器中访问纹理贴图被称为 顶点纹理存取(Vertex Texture Fetching). 着色器模型 3.0 强制实现在顶点着色器内至少有 4 个纹理单元能被访问. 现在, 只有基于 nVidia 的 Geforce 6, Geforce 7 以及更高版本支持 顶点纹理存取. ATI 显卡不支持 顶点纹理存取, 甚至连最新的高端型号比如 X1950XTX 也不支持(更多解释请看这里 ATI X1900XTX and VTF)

  • 2006.11.22 更新

看起来 Forceware 显卡驱动 91.xx 和 91.xx 有点问题. 老一点的驱动 (84.xx) 或者最新的 (96.xx) 都能正确地工作(这篇文章中有更多细节)

  • 2008.9.30 更新

顶点纹理存取 现在在 radeon 也可用了: ATI Catalyst 8.10 Fixes the Displacement Mapping Bug in OpenGL @ Geeks3D.

GPU Caps Viewer 工具允许你快速知道在顶点着色器中可访问纹理单元数:

截图:

这个信息能通过 OpenGL 的常量 GL_MAX_VERTEX_TEXTURE_IMAGE_UNITS_ARB 获得.

下面的截图展示了对本教程使用项目的渲染. 我们将会使用 Demoniak3D 平台以便快速编写位移贴图示例.

例程截图:

不同的例程使用了 GLSL (OpenGL Shading Language) 进行着色器编程.

位移原理

用于变形的基本元素是从位移图中查询到的向量. 这个向量通常要么保存一个 RGBA 的颜色, 要么保存一个标量颜色(用灰度表示的高度图). 我们将会使用这个向量以及更精确的它的一些部件的总额, 作为一个因子, 用来改变顶点的位置. 最常见的一种方法是按前一个因子的比例沿着顶点的法线移动顶点的位置.

截图:

上图可以总结为如下的关系:

  1. P1 = P0 + (N * df * uf)
  • P0 是顶点原始的位置
  • P1 是位移之后的顶点位置
  • N 是顶点的法线向量
  • df 是被规范化的位移因子(如 [0.0; 1.0])
  • uf 是一个用户选择的缩放因子

df 能从下面的关系中获得, 它把一个 RGB 值转换成一个灰度值:

  1. df = 0.30*dv.x + 0.59*dv.y + 0.11*dv.z

dv 就是当前被处理的顶点从位移图中获取的向量.

现在理论已经齐备, 只欠实践了...

位移顶点着色器

一旦所需的良好的工作条件准备妥当, 顶点着色器是相当简单的. 就像任何一种世界上的 3D 显卡的技术发展一样, 顶点位移贴图 有一些少许的限制, 如果它们不在考虑在内，将会把你的 Ultra-Boosted 7800 GTX 变成一个古老的 S3 trio (你还记得......).

为了完成 顶点位移贴图, 这里有两个主要限制:

  • 位移图必须是浮点格式. 在 OpenGL 的条款中, 它意味着内部像素格式被设置为GL_RGBA_FLOAT32_ATI (ATI 和 nVidia 都能用).
  • 位移图必须不能被过滤: 没有线性(linear)或三线性(trilinear)过滤, Nearest 模式是唯一被接受的.

因此一旦位移图被以 nearest 模式过滤的浮点格式加载, 位移贴图实际上变得简单了, 如下面的顶点/像素着色器:

  1. [Vertex_Shader]
  3. uniform sampler2D displacementMap;
  5. void main(void)
  6. {
  7. 	vec4 newVertexPos;
  8. 	vec4 dv;
  9. 	float df;
  11. 	gl_TexCoord[0].xy = gl_MultiTexCoord0.xy;
  13. 	dv = texture2D( displacementMap, gl_MultiTexCoord0.xy );
  15. 	df = 0.30*dv.x + 0.59*dv.y + 0.11*dv.z;
  17. 	newVertexPos = vec4(gl_Normal * df * 100.0, 0.0) + gl_Vertex;
  19. 	gl_Position = gl_ModelViewProjectionMatrix * newVertexPos;
  20. }
  22. [Pixel_Shader]
  24. uniform sampler2D colorMap;
  26. void main(void)
  27. {
  28.    gl_FragColor = texture2D(colorMap, gl_TexCoord[0].xy);
  29. }

在顶点着色器中获取位移图跟我们在像素着色器中获取纹理贴图一样: 使用 GLSL 的 texture2D() 函数.

Demoniak3D 的示例展示了一个 80000 个多边形网格用一个简单 BMP 图像的变形:

截图:

nearest 过滤模式是今天硬件的顶点着色器里唯一可用的模式. 但是没有什么能够阻止我们实现我们自己的 bilinear 过滤模式. 这里是这个函数(改编自 nVidia 的 Cg 代码)做了这个工作:

  1. #define textureSize 256.0
  2. #define texelSize 1.0 / 256.0
  4. vec4 texture2D_bilinear( uniform sampler2D tex, vec2 uv )
  5. {
  6. 	vec2 f = fract( uv.xy * textureSize );
  7. 	vec4 t00 = texture2D( tex, uv );
  8. 	vec4 t10 = texture2D( tex, uv + vec2( texelSize, 0.0 ));
  9. 	vec4 tA = mix( t00, t10, f.x );
  10. 	vec4 t01 = texture2D( tex, uv + vec2( 0.0, texelSize ) );
  11. 	vec4 t11 = texture2D( tex, uv + vec2( texelSize, texelSize ) );
  12. 	vec4 tB = mix( t01, t11, f.x );
  13. 	return mix( tA, tB, f.y );
  14. }

这个函数的使用很简单, 只要把 texture2D() 替换成 texture2D_bilinear() 就行了:

  1. dv = texture2D_bilinear( displacementMap, gl_MultiTexCoord0.xy );

这段代码在顶点着色器和像素着色器里都运行得很好.

法线的问题

顶点位移贴图 最大的一个缺点是面对法线的顶点被破坏了因为对于未变形网格来说它们是有效的. 因为我们在一个顶点着色器中, 我们不能访问其他两个来自当前被处理的面的顶点, 然后我们无法重新计算法线.

不过有两种方式来解决这个棘手的问题: 第一个就是简单地不使用......法线! 使用静态光线(就像光线贴图-lightmapping), 法线就没用了, 因为光线来自光线图-light-map.

第二个方法是为像素着色器提供法线. 一个简单的方法是从位移图创建一个法线图. 法线图保存法线向量, 被指向模拟位移图的起伏. 这个技巧工作得非常好, 如果我们忘掉一些小缺点, 比如一些区域不应该被照亮.

下面这幅图展示了一个 凹凸位移贴图(BumpDisplacementMapping) 着色器的结果. 位移图和法线图都被根据基本图(石头的纹理贴图)创建了. 这个项目也可以在下载存档中可用.

截图:

结论

顶点位移贴图 能被用于创造很酷的效果并且允许发挥顶点处理器的威力, 它常常被遗忘于像素处理器的好处. 然而, 我们必须考虑到一些限制, 比如完成顶点纹理存取的硬件能力(ATI/Radeon 的 GPU 不支持 顶点位移映射 ），法线的问题变成错误, 甚至不可能像 shadow-volumes 一样使用一些算法 （或者是你的 3D 引擎的一部分），因为这些算法处理的顶点存储在系统内存中, 而不是存储在 GPU 的图形内存中......

记着这些约束, 顶点位移贴图 允许实现, 例如,极其逼真的水呈现模拟(见更多资源部分中的链接)或甚至互动顶点位移, 如下示例所示: 顶点位移是由一个 AVI 视频控制 （视频来源于 K-Meleon web 浏览器目录)

截图:

更多资源

nVidia - Vertex Texture Fetch

Using Vertex Texture Displacement for Realistic Water Rendering

OpenGL Setup for GLSL

例程下载

例程下载: 例程

例程代码需要 Demoniak3D 才能正常运行.

Demoniak3D 可以从这里下载: Demoniak3D Demo-System.

附录:教程提供的完整例程代码

完整例程中给出了详细的参数设置和如何使用那些图像资源作为纹理, 只要稍微修改一下就可以在我们自己的 OpenGL ES 框架下直接使用.

顶点位移贴图例程

  1. <?xml version="1.0" encoding="Windows-1252" standalone="yes"?>
  2. <!--
  3. ==============================================================================
  4. AUTHOR:		JeGX - jegx@ozone3d.net
  5. DATE:		10.03.2006
  6. PURPOSE:	Vertex Displacement Mapping Demo.
  7. TUTORIAL:	http://www.ozone3d.net/tutorials/vertex_displacement_mapping.php
  9. ====================================
  10.  \==:: http://www.oZone3D.Net ::==/
  11.   ===============================
  12. ==============================================================================
  13. -->
  15. <hyperion version_major="1" version_minor="2" >
  17. <!--
  18. The Scene!
  19. -->
  20. <scene name="displacement_mapping_demo"
  21.        display_fps="TRUE"
  22.        show_ref_grid="TRUE"
  23.        vsync="TRUE" >
  25. 	<infos_color r="1.0" g="1.0" b="1.0" />
  26. 	<window_size width="1024" height="768" />
  27. 	<background_color r="0.3" g="0.0" b="0.0" />
  28. 	<background_image image="data/stars.gif" />
  30. 	<!--
  31. 	Check the GLSL support and the number of vertex shader texture units we need in this demo.
  32. 	-->
  33. 	<check_hardware_caps glsl="TRUE" vs_tex_samplers="1"
  34. 	                     error_message="Sorry, this demo requires a Shader Model 3.0 (for vertex texture fetching) complient graphics controller. Demo startup failed. Bye..." />
  36. </scene>
  38. <!--
  39. Setup an EXAMINE camera.
  40. -->
  41. <camera name="myCamera" fov="60.0" navigation_mode="EXAMINE"  >
  42. 	<position x="-143.41" y="218.55" z="241.49" />
  43. 	<orientation pitch="30.0" yaw="120.0" />
  44. </camera>
  46. <!--
  47. The base map (or color map)
  48. -->
  49. <texture name="colorMap" filename="data/supernova.bmp" pixel_format="RGB" />
  51. <!--
  52. The displacement map.
  53. Note the RGBA_32F pixel format and the filtering mode (NONE==nearest).
  54. This is mandatory for vertex texture fetching on today's hardware.
  55. -->
  56. <texture name="displacementMap"
  57. 		 filename="data/supernova.bmp"
  58. 		 pixel_format="RGBA_32F" filtering_mode="NONE"
  59. 		 num_mipmaps="0" />
  61. <!--
  62. The mesh plane's material. We have to create it in order to attach the displacement shader.
  63. -->
  64. <material name="plane_mat" shader_program_name="displacementShader" />
  66. <!--
  67. The mesh plane: 200*200*2 = 80000 polys.
  68. In order to get decent frame rate, do not forget to set the VBO state...
  69. -->
  70. <mesh render="TRUE" name="mesh_plane" shape_type="PLANE" texturing="TRUE" lighting="FALSE"
  71.       polygon_mode="SOLID" use_vbo="TRUE" back_face_culling="FALSE" >
  73. 	<plane	x_size="400.0" z_size="400.0" num_segs_x="200" num_segs_z="200" />
  75. 	<position x="0.0" y="0.0" z="0.0" />
  76. 	<orientation pitch="0.0"  />
  77. 	<attach_material name="plane_mat" /> 
  79. 	<!--
  80. 	The displacement map on texture unit 0.
  81. 	-->
  82. 	<texture texture_name="displacementMap"
  83. 	         material_name="plane_mat"
  84. 	         texture_unit="0"
  85. 	         u_tile="1.0" v_tile="1.0" />
  87. 	<!--
  88. 	The color map on texture unit 1.
  89. 	-->
  90. 	<texture texture_name="colorMap"
  91. 	         material_name="plane_mat"
  92. 	         texture_unit="1"
  93. 	         u_tile="1.0" v_tile="1.0" />
  94. </mesh>
  96. <!--
  97. The displacement shader.
  98. -->
  99. <shader_program name="displacementShader"  >
  100. 	<constant_1i name="displacementMap" value="0" />
  101. 	<constant_1i name="colorMap" value="1" />
  103. 	<raw_data><![CDATA[
  104. 	[Vertex_Shader]
  106. 	uniform float time;
  107. 	uniform sampler2D displacementMap;
  109. 	#define textureSize 256.0
  110. 	#define texelSize 1.0 / 256.0
  112. 	vec4 tex2D_bilinear( uniform sampler2D tex, vec2 t )
  113. 	{
  114. 		vec2 f = fract( t.xy * textureSize );
  115. 		vec4 t00 = texture2D( tex, t );
  116. 		vec4 t10 = texture2D( tex, t + vec2( texelSize, 0.0 ));
  117. 		vec4 tA = mix( t00, t10, f.x );
  118. 		vec4 t01 = texture2D( tex, t + vec2( 0.0, texelSize ) );
  119. 		vec4 t11 = texture2D( tex, t + vec2( texelSize, texelSize ) );
  120. 		vec4 tB = mix( t01, t11, f.x );
  121. 		return mix( tA, tB, f.y );
  122. 	}	
  124. 	void main(void)
  125. 	{
  126. 		vec4 newVertexPos;
  127. 		vec4 dv;
  128. 		float df;
  130. 		gl_TexCoord[0].xy = gl_MultiTexCoord0.xy;
  132. 		dv = tex2D_bilinear( displacementMap, gl_MultiTexCoord0.xy );
  133. 		//dv = texture2D( displacementMap, gl_MultiTexCoord0.xy );
  135. 		df = 0.30*dv.x + 0.59*dv.y + 0.11*dv.z;
  137. 		newVertexPos = vec4(gl_Normal * df * 100.0, 0.0) + gl_Vertex;
  139. 		gl_Position = gl_ModelViewProjectionMatrix * newVertexPos;
  140. 	}
  142. 	[Pixel_Shader]
  144. 	uniform sampler2D colorMap;
  146. 	void main(void)
  147. 	{
  148. 	   gl_FragColor = texture2D(colorMap, gl_TexCoord[0].xy);
  149. 	}
  150.    	]]></raw_data>
  152. </shader_program> 
  154. <!--
  155. A little bit of interactivity: swap the mesh plane polygon rendering mode.
  156. -->
  157. <script name="switch_polygon_mode" run_mode="ASYNCHRONOUS" >
  158. 	<raw_data><![CDATA[	 
  160. 	if( g_mode==NIL ) then
  161. 		g_mode=0;
  162. 	end
  164. 	WIREFRAME = 1;
  165. 	SOLID = 2;
  167. 	if( g_mode==1 ) then
  168. 		HYP_Object.SetPolygonMode( "mesh_plane", SOLID );
  169. 		g_mode=0;
  170. 	else
  171. 		HYP_Object.SetPolygonMode( "mesh_plane", WIREFRAME );
  172. 		g_mode=1;
  173. 	end
  175.    	]]></raw_data>
  176. </script> 
  178. <hotkey	name="space_key" script="switch_polygon_mode" key="KEY_SPACE" />
  180. <!--
  181. The white rectangle under the supernova hud.
  182. -->
  183. <hud name="under_nova" texturing="FALSE" >
  184. 	<size width="220" height="220" />
  185. 	<position x="380" y="250" />
  186. </hud>
  188. <!--
  189. The hud that displays the small supernova image.
  190. -->
  191. <hud name="nova" >
  192. 	<texture texture_name="colorMap" texture_unit="0" />
  193. 	<size width="200" height="200" />
  194. 	<position x="380" y="250" />
  195. </hud>
  197. <!--
  198. Display some information / commands
  199. -->
  200. <font name="myFontArial12" render="TRUE" ttf_name="Arial" size="14" >
  201. 	<text_2d>
  202. 		<color r="1.0" g="1.0" b="0.0" />
  203. 		<position x="10" y="30" />
  204. 		<text text="Vertex Displacement Mapping Demo" />
  205. 	</text_2d>
  207. 	<text_2d>
  208. 		<color r="1.0" g="1.0" b="0.0" />
  209. 		<position x="10" y="50" />
  210. 		<text text="Controls:" />
  211. 	</text_2d>
  213. 	<text_2d>
  214. 		<color r="1.0" g="1.0" b="0.0" />
  215. 		<position x="20" y="70" />
  216. 		<text text="> SPACE: switch polygon mode (WIREFRAME/SOLID)" />
  217. 	</text_2d>
  218. </font>
  220. </hyperion>

位移贴图+凹凸贴图

  1. <?xml version="1.0" encoding="Windows-1252" standalone="yes"?>
  2. <!--
  3. ==============================================================================
  4. AUTHOR:		JeGX - jegx@ozone3d.net
  5. DATE:		10.03.2006
  6. PURPOSE:	Vertex Displacement Mapping Demo.
  7. TUTORIAL:	http://www.ozone3d.net/tutorials/vertex_displacement_mapping.php
  9. ====================================
  10.  \==:: http://www.oZone3D.Net ::==/
  11.   ===============================
  12. ==============================================================================
  13. -->
  15. <hyperion version_major="1" version_minor="2" >
  17. <!--
  18. The Scene!
  19. -->
  20. <scene name="displacement_mapping_demo"
  21.        display_fps="TRUE"
  22.        show_ref_grid="TRUE"
  23.        vsync="TRUE" >
  25. 	<infos_color r="1.0" g="1.0" b="1.0" />
  26. 	<window_size width="1024" height="768" />
  27. 	<background_color r="0.3" g="0.0" b="0.0" />
  29. 	<!--
  30. 	Check the GLSL support and the number of vertex shader texture units we need in this demo.
  31. 	-->
  32. 	<check_hardware_caps glsl="TRUE" vs_tex_samplers="1"
  33. 	                     error_message="Sorry, this demo requires a Shader Model 3.0 (for vertex texture fetching) complient graphics controller. Demo startup failed. Bye..." />
  35. </scene>
  37. <!--
  38. Setup an EXAMINE camera.
  39. -->
  40. <camera name="myCamera" fov="60.0" navigation_mode="EXAMINE"  >
  41. 	<position x="-143.41" y="218.55" z="241.49" />
  42. 	<orientation pitch="30.0" yaw="120.0" />
  43. </camera>
  45. <light name="myLight" render="TRUE" type="OMNI" >
  46. 	<position x="10.0" y="100.0" z="45.0" />
  47. 	<ambient r="0.4" g="0.4" b="0.4" />
  48. 	<diffuse r="0.9" g="0.9" b="0.9" />
  49. 	<specular r="0.9" g="0.9" b="0.9" />
  50. </light>
  52. <!--
  53. The base map (or color map)
  54. -->
  55. <texture name="colorMap" filename="data/wall002_512x512.jpg" />
  57. <!--
  58. The displacement map.
  59. Note the RGBA_32F pixel format and the filtering mode (NONE==nearest).
  60. This is mandatory for vertex texture fetching on today's hardware.
  61. -->
  62. <texture name="displacementMap"
  63. 		 filename="data/wall002_hmap2_512x512.jpg"
  64. 		 pixel_format="RGBA_32F" filtering_mode="NONE"
  65. 		 num_mipmaps="0" />
  67. <!--
  68. The normal map (or bump map)
  69. -->
  70. <texture name="normalMap"
  71. 		 filename="data/wall002_nmap2_512x512.jpg"  />
  73. <!--
  74. The mesh plane's material. We have to create it in order to attach the displacement shader.
  75. -->
  76. <material name="plane_mat" shader_program_name="displaceBumpMappingShader" >
  77. 	<ambient r="0.6" g="0.6" b="0.6" />
  78. 	<diffuse r="0.9" g="0.9" b="0.9" />
  79. 	<specular r="0.6" g="0.6" b="0.6" />
  80. </material>
  82. <!--
  83. The mesh plane: 200*200*2 = 80000 polys.
  84. In order to get decent frame rate, do not forget to set the VBO state...
  85. -->
  86. <mesh render="TRUE" name="mesh_plane" shape_type="PLANE" texturing="TRUE" lighting="FALSE"
  87.       polygon_mode="SOLID" use_vbo="TRUE" back_face_culling="TRUE" >
  89. 	<plane	x_size="400.0" z_size="400.0" num_segs_x="200" num_segs_z="200" />
  91. 	<position x="0.0" y="10.0" z="0.0" />
  92. 	<orientation pitch="0.0"  />
  93. 	<attach_material name="plane_mat" /> 
  95. 	<!--
  96. 	The displacement map on texture unit 0.
  97. 	-->
  98. 	<texture texture_name="displacementMap"
  99. 	         material_name="plane_mat"
  100. 	         texture_unit="0"
  101. 	         u_tile="1.0" v_tile="1.0" />
  103. 	<!--
  104. 	The normal map on texture unit 1.
  105. 	-->
  106. 	<texture texture_name="normalMap"
  107. 	         material_name="plane_mat"
  108. 	         texture_unit="1"
  109. 	         u_tile="1.0" v_tile="1.0" />
  111. 	<!--
  112. 	The color map on texture unit 2.
  113. 	-->
  114. 	<texture texture_name="colorMap"
  115. 	         material_name="plane_mat"
  116. 	         texture_unit="2"
  117. 	         u_tile="1.0" v_tile="1.0" />
  118. </mesh>
  120. <!--
  121. The displacement shader.
  122. -->
  123. <shader_program name="displaceBumpMappingShader"  >
  124. 	<constant_1i name="displacementMap" value="0" />
  125. 	<constant_1i name="normalMap" value="1" />
  126. 	<constant_1i name="colorMap" value="2" />
  127. 	<vertex_attrib name="tangent" value="1" />
  128. 	<constant_1f name="invRadius" value="0.001" />
  130. 	<raw_data><![CDATA[
  131. 	[Vertex_Shader]
  133. 	varying vec3 lightVec;
  134. 	varying vec3 eyeVec;
  135. 	varying vec2 texCoord;
  136. 	attribute vec3 tangent; 
  138. 	uniform sampler2D displacementMap;
  140. 	#define textureSize 1024.0
  141. 	#define texelSize 1.0 / 1024.0
  143. 	vec4 tex2D_bilinear( uniform sampler2D tex, vec2 t )
  144. 	{
  145. 		vec2 f = fract( t.xy * textureSize );
  146. 		vec4 t00 = texture2D( tex, t );
  147. 		vec4 t10 = texture2D( tex, t + vec2( texelSize, 0.0 ));
  148. 		vec4 tA = mix( t00, t10, f.x );
  149. 		vec4 t01 = texture2D( tex, t + vec2( 0.0, texelSize ) );
  150. 		vec4 t11 = texture2D( tex, t + vec2( texelSize, texelSize ) );
  151. 		vec4 tB = mix( t01, t11, f.x );
  152. 		return mix( tA, tB, f.y );
  153. 	}	
  155. 	void main(void)
  156. 	{
  157. 		vec4 displacedVertexPos;
  158. 		vec4 displacementVec;
  159. 		float f;
  161. 		texCoord = gl_MultiTexCoord0.xy;
  163. 		displacementVec = tex2D_bilinear(displacementMap, gl_MultiTexCoord0.xy );
  164. 		//f = (0.30*displacementVec.x + 0.59*displacementVec.y + 0.11*displacementVec.z);
  165. 		f = displacementVec.x;
  167. 		displacedVertexPos = vec4(gl_Normal * f * 10.0, 0.0) + gl_Vertex;
  169. 		gl_Position = gl_ModelViewProjectionMatrix * displacedVertexPos;
  171. 		vec3 n = normalize(gl_NormalMatrix * gl_Normal);
  172. 		vec3 t = normalize(gl_NormalMatrix * tangent);
  173. 		vec3 b = cross(n, t);
  175. 	   	vec3 vVertex = vec3(gl_ModelViewMatrix * displacedVertexPos);
  176. 		vec3 tmpVec = gl_LightSource[0].position.xyz - vVertex;
  178. 		lightVec.x = dot(tmpVec, t);
  179. 		lightVec.y = dot(tmpVec, b);
  180. 		lightVec.z = dot(tmpVec, n);
  182. 		tmpVec = -vVertex;
  183. 		eyeVec.x = dot(tmpVec, t);
  184. 		eyeVec.y = dot(tmpVec, b);
  185. 		eyeVec.z = dot(tmpVec, n);
  186. 	}
  188. 	[Pixel_Shader]
  190. 	varying vec3 lightVec;
  191. 	varying vec3 eyeVec;
  192. 	varying vec2 texCoord;
  193. 	uniform sampler2D colorMap;
  194. 	uniform sampler2D normalMap;
  195. 	uniform float invRadius;
  197. 	void main (void)
  198. 	{
  199. 		float distSqr = dot(lightVec, lightVec);
  200. 		float att = clamp(1.0 - invRadius * sqrt(distSqr), 0.0, 1.0);
  201. 		vec3 lVec = lightVec * inversesqrt(distSqr);
  203. 		vec3 vVec = normalize(eyeVec);
  205. 		vec4 base = texture2D(colorMap, texCoord);
  206. 		vec3 bump = normalize(texture2D(normalMap, texCoord).xyz * 2.0 - 1.0);
  208. 		vec4 vAmbient = gl_LightSource[0].ambient * gl_FrontMaterial.ambient;
  210. 		vec4 final_color = vAmbient*base;
  212. 		float diffuse = dot(lVec, bump);
  213. 		if(diffuse>0.0)
  214. 		{
  215. 			vec4 vDiffuse = gl_LightSource[0].diffuse * gl_FrontMaterial.diffuse * diffuse;	
  217. 			float specular = pow(clamp(dot(reflect(-lVec, bump), vVec), 0.0, 1.0), gl_FrontMaterial.shininess );
  218. 			//float specular = 0.0;
  219. 			vec4 vSpecular = gl_LightSource[0].specular * gl_FrontMaterial.specular *specular;	
  221. 			final_color += (vDiffuse*base + vSpecular) * att;
  222. 		}
  224. 		gl_FragColor = final_color;
  225. 	}
  226.    	]]></raw_data>
  228. </shader_program> 
  230. <!--
  231. A little bit of interactivity: swap the mesh plane polygon rendering mode.
  232. -->
  233. <script name="switch_polygon_mode" run_mode="ASYNCHRONOUS" >
  234. 	<raw_data><![CDATA[	 
  236. 	if( g_mode==NIL ) then
  237. 		g_mode=0;
  238. 	end
  240. 	WIREFRAME = 1;
  241. 	SOLID = 2;
  243. 	if( g_mode==1 ) then
  244. 		HYP_Object.SetPolygonMode( "mesh_plane", SOLID );
  245. 		g_mode=0;
  246. 	else
  247. 		HYP_Object.SetPolygonMode( "mesh_plane", WIREFRAME );
  248. 		g_mode=1;
  249. 	end
  251.    	]]></raw_data>
  252. </script> 
  254. <hotkey	name="space_key" script="switch_polygon_mode" key="KEY_SPACE" />
  256. <!--
  257. Display some information / commands
  258. -->
  259. <font name="myFontArial12" render="TRUE" ttf_name="Arial" size="14" >
  260. 	<text_2d>
  261. 		<color r="1.0" g="1.0" b="0.0" />
  262. 		<position x="10" y="30" />
  263. 		<text text="Vertex Displacement Mapping Demo" />
  264. 	</text_2d>
  266. 	<text_2d>
  267. 		<color r="1.0" g="1.0" b="0.0" />
  268. 		<position x="10" y="50" />
  269. 		<text text="Controls:" />
  270. 	</text_2d>
  272. 	<text_2d>
  273. 		<color r="1.0" g="1.0" b="0.0" />
  274. 		<position x="20" y="70" />
  275. 		<text text="> SPACE: switch polygon mode (WIREFRAME/SOLID)" />
  276. 	</text_2d>
  277. </font>
  279. </hyperion>

位移贴图视频

  • 译者注: 这个功能可能只能在教程提供的 3D 演示平台上使用.
  1. <?xml version="1.0" encoding="Windows-1252" standalone="yes"?>
  2. <!--
  3. ==============================================================================
  4. AUTHOR:		JeGX - jegx@ozone3d.net
  5. DATE:		10.03.2006
  6. PURPOSE:	Vertex Displacement Mapping Demo.
  7. TUTORIAL:	http://www.ozone3d.net/tutorials/vertex_displacement_mapping.php
  9. ====================================
  10.  \==:: http://www.oZone3D.Net ::==/
  11.   ===============================
  12. ==============================================================================
  13. -->
  15. <hyperion version_major="1" version_minor="2" >
  17. <!--
  18. The Scene!
  19. -->
  20. <scene name="displacement_mapping_demo"
  21.        display_fps="TRUE"
  22.        show_ref_grid="TRUE"
  23.        vsync="TRUE" >
  25. 	<infos_color r="1.0" g="1.0" b="1.0" />
  26. 	<window_size width="1024" height="768" />
  27. 	<background_color r="0.3" g="0.0" b="0.0" />
  28. 	<background_image image="data/stars.gif" />
  30. 	<!--
  31. 	Check the GLSL support and the number of vertex shader texture units we need in this demo.
  32. 	-->
  33. 	<check_hardware_caps glsl="TRUE" vs_tex_samplers="1"
  34. 	                     error_message="Sorry, this demo requires a Shader Model 3.0 (for vertex texture fetching) complient graphics controller. Demo startup failed. Bye..." />
  36. </scene>
  38. <!--
  39. Setup an EXAMINE camera.
  40. -->
  41. <camera name="myCamera" fov="60.0" navigation_mode="EXAMINE"  >
  42. 	<position x="-143.41" y="218.55" z="241.49" />
  43. 	<orientation pitch="30.0" yaw="120.0" />
  44. </camera>
  46. <!--
  47. The base map (or color map)
  48. -->
  49. <texture name="colorMap" filename="data/throbber.avi" pixel_format="RGB" >
  50. 	<size width="256" height="256" />
  51. </texture>          
  53. <!--
  54. The displacement map.
  55. Note the RGBA_32F pixel format and the filtering mode (NONE==nearest).
  56. This is mandatory for vertex texture fetching on today's hardware.
  57. -->
  58. <texture name="displacementMap" type="TEXTURE_2D"
  59. 		 filename="data/throbber.avi"
  60. 		 pixel_format="RGBA_32F" filtering_mode="NONE" addressing_mode="CLAMP"
  61. 		 num_mipmaps="0" >
  62. 	<size width="256" height="256" />
  63. </texture>          
  65. <!--
  66. The mesh plane's material. We have to create it in order to attach the displacement shader.
  67. -->
  68. <material name="plane_mat" shader_program_name="displacementShader" />
  70. <!--
  71. The mesh plane: 100*100*2 = 20000 polys.
  72. In order to get decent frame rate, do not forget to set the VBO state...
  73. -->
  74. <mesh render="TRUE" name="mesh_plane" shape_type="PLANE" texturing="TRUE" lighting="FALSE"
  75.       polygon_mode="SOLID" use_vbo="TRUE" back_face_culling="FALSE" >
  77. 	<plane	x_size="400.0" z_size="400.0" num_segs_x="100" num_segs_z="100" />
  79. 	<position x="0.0" y="0.0" z="0.0" />
  80. 	<orientation pitch="0.0"  />
  81. 	<attach_material name="plane_mat" /> 
  83. 	<!--
  84. 	The displacement map on texture unit 0.
  85. 	-->
  86. 	<texture texture_name="displacementMap"
  87. 	         material_name="plane_mat"
  88. 	         texture_unit="0"
  89. 	         u_tile="1.0" v_tile="1.0" />
  91. 	<!--
  92. 	The color map on texture unit 1.
  93. 	-->
  94. 	<texture texture_name="colorMap"
  95. 	         material_name="plane_mat"
  96. 	         texture_unit="1"
  97. 	         u_tile="1.0" v_tile="1.0" />
  98. </mesh>
  100. <!--
  101. The displacement shader.
  102. -->
  103. <shader_program name="displacementShader"  >
  104. 	<constant_1i name="displacementMap" value="0" />
  105. 	<constant_1i name="colorMap" value="1" />
  106. 	<constant_1f name="time" value="0.0" />
  108. 	<raw_data><![CDATA[
  109. 	[Vertex_Shader]
  111. 	uniform sampler2D displacementMap;
  113. 	#define textureSize 256.0
  114. 	#define texelSize 1.0 / 256.0
  116. 	vec4 tex2D_bilinear( uniform sampler2D tex, vec2 t )
  117. 	{
  118. 		vec2 f = fract( t.xy * textureSize );
  119. 		vec4 t00 = texture2D( tex, t );
  120. 		vec4 t10 = texture2D( tex, t + vec2( texelSize, 0.0 ));
  121. 		vec4 tA = mix( t00, t10, f.x );
  122. 		vec4 t01 = texture2D( tex, t + vec2( 0.0, texelSize ) );
  123. 		vec4 t11 = texture2D( tex, t + vec2( texelSize, texelSize ) );
  124. 		vec4 tB = mix( t01, t11, f.x );
  125. 		return mix( tA, tB, f.y );
  126. 	}	
  128. 	void main(void)
  129. 	{
  130. 		vec4 displacedVertexPos;
  131. 		vec4 displacementVec;
  132. 		float f;
  134. 		gl_TexCoord[0].xy = gl_MultiTexCoord0.xy;
  136. 		//displacementVec = texture2D(displacementMap, gl_MultiTexCoord1.xy);
  137. 		displacementVec = tex2D_bilinear(displacementMap, gl_MultiTexCoord1.xy);
  138. 		f = (0.30*displacementVec.x + 0.59*displacementVec.y + 0.11*displacementVec.z);
  140. 		displacedVertexPos = vec4(gl_Normal * f * 100.0, 0.0) + gl_Vertex;
  142. 		gl_Position = gl_ModelViewProjectionMatrix * displacedVertexPos;
  143. 	}
  145. 	[Pixel_Shader]
  147. 	uniform sampler2D colorMap;
  149. 	void main(void)
  150. 	{
  151. 	   gl_FragColor = texture2D(colorMap, gl_TexCoord[0].xy);
  152. 	}
  153.    	]]></raw_data>
  155. </shader_program> 
  157. <!--
  158. Update time uniform variable for the displacement shader.
  159. -->
  160. <script name="update_scene" run_mode="EXECUTE_EACH_FRAME" >
  161. 	<raw_data><![CDATA[	 
  163. 	elapsed_time = HYP_GetElapsedTime() * 0.001;
  164. 	HYP_GPUShader.SetConstant_1f( "displacementShader", "time", elapsed_time );
  166.    	]]></raw_data>
  167. </script> 
  169. <!--
  170. A little bit of interactivity: swap the mesh plane polygon rendering mode.
  171. -->
  172. <script name="switch_polygon_mode" run_mode="ASYNCHRONOUS" >
  173. 	<raw_data><![CDATA[	 
  175. 	if( g_mode==NIL ) then
  176. 		g_mode=0;
  177. 	end
  179. 	WIREFRAME = 1;
  180. 	SOLID = 2;
  182. 	if( g_mode==1 ) then
  183. 		HYP_Object.SetPolygonMode( "mesh_plane", SOLID );
  184. 		g_mode=0;
  185. 	else
  186. 		HYP_Object.SetPolygonMode( "mesh_plane", WIREFRAME );
  187. 		g_mode=1;
  188. 	end
  190.    	]]></raw_data>
  191. </script> 
  193. <hotkey	name="space_key" script="switch_polygon_mode" key="KEY_SPACE" />
  195. <!--
  196. The white rectangle under the hud.
  197. -->
  198. <hud name="under_nova" texturing="FALSE" >
  199. 	<size width="220" height="220" />
  200. 	<position x="380" y="250" />
  201. </hud>
  203. <!--
  204. The hud that displays the small image.
  205. -->
  206. <hud name="nova" >
  207. 	<texture texture_name="colorMap" texture_unit="0" />
  208. 	<size width="200" height="200" />
  209. 	<position x="380" y="250" />
  210. </hud>
  212. <!--
  213. Display some information / commands
  214. -->
  215. <font name="myFontArial12" render="TRUE" ttf_name="Arial" size="14" >
  216. 	<text_2d>
  217. 		<color r="1.0" g="1.0" b="0.0" />
  218. 		<position x="10" y="30" />
  219. 		<text text="Vertex Displacement Mapping Demo" />
  220. 	</text_2d>
  222. 	<text_2d>
  223. 		<color r="1.0" g="1.0" b="0.0" />
  224. 		<position x="10" y="50" />
  225. 		<text text="Controls:" />
  226. 	</text_2d>
  228. 	<text_2d>
  229. 		<color r="1.0" g="1.0" b="0.0" />
  230. 		<position x="20" y="70" />
  231. 		<text text="> SPACE: switch polygon mode (WIREFRAME/SOLID)" />
  232. 	</text_2d>
  233. </font>
  235. </hyperion>

翻译:GLSL的顶点位移贴图的更多相关文章

  1. [翻译]利用顶点位移的VR畸变校正

    文章英文原网址: http://www.gamasutra.com/blogs/BrianKehrer/20160125/264161/VR_Distortion_Correction_using_V ...

  2. 【ZZ】 DShader之位移贴图(Displacement Mapping)

    http://www.myexception.cn/other/1397638.html DShader之位移贴图(Displacement Mapping) www.MyException.Cn   ...

  3. DirectX11 With Windows SDK--34 位移贴图

    前言 在前面的章节中,我们学到了法线贴图和曲面细分.现在我们可以将这两者进行结合以改善效果,因为法线贴图仅仅只是改善了光照的细节,但它并没有从根本上改善几何体的细节.从某种意义上来说,法线贴图只是一个 ...

  4. 利用顶点位移进行VR畸变校正

    VR开发的最大挑战之一是对高帧率与高分辨率结合的要求.我们通过把顶点转化为“镜头空间”,删除了需要全屏渲染的纹理,这样就可以大规模提高手机性能. 下面的技术使用谷歌的Cardboard Unity S ...

  5. GLSL逐顶点光照[转]

    转载:http://blog.csdn.net/hgl868/article/details/7872350 引言 在OpenGL中有三种类型的光:方向光(directional).点光(point) ...

  6. firefox浏览器 插件--【维基百科+谷歌翻译】高级应用之 带图翻译

    [维基词典+谷歌翻译]插件地址: https://addons.mozilla.org/zh-CN/firefox/addon/google-dictionary-and-google-t/?src= ...

  7. java数据结构_附12_图、顶点和边的定义(双链存储)

    图--双链式存储结构 顶点 和 边 的定义 1.Vertex.java 2.Edge.java 3.AbstractGraph.java 1. public class Vertex {private ...

  8. 在 OpenGL ES 2.0 上实现视差贴图(Parallax Mapping)

    在 OpenGL ES 2.0 上实现视差贴图(Parallax Mapping) 视差贴图 最近一直在研究如何在我的 iPad 2(只支持 OpenGL ES 2.0, 不支持 3.0) 上实现 视 ...

  9. 翻译:探索GLSL-用几何着色器(着色器库)实现法线可视化

    翻译:探索GLSL-用几何着色器(着色器库)实现法线可视化 翻译自: Exploring GLSL – Normal Visualizer with Geometry Shaders (Shader ...

随机推荐

  1. 【Coursera】主成分分析

    一.问题 主方向的概念是什么?为什么降低维度的方法是使方差最大化? 假设某两个特征之间成线性关系,在二维平面上的表示就是数据点呈线性分布,那么可以通过将数据在主方向上进行投影,得到一个一维的数据,这个 ...

  2. 【Coursera】高斯混合模型

    一.高斯混合模型 软分类算法,即对每一个样本,计算其属于各个分布的概率,概率值最大的就是这个样本所属的分类. 对于训练样本的分布,看成为多个高斯分布加权得到的.其中每个高斯分布即为某一特定的类. 高斯 ...

  3. 电梯调度系统（界面由C图形库编绘）

    电梯调度系统编程 1.编程题目 电梯调度. 2.结对编程组员 黄冠译,刘畅. 3.编程语言 C语言图形库. 4.题目要求: 5.代码运行及结果调试: ① 运行界面为C++图形库支持,开始运行的初始界面 ...

  4. css border 制作三角形

    border 边框 上三角 是只有上面的border 有颜色,其余的边框都是tranparents,下三角只有下面的border 有颜色,其余的边框都是tranparents,左三角只有左面的bord ...

  5. 软工网络15团队作业8——Beta阶段敏捷冲刺（Day6）

    提供当天站立式会议照片一张 每个人的工作 1.讨论项目每个成员的昨天进展 赵铭: 数据库整理. 吴慧婷:我的世界界面完成部分. 陈敏: 我的世界功能--学习情况功能完成. 吴雅娟:我的世界功能--学习 ...

  6. 关于vue项目管理项目的架构管理平台

    关于vue项目管理项目的架构管理平台 https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/faq 31.4k 次浏览 完整项目地址: ...

  7. CGOS 8 备用交换机(割点)

    题目链接:http://cojs.tk/cogs/problem/problem.php?pid=8 题意:n个城市之间有通讯网络,每个城市都有通讯交换机,直接或间接与其它城市连接.因电子设备容易损坏 ...

  8. Webpack简易入门教程

    <!-- 其实网上关于webpack的教程已经很多了,但是本人在学习过程中发现很多教程有错误,或者写的很不全面,结果做的过程出现各种各样的问题,对新手不但不友好还会让人浪费很多不必要的时间.所以 ...

  9. Make a Crystal UVA - 11014 （容斥定理）

    题意:给定一个NxNxN的正方体,求出最多能选几个整数点,使得任意两点PQ不会使PQO共线. 思路:利用容斥原理,设f(k)为点(x, y, z)三点都为k的倍数的点的个数(要扣掉一个原点O),那么所 ...

  10. SpringBoot之mongoTemplate的使用

    springboot的版本1.5.17.RELEASE. 1.mongo的IP和端口 在resources下的application.properties中加入如下内容 spring.data.mon ...