开发者社区> 迈克老狼1> 正文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
他把闲鱼APP长列表流畅度翻了倍(良心教程)
从“麻绳版顺滑”到“丝般顺滑”
3734 0
Directx11教程40 纹理映射(10)
本章尝试使用纹理行列式,或者说纹理数组,在ps中,使用2个纹理,最终的像素颜色,是光照颜色*纹理1采样颜色*纹理2采样颜色,主要是想达到如下的效果:    把这两个图像以及光照产生的颜色融合生成以下图像:   为此我们新建一个lighttex2.
908 0
Directx11教程(44) alpha blend(1)
我们知道,D3D11中按Frame来渲染物体,每个Frame中又可能包含若干个primitive,如下面的示意图所示:      gpu在实际渲染中,会按帧来渲染,比如上图frame0中,有两个primitive(三角形),经过vs以后,PA(primitive assemble) block会进行体元装配,然后进行光栅化操作,光栅化操作时候,会比较depth buffer的值。
997 0
SharpDX之Direct2D教程II——加载位图文件和保存位图文件
本系列文章目录: SharpDX之Direct2D教程I——简单示例和Color(颜色)   绘制位图是绘制操作的不可缺少的一部分。在Direct2D中绘制位图,必须先利用WIC组件将位图加载到内存中,再绘制到RenderTarget中去   在SharpDX中绘制位图,分成两个部分: ...
896 0
Directx11教程(51) 简单的billboard
billboard称作公告板,通常用一个quad(四边形)表示[有的billboard用两个正交的quad表示],它的特点就是始终面向摄像机的方向。在大规模场景渲染中,可以公告板上贴一个纹理,比如树,这样在比较远的场景中,可以用它表示模型数据,从而减少场景中的顶点数量。
752 0
Directx11教程(48) depth/stencil buffer的作用
在D3D11中,有depth/stencil buffer,它们和framebuffer相对应,如下图所示,framebuffer中一个像素,有相对应的depth buffer和stencil buffer值:         D3D11中,depth buffer和stencil buffer一起定义,比如DXGI_FORMAT_D24_UNORM_S8_UINT,是指用一个无符号24位的值做为像素的深度缓冲值,并把它映射到[0,1],用一个8位的值表示像素stencil值,并把它映射到[0,255]。
849 0
SharpDX之Direct2D教程I——简单示例和Color(颜色)
研究Direct2D已经有一段时间了,也写了一个系列的文章 Direct2D ,是基于Windows API Code Pack 1.1。在前文 Direct2D教程VIII——几何(Geometry)对象的运算,本系列的终结篇 中介绍,由于Windows API Code Pack 1.1有错误问题,加上长时间没有更新(可以看出是2010年推出的),于是终止了该系列的教程。
988 0
Directx11教程39 纹理映射(9)
在myTutorialD3D11_32中,我们在PlaneModelClass中增加一个纹理TextureClass* m_Texture;读入一个grass的纹理,程序执行后的效果如下: 完整的代码请参考: 工程文件myTutorialD3D11_32 代码下载: http://files.
818 0
+关注
迈克老狼1
算法相关技术专家
240
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载