Directx11教程(47) alpha blend(4)-雾的实现

简介: 除了用来实现透明效果之外,我们还可以用alpha blend来实现雾(fog)的效果。通过逐渐清晰的雾气效果,可以增加场景的真实感。      雾的效果实现很简单,首先我们要一种颜色来表示雾,通常使用用灰色。

     除了用来实现透明效果之外,我们还可以用alpha blend来实现雾(fog)的效果。通过逐渐清晰的雾气效果,可以增加场景的真实感。

     雾的效果实现很简单,首先我们要一种颜色来表示雾,通常使用用灰色

     其实雾的效果和视点有很大关系,距离视点越近,雾就越淡,距离越远,雾就越浓。

     最终物体颜色是雾的颜色和计算出的pixel颜色的混合,我们使用的公式如下:

     Final Color = FogFactor * computed pixel color + (1.0 - FogFactor) * FogColor

     可以看出,最终的颜色是雾的颜色和计算的pixel颜色基于雾因子的加权平均。

下面我看看如何计算雾因子:

     首先定义一个雾范围(fogstart, fogend),在这个范围内,雾逐渐由淡变浓,超出fogend后,就完全是雾的颜色了,再假定顶点到视点的距离为ViewDistance,则雾因子的计算公式有以下几种:

1、线性因子

    Linear Fog = (FogEnd - ViewpointDistance) / (FogEnd - FogStart)

2、指数因子

   Exponential Fog = exp2(-abs(ViewpointDistance * FogDensity))

3、二次指数因子

    Exponential Fog 2 = exp2(- (ViewpointDistance * FogDensity) *(ViewpointDistance * FogDensity)) 

 

      下面我们在myTutorialD3D11_41的基础上来实现雾的效果:

首先需要修改的是lighttex.vs和lighttex.ps, 在vs中,我们定义一个常量缓冲,表示fog的参数,然后根据这几个参数来计算雾因子,并把雾因子传递到ps阶段。

lighttex.vs代码:

cbuffer FogBuffer
{
    float fogStart;
    float fogEnd;
    float fogDensity;
    float padding;
};

    // 计算摄像机的位置.
    cameraPosition = mul(input.position, worldMatrix);
    cameraPosition = mul(cameraPosition, viewMatrix);

    // 计算线性雾.   
    output.fogFactor = saturate((fogEnd - cameraPosition.z) / (fogEnd - fogStart));

lighttex.ps代码:

    // 混合雾颜色.
   finalcolor = input.fogFactor * finalcolor1 + (1.0 - input.fogFactor) * fogColor;

       另外在LightTexShaderClass中,也要做一些小改动,增加设置FogBuffer的代码,并在Render函数和 SetShaderParameters中,增加三个参数,用来设置fog。

      最后,在GraphicsClass中,定义四个参数,并把它们传入shader。

float fogColor, fogStart, fogEnd, fogDensity;

// 雾颜色.
fogColor = 0.5f;

// 雾距离.
fogStart = 20.0f;
fogEnd = 80.0f;

fogDensity = 0.04f;

首先用fogColor设置背景,这样很远的地方就是雾的颜色,…

程序执行后,界面如下:

image

下面我们在vs中尝试修改雾因子的计算方法,看看指数因子和二次指数因子的效果。

指数因子:

fogDensity = 0.04f;

// 计算指数因子.    
output.fogFactor = saturate(exp2(-abs( cameraPosition.z *fogDensity)) );

image

二次指数因子:

fogDensity = 0.02f;

// 计算指数因子.
output.fogFactor = saturate(exp2(- ( cameraPosition.z *fogDensity)*( cameraPosition.z *fogDensity)) );

image

完整的代码请参考:

工程文件myTutorialD3D11_42

代码下载:

http://files.cnblogs.com/mikewolf2002/d3d1139-49.zip

http://files.cnblogs.com/mikewolf2002/pictures.zip

相关文章
Directx11教程(46) alpha blend(3)
现在我们尝试改变box的贴图,使用一张带alpha的dds文件wirefence.dds, 用directx texture tool打开文件界面如下:       实际上,这幅图中一些像素有alpha值,一些像素alpha值为0,我们点击View-alpha channel only,可以看到下面的图,其中黑色部分的alpha值为0:      现在我们把这幅图贴到box上,程序运行效果如下: 我们在lighttex.ps中增加以下代码,需要注意clip函数的使用。
780 0
Directx11教程(45) alpha blend(2)
在myTutorialD3D11_40中,我们在场景中再添加一个box,并把box放在水里,实现半透明的效果。如下图所示:       我们要特别注意一点的就是场景中物体的渲染次序,先渲染山谷、第二个box,第三个水。
796 0
Directx11教程(44) alpha blend(1)
我们知道,D3D11中按Frame来渲染物体,每个Frame中又可能包含若干个primitive,如下面的示意图所示:      gpu在实际渲染中,会按帧来渲染,比如上图frame0中,有两个primitive(三角形),经过vs以后,PA(primitive assemble) block会进行体元装配,然后进行光栅化操作,光栅化操作时候,会比较depth buffer的值。
1159 0
Directx11教程41 纹理映射(11)
1、第一副图我们采用各性异性的滤波方式,并设置最大各性异性值为8.     samplerDesc.Filter =  D3D11_FILTER_ANISOTROPIC;     samplerDesc.MaxAnisotropy = 8;      第二副图我们用了常用的3线性差值滤波方式   samplerDesc.Filter =  D3D11_FILTER_MIN_MAG_MIP_LINEAR;         按道理说,对于远处的纹理贴图,第一副图要好些,但我看起来,似乎这两个效果差不多,第二副效果也还可以,对于远处的贴图,我并没有发现模糊的效果。
885 0
Directx11教程(33) 纹理映射(3)
现在我们在myTutorialD3D11_5的基础上,来逐步编码实现纹理映射,之所以在myTutorialD3D11_5基础上改写,是因为这个工程只是画了一个三角形,便于我们贴一个纹理上去,然后改变纹理采样状态,观察纹理贴图的变化。
807 0
|
索引
Directx11教程36 纹理映射(6)
本章主要是整理代码,做以下两件事情: 1、把世界坐标矩阵的计算,放在GraphicsClass的渲染函数中,之前放在D3DClass中,而且只是返回一个单位矩阵,没任何作用。如果要使其起作用,就要对每个model类都单独设置,很麻烦,比如我要画两个颜色立方体,岂不是要建立两个model类,而只是世界坐标矩阵不同。
807 0
|
存储 索引
Directx11教程39 纹理映射(9)
在myTutorialD3D11_32中,我们在PlaneModelClass中增加一个纹理TextureClass* m_Texture;读入一个grass的纹理,程序执行后的效果如下: 完整的代码请参考: 工程文件myTutorialD3D11_32 代码下载: http://files.
900 0
Directx11教程(32) 纹理映射(2)
在写代码之前,我们先制作一个dds文件。从网上找到了一张照片,处理成为512*512,保存为jpg格式。     启动微软的directx texture tool后,把图片拖到其内:      选择文件Format->Generate Mip Maps,可以在图像的标题栏看到Mip 1 of 10的字样,这是因为我们原始图像大小为512*512,生成MipMaps时,会产生256*256, 128*128,…, 1*1,一系列下采样的图像,加上原始图像总共10个。
824 0
|
C++ 索引
Directx11教程37 纹理映射(7)
本章是在教程35、36的基础上来实现一个光照纹理结合的程序,就是把场景中旋转的cube加上纹理。    lighttex.vs中顶点的结构现在为: struct VertexInputType {     float4 position : POSITION; ...
881 0
Directx11教程(34) 纹理映射(4)
本篇教程中,我们尝试在myTutorialD3D_27中改变采样状态描述符的各种设置,看纹理贴图的方式有什么变化。 原始的代码是:     // 创建纹理采样描述符 samplerDesc.
852 0