简介在水汽充足、微风及大气层稳定的情况下，气温接近零点，相对湿度达到100%时，空气中的水汽便会凝结成细微的水滴悬浮于空中，使地面水平的能见度下降，这种天气现象称为雾。光线在照射到这些小颗粒的时候，方向发生改变，一些光被挡掉了，所有光的强度发生了改变，另一方面本不应该射向观察者的光线射向了观察者。线性雾/指数雾/对数雾如今的显卡对雾已经有了硬件级别的支持，所以性能上的损耗非常小。通常硬件都会提供几种基础的雾的实现。1意味着没有fog，0表示全是fog雾的实现也可分为per vertex的和per pixel的。Per vertex的只计算顶点的fog，其他的地方用插值来处理，perpixel每个pixel都计算一次，稍微耗一些。After you determine the regular renderingresult of the object, the fog thickness is determined and used to blend the object colorwith the fog color based on the fog progression mode chosen使用fog的话也不用写什么shader，只要设置对应api的相关的state就可以了。float4x4 view_proj_matrix; struct VS_OUTPUT { f ...继续阅读 (3)

简介在水汽充足、微风及大气层稳定的情况下，气温接近零点，相对湿度达到100%时，空气中的水汽便会凝结成细微的水滴悬浮于空中，使地面水平的能见度下降，这种天气现象称为雾。光线在照射到这些小颗粒的时候，方向发生改变，一些光被挡掉了，所有光的强度发生了改变，另一方面本不应该射向观察者的光线射向了观察者。 线性雾/指数雾/对数雾如今的显卡对雾已经有了硬件级别的支持，所以性能上的损耗非常小。通常硬件都会提供 ...继续阅读 (8)

边缘提取边缘提取有很多种，这里用的是屏幕空间的做法，首先把要提取边缘的物品用纯色绘制到一张rt上，然后用一个一个边缘检测的滤波器在ps中扫一遍。绘制纯色的的psfloat4 ps_main( float4 Diff: COLOR0 ) : COLOR { return 1; }绘制完之后就像这样边缘提取的滤波器称为Sobel filter。边缘提取的ps如下sampler RT; const float off = 1.0 / 256.0; float4 ps_main( float2 TexCoord : TEXCOORD0 ) : COLOR { // Sample the neighbor pixels float s00 = tex2D(RT, TexCoord + float2(-off, -off)); float s01 = tex2D(RT, TexCoord + float2( 0, -off)); float s02 = tex2D(RT, TexCoord + float2( off, -off)); float s10 = tex2D(RT, TexCoord + float2(-off, 0)); float s12 = tex2D(RT, TexCoord + float2( off, 0)); ...继续阅读 (2)

边缘提取边缘提取有很多种，这里用的是屏幕空间的做法，首先把要提取边缘的物品用纯色绘制到一张rt上，然后用一个一个边缘检测的滤波器在ps中扫一遍。绘制纯色的的psfloat4 ps_main( float4 Diff: COLOR0 ) : COLOR { return 1; } 绘制完之后就像这样 边缘提取的滤波器称为Sobel filter。 边缘提取的ps如下sampler RT; c ...继续阅读 (4)

反射反射在上一篇的HDR中就已经用到了。简单说一下反射发生的原理就是光线打到一个物体的面上之后，一部分光被弹回去的现象，原理如下图只要知道入射光线和发现，出射光线的方向就可以求出。通过这个方向对天空盒进行采样，就可以得到天空盒上的颜色了。在vs中计算出射光线的方向float4x4 view_proj_matrix; float4 view_position; struct VS_OUTPUT { float4 Pos: POSITION; float2 TexCoord: TEXCOORD0; float3 Reflect: TEXCOORD1; }; VS_OUTPUT vs_main(float4 inPos: POSITION, float3 inNormal: NORMAL, float2 inTxr: TEXCOORD0) { VS_OUTPUT Out; // Compute the projected position and send out the texture coordinates Out.Pos = mul(view_proj_matrix, inPos); Out.TexCoord = inTxr; // Compute the reflect ...继续阅读

反射反射在上一篇的HDR中就已经用到了。简单说一下反射发生的原理就是光线打到一个物体的面上之后，一部分光被弹回去的现象，原理如下图 只要知道入射光线和发现，出射光线的方向就可以求出。通过这个方向对天空盒进行采样，就可以得到天空盒上的颜色了。在vs中计算出射光线的方向float4x4 view_proj_matrix; float4 view_position; struct VS_OUTPUT ...继续阅读 (6)

 简介颜色用8bit来表示就可以了，但是光强呢?High dynamic range is the science ofrecognizing the different intensity levels of light.Under normal rendering circumstances, wherethe average level of lighting is similar throughout the scene, eight bits of colorprecision are enough to represent the different colors and light intensities. However, inreal life, there are many situations where the levels of lighting varysignificantly throughout the scene, leading to a scenario where there isn’t enough precision to represent all thephenomena that occur from differences in intensities.在图形学中，实现HDR的流程如下效果如下 floatin ...继续阅读 (3)

简介颜色用8bit来表示就可以了，但是光强呢?High dynamic range is the science ofrecognizing the different intensity levels of light.Under normal rendering circumstances, wherethe average level of lighting is similar throu ...继续阅读 (6)

作者：拳四郎链接：https://zhuanlan.zhihu.com/p/25095708来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。Depth的由来从PerspectiveProjection 说起所谓的PerspectiveProjection 其实就是将顶点从view 坐标系下，转换到NDC下这里面包含了两个步骤，将view 坐标系下的顶点乘以透视矩阵，转换到Clip 坐标系，得到Clip坐标，然后统一除以w，得到NDC 坐标。透视矩阵就不推导了，这里再看下Zn和Ze之间的关系其中n是近裁面，f是远裁面，r是0.5 *width， t = .5 * height。其中可以得出其中A = -(f+n)/(f-n) , B = -2fn/(f-n).两者的关系可以用下图来表示可以看出有下面几点两者是非线性的关系。曲线是倒数的关系。（y=1/x）根据曲线的特点可以知道在近裁面附近的Depth变化非常的明显，越接近远裁面，Depth变化越小，精度变差，这时候就会出现恼人的Z-Fighting要避免Z-Fighting，n和f之间的距离就要尽量小，尽量将n大一些。这样的好处虽然远的地方可能会有Z-fighting，但是近处的地方有了更好的深度精度可能这还不是很清楚，后面还有更精确的数学推导。viewporttransformationviewport ...继续阅读 (2)

作者：拳四郎链接：https://zhuanlan.zhihu.com/p/25095708来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。Depth的由来从PerspectiveProjection 说起所谓的PerspectiveProjection 其实就是将顶点从view 坐标系下，转换到NDC下这里面包含了两个步骤，将view 坐标系下的顶点乘以透视矩阵，转 ...继续阅读 (10)

一、原理先看下面的图产生的原理及其就是折射。深入探究的话，可以去搜搜波粒二象性，斯涅尔定律等等。当太阳照射地面的时候，靠近地面的空气会变得很热，热空气比较轻会往上走，冷的空气会往下沉。冷热空气由于有着不同的密度和折射率，就产生了折射现象。下面是折射的示意图这种特效可以用于喷气背包或者火箭升空时候火焰处空气扭曲的效果，也可以用于其他介质比如水或者刀光的处理。二、动手首先给场景添加一个天空球，Steam mapping设置如下一定要记得设置这个！一定要记得设置这个！一定要记得设置这个！添加一个球的模型，添加一个CubemapRenderState中设置Vs中让球围绕在视角的周围float4x4 view_proj_matrix; float4 view_position; struct VS_OUTPUT { float4 Pos: POSITION; float3 dir: TEXCOORD0; }; VS_OUTPUT vs_main(float4 Pos: POSITION) { VS_OUTPUT Out; // Center environment around camera Out.Pos = mul(view_proj_matrix, float4(Pos.xyz + view_position, 1)); Out.dir = P ...继续阅读 (2)

一、原理先看下面的图产生的原理及其就是折射。深入探究的话，可以去搜搜波粒二象性，斯涅尔定律等等。当太阳照射地面的时候，靠近地面的空气会变得很热，热空气比较轻会往上走，冷的空气会往下沉。冷热空气由于有着不同的密度和折射率，就产生了折射现象。下面是折射的示意图这种特效可以用于喷气背包或者火箭升空时候火焰处空气扭曲的效果，也可以用于其他介质比如水或者刀光的处理。二、动手首先给场景添加一个天空球，Stea ...继续阅读 (6)

DOF(景深)最简单的现象就是当你用眼睛聚焦到前景的地方，后面就会变模糊， 当用眼睛聚焦到远景的地方，前就会变模糊，相机也会有同样的情况，通过调节光圈和焦距就很容易出现景深的效果。如果要说景深形成的原理的话，可以用小孔成像来说一天，但是在图形学里面，要做的就一件事 Faking it!镜头前的东西被模糊，远离镜头的东西比较清晰Box filter 过于简单，高斯模糊需要两个pass，这里用一个稍微复杂的filter，一次pass就搞定，滤波器是这样的具体的pixel shader里面是这样的float fInverseViewportWidth; float fInverseViewportHeight; sampler Texture0; const float4 samples[9] = { -1.0, -1.0, 0, 1.0/16.0, -1.0, 1.0, 0, 1.0/16.0, 1.0, -1.0, 0, 1.0/16.0, 1.0, 1.0, 0, 1.0/16.0, -1.0, 0.0, 0, 2.0/16.0, 1.0, 0.0, 0, 2.0/16.0, 0.0, -1.0, 0, 2.0/16.0, 0.0, 1.0, 0, 2.0/16.0, 0.0, 0.0, 0, 4.0/16.0 }; float4 ps_main(float2 texCoor ...继续阅读 (5)

DOF(景深)最简单的现象就是当你用眼睛聚焦到前景的地方，后面就会变模糊， 当用眼睛聚焦到远景的地方，前就会变模糊，相机也会有同样的情况，通过调节光圈和焦距就很容易出现景深的效果。如果要说景深形成的原理的话，可以用小孔成像来说一天，但是在图形学里面，要做的就一件事 Faking it!镜头前的东西被模糊，远离镜头的东西比较清晰Box filter 过于简单，高斯模糊需要两个pass，这里用一个稍微 ...继续阅读 (4)

一、RenderTarget直接看E文的解释吧In RenderMonkey, rendering to a temporary texture can be carried out using something called a render target. Render targets are a technique exposed by the different rendering APIs to allow you to redirect the hardware’s rendering output to the texture of your choice. Such textures can then be used to accomplish other effects, such as shadowing or motion blur. Generally, this has few implications for the 3D hardware, because normal rendering usually happens to a hidden texture that has been allocated in the background and is presented to the user after the rendering is co ...继续阅读 (8)

渲染到 RenderTargetIn RenderMonkey, rendering to a temporary texture can be carried out using something called a render target. Render targets are a technique exposed by the different rendering APIs to a ...继续阅读 (7)

一.模型纹理加载首先来用两个pass画两只大象工程目录如下，就是默认的创建项目，第一个pass的vs和fs如下第一个passvsfloat4x4 matViewProjection; struct VS_INPUT { float4 Position : POSITION0; float2 Txr1: TEXCOORD0; }; struct VS_OUTPUT { float4 Position : POSITION0; float2 Txr1: TEXCOORD0; }; VS_OUTPUT vs_main(VS_INPUT Input) { VS_OUTPUT Output; Output.Position = mul(Input.Position, matViewProjection ); Output.Txr1 = Input.Txr1; return( Output ); }fssampler Texture0; float4 ps_main(float4 inDiffuse: COLOR0, float2 inTxr1: TEXCOORD0) : COLOR0 { // Output the color t ...继续阅读 (14)

简介PCG是程序生成游戏内容的简称，它使用了随机或者伪随机数的技术，给游戏带来了无限的可能。相比于传统的由设计师将游戏世界中的一草一木都精心配制，PCG的方法是去配置一些生成的规则，然后由生成算法自动去生成游戏世界。在过去的时候，由于游戏主机和PC性能的限制，PCG的内容非常的简单，比如随机地牢或者游戏的地图，但近年来随着sandbox品类的游戏的兴起，比如风靡全球的Minecraft，PCG能够发挥的作用越来越大。下面就以程序生成地牢和程序生成地形为例，讲述一些PCG的一些基本方法。程序生成地牢Rogue最早使用程序生成技术的游戏之一，它最大的特性就是动态程序生成，这让玩家每次玩游戏都有着完全不一样的体验。由这个游戏诞生出了一种以程序生成技术为代表的游戏种类，称之为“rougelike”。那么如果去由程序生成一个地牢呢?我们首先定义出一些地牢中的一些基本组件，它们有：房间：它有一个或者多个出口；走廊：它是一个很窄很长的区域，拥有两个出口，它也可能是一个斜坡；连接处:是一个有着三个以上出口的小的空间；下面是几个简单的组件模型，在每个组件的出口，都有一个mark，标记了位置和旋转量，用于组件的匹配.现在只要将它们遵循一定的规则拼接在一起，就可以生成地牢了，这些规则有：1. 房间只能链接走廊；2. 走廊链接房间或者连接处；3. 连接处只能连接走廊接下来是生成算法的详细描述1. 初始化一 ...继续阅读 (11)

简介PCG是程序生成游戏内容的简称，它使用了随机或者伪随机数的技术，给游戏带来了无限的可能。相比于传统的由设计师将游戏世界中的一草一木都精心配制，PCG的方法是去配置一些生成的规则，然后由生成算法自动去生成游戏世界。在过去的时候，由于游戏主机和PC性能的限制，PCG的内容非常的简单，比如随机地牢或者游戏的地图，但近年来随着sandbox品类的游戏的兴起，比如风靡全球的Minecraft，PCG能够 ...继续阅读 (5)

经典文字渲染：位图字体在早期渲染文字时，选择你应用程序的字体(或者创建你自己的字体)来绘制文字是通过将所有用到的文字加载在一张大纹理图中来实现的。这张纹理贴图我们把它叫做位图字体(Bitmap Font)，它包含了所有我们想要使用的字符。这些字符被称为字形(Glyph)。每个字形根据他们的编号被放到位图字体中的确切位置，在渲染这些字形的时候根据这些排列规则将他们取出并贴到指定的2D方块中。上图展示了我们如何从一张位图字体的纹理中通过对字形的合理取样(通过小心地选择字形的纹理坐标)来实现绘制文字“OpenGL”到2D方块中的原理。通过对OpenGL启用混合并让位图字体的纹理背景保持透明，这样就能实现使用OpenGL绘制你想要文字到屏幕的功能。上图的这张位图字体是使用Codehead的位图字体生成器生成的。使用这种途径来绘制文字有许多优势也有很多缺点。首先，它相对来说很容易实现，并且因为位图字体被预渲染好，使得这种方法效率很高。然而，这种途径并不够灵活。当你想要使用不同的字体时，你不得不重新生成位图字体，以及你的程序会被限制在一个固定的分辨率：如果你对这些文字进行放大的话你会看到文字的像素边缘。此外，这种方式仅局限于用来绘制很少的字符，如果你想让它来扩展支持Unicode文字的话就很不现实了。这种绘制文字的方式曾经得益于它的高速和可移植性而非常流行，然而现在已经存在更加灵活的方式了。其 ...继续阅读 (43)

经典文字渲染：位图字体在早期渲染文字时，选择你应用程序的字体(或者创建你自己的字体)来绘制文字是通过将所有用到的文字加载在一张大纹理图中来实现的。这张纹理贴图我们把它叫做位图字体(Bitmap Font)，它包含了所有我们想要使用的字符。这些字符被称为字形(Glyph)。每个字形根据他们的编号被放到位图字体中的确切位置，在渲染这些字形的时候根据这些排列规则将他们取出并贴到指定的2D方块中。上图展示 ...继续阅读 (7)

自相似所谓自相似，是一种尺度变换下的不变性(scale-invariance)，即在不同尺度下观察分形可以看到近似相同的形象，若把整个对象的局部放大，再把局部的局部放大，都可以看到相似的结构特征。但是这种自相似并不像整形的相似那么严格，允许相似中的不相似，不需要也不可能完全相同。比如，科赫曲线，整体是闭合的，但任一部分都不是封闭曲线。分形自相似意味着部分与整体有一样的复杂性：一样曲折、琐碎、纷乱、不规整、不光滑。并且，分形的部分与部分之间也是相似的，下图中的植物就是自然界中自相似的一个例子。“山重水复疑无路”就是从审美的角度对山水分形中的自相似的描述，以至于让外人只看到相同之处而难以了解细微的差别，便生出迷路的疑惑。Midpoint Displacement in One Dimension一维的Midpoint Displacement方法常用于山脊的生成伪代码如下Start with a single horizontal line segment. Repeat for a sufficiently large number of times { Repeat over each line segment in the scene { Find the midpoint of the line segmen ...继续阅读 (2)

自相似所谓自相似，是一种尺度变换下的不变性(scale-invariance)，即在不同尺度下观察分形可以看到近似相同的形象，若把整个对象的局部放大，再把局部的局部放大，都可以看到相似的结构特征。但是这种自相似并不像整形的相似那么严格，允许相似中的不相似，不需要也不可能完全相同。比如，科赫曲线，整体是闭合的，但任一部分都不是封闭曲线。分形自相似意味着部分与整体有一样的复杂性：一样曲折、琐碎、纷乱、 ...继续阅读 (5)

OS Windows10 64bit1.Java 最好在1.8以上，这里用的jdk-8u71-windows-x64.exe，下载好之后直接双击安装，安装好之后命令行运行java -version2.gradle从官方网站获取最新的zip包http://www.gradle.org/2.将其解压并配置环境变量指向gralde目录 如%GRADLE_HOME%=E:\yourparh\gradle在path中设置bin目录%GRADLE_HOME%\bin;打开控制台，运行gradle -v ；配置成功3.forge mdk直接去官网下载http://files.minecraftforge.net/这里下载的稳定版forge-1.8-11.14.4.1563-mdk.zip终端进入解压后的文件夹命令行运行 gradlew setupDecompWorkspace等待...等待...等待...运行完事之后终端会显示 BUILD SUCCESSFUL.如果爆connection error之类的，就检查下网络，要么用代理。还有几种配置模式，具体区别如下，不翻译了Tip:If you do not care about seeing Minecraft's source code you can replace "setupDecompWorkspace" ...继续阅读 (23)

OS Windows10 64bit1.Java 最好在1.8以上，这里用的jdk-8u71-windows-x64.exe，下载好之后直接双击安装，安装好之后命令行运行java -version2.gradle从官方网站获取最新的zip包 http://www.gradle.org/ 2.将其解压并配置环境变量指向gralde目录 如 %GRADLE_HOME%=E:\yourparh\grad ...继续阅读 (7)

介绍介绍饥饿(Hunger)是一个在冒险元素更新中新增的一个游戏机制。在更新之前，玩家食用食物会直接回复生命值。现在，食用则会回复饥饿值，一种随着玩家的不同行动而降低的数值。饥饿条位于屏幕下方玩家的生命值的旁边，表示为10个火腿。当玩家在疾跑时，玩家的饥饿值将会下降的很快。当饥饿值变成6或者更少时，玩家便不能奔跑了。在和平模式下，饥饿值并不会减少，但是其对于玩家生命值的影响并没有消失，并且在游戏中切换难度并不会影响到玩家现有的饥饿值。因此，当你的饥饿值消耗殆尽后，调回和平模式并不会补充它，而且你的生命值将一直持续增加半颗心（和平模式特性）和减半颗心（饥饿）的循环中(这不适用于1.8以后的版本，因为1.8以后和平模式下会自动补饥饿值)。某些特定的食物和药水会有一定几率导致玩家中毒（“饥饿”效果），使玩家的饥饿值下降的更快。腐肉导致中毒的几率有80%，生鸡肉的几率只有30%，河豚则是100%，而食用蜘蛛眼将会直接对玩家生命值造成伤害（“中毒”效果）。代码分析相关设计类模型如下实际上所谓的饱食度其实分为三个部分: 食物水平（foodLevel），取值范围是从0到20，它表示的是玩家饥饿值。1点等于（半个“火腿”）。 食物饱和度（foodSaturationLevel）这是一项隐藏的食物变量，一种在消耗食物水平之前先消耗的值。食用任何食物都会添加一点这种变量。注意这个变量是无法超过食物水平 ...继续阅读 (1)

介绍介绍饥饿(Hunger)是一个在冒险元素更新中新增的一个游戏机制。在更新之前，玩家食用食物会直接回复生命值。现在，食用则会回复饥饿值，一种随着玩家的不同行动而降低的数值。饥饿条位于屏幕下方玩家的生命值的旁边，表示为10个火腿。当玩家在疾跑时，玩家的饥饿值将会下降的很快。当饥饿值变成6或者更少时，玩家便不能奔跑了。在和平模式下，饥饿值并不会减少，但是其对于玩家生命值的影响并没有消失，并且在游戏中 ...继续阅读 (5)

简介透视投影是3D固定流水线的重要组成部分，是将相机空间中的点从视锥体(frustum)变换到规则观察体(Canonical View Volume)中，待裁剪完毕后进行透视除法的行为。在算法中它是通过透视矩阵乘法和透视除法两步完成的。 具体的理论推导过程可以参考下面的几个Link，深入探索透视投影变换深入探索透视投影变换(续)OpenGL TransformationOpenGL ProjectionMatrix推导正交投影变换 代码实现 首先是Perspective的Camera，用Unity的Camera来作为参照。  (0,0,0)点放一个quad加一个脚本来测试一下 Debug.Log("ProjectionMatrix\n" + GetComponent<Camera>().projectionMatrix); Debug.Log("ViewMatrix\n" + GetComponent<Camera>().worldToCameraMatrix); Debug.Log("ModeMatrix\n" + mesh.transform.localToWorldMatrix);     打印出相机的矩 ...继续阅读 (23)

简介透视投影是3D固定流水线的重要组成部分，是将相机空间中的点从视锥体(frustum)变换到规则观察体(Canonical View Volume)中，待裁剪完毕后进行透视除法的行为。在算法中它是通过透视矩阵乘法和透视除法两步完成的。 具体的理论推导过程可以参考下面的几个Link，深入探索透视投影变换深入探索透视投影变换(续)OpenGL TransformationOpenGL Project ...继续阅读 (9)

环境Unity5.3.5f1Windows 64bitAssets 导入首先导入Unity3D官方的一些Asset 如果没有这个菜单的话，就是没有安装Unity Standard assets包，去官网下载安装一下。 导入之后可以先用prototyping下面的prefab搭建一个场景先  随便搭一下，就像这样 FPS Controller第一人称的摄像机和角色控制在这里 有代码，有脚步声，还有两个直接拖拽到场景中就能使用的prefab，还有一个说明文档。简单看一下两个prefab的区别 FPSController上面挂了CharacterController，这个东西是物理不真实的，上面还挂了一个kinematic的Rigidbody。RigidBodyFPSController则是带了物理的。 优先选择RigidBodyFPSConrtoller吧。跑了一下，手感很不错。 TPS Controller包括TPS摄像机和TPS角色控制器首先拖一个第三人称的角色prefab进来  相机在这里根据用途不同有不同的prefab，最常用的就是MultiPurposeCameraRig。拖到场景里面，在Inspect里面，将之前的ThirdPersonController拖到Tar ...继续阅读 (17)