怎么建设一个自己的网站首页,郑州的团购网站建设,wordpress 知识管理主题,wordpress请求接口的方式这次将要制作一个类似夜视仪的效果 第一步就是要降低图像的分辨率#xff0c; 这只需要将id.xy除上一个数字然后再乘上这个数字 可以根据下图理解#xff0c;很明显通过这个操作在多个像素显示了相同的颜色#xff0c;并且很多像素颜色被丢失了#xff0c;自然就会有降低分…这次将要制作一个类似夜视仪的效果 第一步就是要降低图像的分辨率 这只需要将id.xy除上一个数字然后再乘上这个数字 可以根据下图理解很明显通过这个操作在多个像素显示了相同的颜色并且很多像素颜色被丢失了自然就会有降低分辨率的效果 效果
但是这样图像太锐利了我们加入噪声去解决这个问题
[numthreads(8, 8, 1)]
void CSMain(uint3 id : SV_DispatchThreadID)
{uint2 index (uint2(id.x,id.y)/3*3);float noise random((float2)id.xy,time);float3 srcColor lerp(source[index].rgb*2,source[index].rgb,noise);float3 finalColor srcColor;output[id.xy] float4(finalColor, 1);
}
这样以后得到的结果就更接近低分辨率相机的效果 夜视仪通常都是绿色的我们首先计算出灰度值然后用灰度值乘上我们设置的一个类似夜视仪的绿色灰度值越大颜色就越接近我们设置的颜色反之越接近黑色。最后再将这个颜色与原始颜色根据强度进行插值 夜视仪上通常有滚动的扫描线。
我们首先将像素的y坐标转换到0-1的范围内然后生成一个周期性的值模仿扫描线的循环然后加上0.3避免扫描线的强度过大最后将它限制在0-1范围内
[numthreads(8, 8, 1)]
void CSMain(uint3 id : SV_DispatchThreadID)
{uint2 index (uint2(id.x,id.y)/3*3);float noise random((float2)id.xy,time);float3 srcColor lerp(source[index].rgb*2,source[index].rgb,noise);float3 grayScale (srcColor.r srcColor.g srcColor.b) / 3.0;float3 tinted grayScale * tintColor.rgb;float3 finalColor lerp(srcColor,tinted, tintStrength);float uvY (float)id.y/ (float)source.Length.y;float scanline saturate(smoothstep(0.1,0.2, frac(uvY*lines time*3)) 0.3);finalColor lerp(source[id.xy].rgb*0.5,finalColor,scanline);output[id.xy] float4(finalColor, 1);
} 效果 最后就是制作夜视仪的望远镜的效果 。主要原理可参照下面的图片 [numthreads(8, 8, 1)]
void CSMain(uint3 id : SV_DispatchThreadID)
{uint2 index (uint2(id.x,id.y)/3*3);float noise random((float2)id.xy,time);float3 srcColor lerp(source[index].rgb*2,source[index].rgb,noise);float3 grayScale (srcColor.r srcColor.g srcColor.b) / 3.0;float3 tinted grayScale * tintColor.rgb;float3 finalColor lerp(srcColor,tinted, tintStrength);float uvY (float)id.y/ (float)source.Length.y;//float scanline saturate(smoothstep(0.1,0.2, frac(uvY*5time*3)) 0.3);float scanline frac(uvY*2);finalColor lerp(source[id.xy].rgb*0.5,finalColor,scanline);float2 pt (float2)id.xy;float2 center float2(source.Length * 0.5);center.x - radius * 0.7;float leftLense incircle(pt, center, radius, edgewidth);center.x radius * 1.4;float rightLense incircle(pt, center, radius, edgewidth);float inVision saturate(leftLense rightLense);float3 black float3(0, 0, 0);finalColor lerp(black, finalColor, inVision);output[id.xy] float4(finalColor, 1);
}
最终效果
