2D Perlin噪点
2015-10-06 16:34
323 查看
噪点（Noise）是游戏编程中一个非常重要的内容。Noise不同于static（干扰）。Static是一组完全随机的数据点，每个点与邻近点无关。2D static贴图的例子如下左图所示。
在噪点贴图中，每个点的值是平滑变化的。所以虽然每个点的值不同，但一个点的值可能接近于邻近点的值，噪点贴图的例子如下右图所示。
其实在这个系列中，我们已经使用过多次噪点贴图了。天空球纹理就是一个很好的例子，放置树林的贴图也是一张噪点贴图。但噪点贴图用处还有很多，例如，如何生成高度图，其实高度图就是一张平滑的噪点贴图。噪点贴图还可以用来定义地形的边界。
让我们看一下如何创建一个高度图，最后，我会编写一个HLSL effect用来生成Perlin Noise。首先使用多张static贴图，因为static贴图只包含随机值，所以很容易生成。这些static 贴图的分辨率是相同的，但是，每张纹理的细节层次依次为前者的2倍：
现在将这些图像组合在一起，你会获得以下图像：
很简单，不是吗？希望你也这样认为。这里有一个难点：高分辨率图像只基于5x5的值，但是图像的所有像素是这些值的线性插值。但是这完全没有问题，因为显卡会自动进行纹理的线性插值！而且，我们使用相同的贴图六次（但纹理坐标的缩放不同），而不是使用六张不同的贴图。
所以在XNA代码中，首先编写一个小方法生成一个低分辨率的static贴图：
只需指定分辨率，这个方法就会返回一个方块纹理，这个方块纹理的所有像素的红色通道中存储了随机值。因为我们会以HLSL effect 绘制噪点贴图，所以需要覆盖整个屏幕的两个三角形，使用TrianleList绘制两个三角形需要6个顶点，或者使用TriangleStrip需要4个顶点(可参见系列3)：
我们需要一个独立的渲染目标，所以在代码顶部添加以下变量：
我们使用cloudStaticMap保存基本的static贴图。在LoadContent方法中初始化渲染目标：
在LoadTextures 方法中生成static贴图：
这会生成一张32x32的static贴图。如果你想要一个更小的云，需要指定更大的数字，如64。
最后，在LoadVertices方法中加载覆盖全屏的顶点和对应的VertexDeclaration：
初始化结束后，就可以开始编写HLSL代码了。Effect中没有什么特别的东西，顶点着色器只是简单地将纹理坐标传递到像素着色器。所以将以下代码添加到Series4Effects.fx文件的最后：
顶点着色器是最简单的，因为我们已经指定了顶点在屏幕空间中的坐标，只需将它直接传递到输出结构中即可：
像素着色器还有点趣：
这对应上面的六张图像：你获取static图像，以不同的分辨率对它进行六次采样！因为你想让perlin值位于0和1之间，所以需要对结果进行缩放。第一行代码是最低的分辨率，影响最大：为最终结果的50%，接下来一行代码为25%，然后是12.5%直至最高分辨率。确保将所有影响相加正好为100%。
如果此时运行代码并获取输出，我们已经可以获得一个漂亮的噪点贴图了！但我们可以做得更好。假设你将这个噪点贴图作为天空的纹理，要使它移动，你只需将它沿着天空球移动就可以了。这很好，但如果从外部观察，云不仅会移动，还会改变形状，这不是你想要的结果！
这可以在像素着色器中进行编程，技巧是将不同分辨率的图像以不同的速度移动。以下是实现代码：
根据当前时间，图像会以不同的速度滚动！对应新的xTime值会有一个新的切换效果。
显然，像素着色器缺少一个输出，所以添加以下代码：
因为perlin值在0和1之间，你可以将它进行大于1的幂计算锐化图像。xOvercast值越大，云的大小和锐化越小，但是因为你要用1减去这个值，所以结果相反：xOvercast的值越大，云越多。别忘了在代码顶部添加这个xOvercast变量：
还有technique定义：
以上就是HLSL代码!
让我们看一下XNA文件，这里我们还需要编写一个简单的方法运行这个effect：
你激活了自定义的渲染目标并用黑色清除它。然后，选择PerlinNoise technique并传入基本static贴图和xOvercast、xTime的值，然后会在两个覆盖整个渲染目标的2个三角形，将渲染目标的内容存储在cloudMap纹理中，这样就做好了进入下一章的准备！别忘了Draw方法中调用这个方法：
如果将cloudMap纹理保存到文件，可看到以下图像：
本章讨论了噪点贴图的生成，它有点长，但我想这是很重要的一章，而且在我的书中并没有提到这个内容。下一章也是本系列的最后一章会使用这张噪点贴图作为天空球的纹理。
译者注：还可以参考4.4 模拟水的方法，GPU上的柏林噪声。
下面是XNA代码，红色代码为相对于上一章改变的部分：
Series4Effect.fx文件：
发布时间：2009-12-29 10:06:16 阅读次数：4435
在噪点贴图中，每个点的值是平滑变化的。所以虽然每个点的值不同，但一个点的值可能接近于邻近点的值，噪点贴图的例子如下右图所示。
其实在这个系列中，我们已经使用过多次噪点贴图了。天空球纹理就是一个很好的例子，放置树林的贴图也是一张噪点贴图。但噪点贴图用处还有很多，例如，如何生成高度图，其实高度图就是一张平滑的噪点贴图。噪点贴图还可以用来定义地形的边界。
让我们看一下如何创建一个高度图，最后，我会编写一个HLSL effect用来生成Perlin Noise。首先使用多张static贴图，因为static贴图只包含随机值，所以很容易生成。这些static 贴图的分辨率是相同的，但是，每张纹理的细节层次依次为前者的2倍：
现在将这些图像组合在一起，你会获得以下图像：
很简单，不是吗？希望你也这样认为。这里有一个难点：高分辨率图像只基于5x5的值，但是图像的所有像素是这些值的线性插值。但是这完全没有问题，因为显卡会自动进行纹理的线性插值！而且，我们使用相同的贴图六次（但纹理坐标的缩放不同），而不是使用六张不同的贴图。
所以在XNA代码中，首先编写一个小方法生成一个低分辨率的static贴图：
private Texture2D CreateStaticMap(int resolution)
{
Random rand = new Random();
Color[] noisyColors = new Color[resolution * resolution];
for (int x = 0; x < resolution; x++)
for (int y = 0; y < resolution; y++)
noisyColors[x + y * resolution] = new Color(new Vector3((float)rand.Next(1000) / 1000.0f, 0, 0));
Texture2D noiseImage = new Texture2D(device, resolution, resolution, 1, TextureUsage.None, SurfaceFormat.Color);
noiseImage.SetData(noisyColors);
return noiseImage;
}只需指定分辨率，这个方法就会返回一个方块纹理，这个方块纹理的所有像素的红色通道中存储了随机值。因为我们会以HLSL effect 绘制噪点贴图，所以需要覆盖整个屏幕的两个三角形，使用TrianleList绘制两个三角形需要6个顶点，或者使用TriangleStrip需要4个顶点(可参见系列3)：
private VertexPositionTexture[] SetUpFullscreenVertices()
{
VertexPositionTexture[] vertices = new VertexPositionTexture[4];
vertices[0] = new VertexPositionTexture(new Vector3(-1, 1, 0f), new Vector2(0, 1));
vertices[1] = new VertexPositionTexture(new Vector3(1, 1, 0f), new Vector2(1, 1));
vertices[2] = new VertexPositionTexture(new Vector3(-1, -1, 0f), new Vector2(0, 0));
vertices[3] = new VertexPositionTexture(new Vector3(1, -1, 0f), new Vector2(1, 0));
return vertices;
}我们需要一个独立的渲染目标，所以在代码顶部添加以下变量：
RenderTarget2D cloudsRenderTarget; Texture2D cloudStaticMap; VertexPositionTexture[] fullScreenVertices; VertexDeclaration fullScreenVertexDeclaration;
我们使用cloudStaticMap保存基本的static贴图。在LoadContent方法中初始化渲染目标：
cloudsRenderTarget = new RenderTarget2D(device, pp.BackBufferWidth, pp.BackBufferHeight, 1, device.DisplayMode.Format);
在LoadTextures 方法中生成static贴图：
cloudStaticMap = CreateStaticMap(32);
这会生成一张32x32的static贴图。如果你想要一个更小的云，需要指定更大的数字，如64。
最后，在LoadVertices方法中加载覆盖全屏的顶点和对应的VertexDeclaration：
fullScreenVertices = SetUpFullscreenVertices(); fullScreenVertexDeclaration = new VertexDeclaration(device, VertexPositionTexture.VertexElements);
初始化结束后，就可以开始编写HLSL代码了。Effect中没有什么特别的东西，顶点着色器只是简单地将纹理坐标传递到像素着色器。所以将以下代码添加到Series4Effects.fx文件的最后：
//------- Technique: PerlinNoise --------
struct PNVertexToPixel
{
float4 Position : POSITION;
float2 TextureCoords : TEXCOORD0;
};
struct PNPixelToFrame
{
float4 Color : COLOR0;
};顶点着色器是最简单的，因为我们已经指定了顶点在屏幕空间中的坐标，只需将它直接传递到输出结构中即可：
PNVertexToPixel PerlinVS(float4 inPos : POSITION, float2 inTexCoords: TEXCOORD)
{
PNVertexToPixel Output = (PNVertexToPixel)0;
Output.Position = inPos;
Output.TextureCoords = inTexCoords;
return Output;
}像素着色器还有点趣：
PNPixelToFrame PerlinPS(PNVertexToPixel PSIn)
{
PNVertexToPixel Output = (PNVertexToPixel)0;
float4 perlin = tex2D(TextureSampler, (PSIn.TextureCoords))/2;
perlin += tex2D(TextureSampler, (PSIn.TextureCoords)*2)/4;
perlin += tex2D(TextureSampler, (PSIn.TextureCoords)*4)/8;
perlin += tex2D(TextureSampler, (PSIn.TextureCoords)*8)/16;
perlin += tex2D(TextureSampler, (PSIn.TextureCoords)*16)/32;
perlin += tex2D(TextureSampler, (PSIn.TextureCoords)*32)/32;
}这对应上面的六张图像：你获取static图像，以不同的分辨率对它进行六次采样！因为你想让perlin值位于0和1之间，所以需要对结果进行缩放。第一行代码是最低的分辨率，影响最大：为最终结果的50%，接下来一行代码为25%，然后是12.5%直至最高分辨率。确保将所有影响相加正好为100%。
如果此时运行代码并获取输出，我们已经可以获得一个漂亮的噪点贴图了！但我们可以做得更好。假设你将这个噪点贴图作为天空的纹理，要使它移动，你只需将它沿着天空球移动就可以了。这很好，但如果从外部观察，云不仅会移动，还会改变形状，这不是你想要的结果！
这可以在像素着色器中进行编程，技巧是将不同分辨率的图像以不同的速度移动。以下是实现代码：
PixelToFrame PerlinPS(VertexToPixel PSIn)
{
PNVertexToPixel Output = (PNVertexToPixel)0;
float2 move = float2(0,1);
float4 perlin = tex2D(TextureSampler, (PSIn.TextureCoords)+xTime*move)/2;
perlin += tex2D(TextureSampler, (PSIn.TextureCoords)*2+xTime*move)/4;
perlin += tex2D(TextureSampler, (PSIn.TextureCoords)*4+xTime*move)/8;
perlin += tex2D(TextureSampler, (PSIn.TextureCoords)*8+xTime*move)/16;
perlin += tex2D(TextureSampler, (PSIn.TextureCoords)*16+xTime*move)/32;
perlin += tex2D(TextureSampler, (PSIn.TextureCoords)*32+xTime*move)/32;
}根据当前时间，图像会以不同的速度滚动！对应新的xTime值会有一个新的切换效果。
显然，像素着色器缺少一个输出，所以添加以下代码：
Output.Color = 1.0f-pow(perlin, xOvercast)*2.0f; return Output;
因为perlin值在0和1之间，你可以将它进行大于1的幂计算锐化图像。xOvercast值越大，云的大小和锐化越小，但是因为你要用1减去这个值，所以结果相反：xOvercast的值越大，云越多。别忘了在代码顶部添加这个xOvercast变量：
float xOvercast;
还有technique定义：
technique PerlinNoise
{
pass Pass0
{
VertexShader = compile vs_1_1 PerlinVS();
PixelShader = compile ps_2_0 PerlinPS();
}
}以上就是HLSL代码!
让我们看一下XNA文件，这里我们还需要编写一个简单的方法运行这个effect：
private void GeneratePerlinNoise(float time)
{
device.SetRenderTarget(0, cloudsRenderTarget);
device.Clear(ClearOptions.Target | ClearOptions.DepthBuffer, Color.Black, 1.0f, 0);
effect.CurrentTechnique = effect.Techniques["PerlinNoise"];
effect.Parameters["xTexture"].SetValue(cloudStaticMap);
effect.Parameters["xOvercast"].SetValue(1.1f);
effect.Parameters["xTime"].SetValue(time/1000.0f);
effect.Begin();
foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Begin();
device.VertexDeclaration = fullScreenVertexDeclaration;
device.DrawUserPrimitives(PrimitiveType.TriangleStrip, fullScreenVertices, 0, 2);
pass.End();
}
effect.End();
device.SetRenderTarget(0, null);
cloudMap = cloudsRenderTarget.GetTexture();
}你激活了自定义的渲染目标并用黑色清除它。然后，选择PerlinNoise technique并传入基本static贴图和xOvercast、xTime的值，然后会在两个覆盖整个渲染目标的2个三角形，将渲染目标的内容存储在cloudMap纹理中，这样就做好了进入下一章的准备！别忘了Draw方法中调用这个方法：
GeneratePerlinNoise(time);
如果将cloudMap纹理保存到文件，可看到以下图像：
本章讨论了噪点贴图的生成，它有点长，但我想这是很重要的一章，而且在我的书中并没有提到这个内容。下一章也是本系列的最后一章会使用这张噪点贴图作为天空球的纹理。
译者注：还可以参考4.4 模拟水的方法，GPU上的柏林噪声。
下面是XNA代码，红色代码为相对于上一章改变的部分：
using System;
{
public struct VertexMultitextured
{
};
}
Series4Effect.fx文件：
发布时间：2009-12-29 10:06:16 阅读次数：4435
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- java写入MySQL乱码或？解决
- 【IOS 开发学习总结-OC-33】★★objective-c之文件 I/O概述+NSData/NSMutableData
- java关键字 instanceOf
- 增加 删 改 查 代码
- Css3盒子模型-css学习之旅（5）
- 模拟水的方法
- 常见前端面试题及答案
- Css3盒子模型-css学习之旅（5）
- Css3盒子模型-css学习之旅（5）
- Swift中类的属性
- Css3盒子模型-css学习之旅（5）
- jquery datepicker 只显示年月
- leetcode - Move Zeroes
- Thinkphp 动态查询 getBy 与 getFieldBy
- MacOSX Cocos2d-x 配置Android Studio以及Xcode开发环境
- Java实现循环单链表……
- 斐波那契的递归函数
- C语言设计模式与接口
- POJ2502 Subway 最短路
- 安全技术目标