shape 三角形 android

HLSL实现浮雕、锐化特效

• 前言
• 一、浮雕
• 二、锐化

---

前言

浮雕以及锐化都设计到当前像素与周边像素的计算。暂时将两者放在一块。

一、浮雕

浮雕效果是将图像的变化部分突出的表现出来，而相同的颜色部分则被淡化掉，使图像出现纵深感，从而达到浮雕的效果。实现方法是将每一个像素与其左上角（其他方向也行）的像素进行求差运算，并加上一个背景灰度。

//浮雕
float4 Emboss(float4 outp, float2 tex)
{
     //浮雕
    //浮雕效果  "浮雕"图像效果是指图像的前景前向“凸出”背景。
    //v2TexSize为纹理的原分辨率，当前纹理原分辨率为512x512  可定义为float2 v2TexSize = float2（512，512）
    float2 upLeftUV = float2(tex.x - 1.0 / v2TexSize.x, tex.y - 1.0 / v2TexSize.y); //得到当前像素点左上角的归一化后的纹理坐标  
    float4 bkColor = float4(0.5, 0.5, 0.5, 1.0); //一个灰度值，代表背景颜色
    float4 curColor = outp;


    float4 upLeftColor = g_Tex.Sample(g_SamLinear, upLeftUV);

    float4 delColor = curColor - upLeftColor;
  
    float h = 0.3 * delColor.x + 0.59 * delColor.y + 0.11 * delColor.z;//参数可根据情况自由调整
    //float h = 0.8 * delColor.x + 0.8 * delColor.y + 0.6 * delColor.z;
        
    outp = float4(h, h, h, 0.0) + bkColor;
    return outp;
}

浮雕效果

轮廓如果不够明显，可以试试更改左上角(或者其他方向)的位置（当前的为相邻的左上角）

例如：float2 upLeftUV = float2(tex.x - 2.0 / v2TexSize.x, tex.y - 2.0 / v2TexSize.y);

二、锐化

拉普拉斯锐化效果主要的思路是计算出自身与周围像素的色差，再将差别加到自身上，用于突出图像中的细节。（锐化效果与模糊效果有点相反的意思，模糊是平均化每个点，锐化是突出每个点）

float4 Sharpen(float4 outp, float2 tex)
{
    
    float2 v2Pixelsite = tex* v2TexSize;//将归一化后的纹理坐标回复成原图片分辨率大小的对应坐标
    
    //当前点与相邻点的计算关系
    float3x3 mxOperators = float3x3(-1.0f, -1.0f, -1.0f
                                     , -1.0f, 9.0f, -1.0f
                                     , -1.0f, -1.0f, -1.0f);//此处用的是一个3x3大小的矩阵，意为将自身与周围相邻的8个像素相减。

    
    //用于获取相邻像素点的纹理位置
    float2 v2aUVDelta[3][3]
    =
    {
        { float2(-1.0f, -1.0f), float2(0.0f, -1.0f), float2(1.0f, -1.0f) },
        { float2(-1.0f, 0.0f), float2(0.0f, 0.0f), float2(1.0f, 0.0f) },
        { float2(-1.0f, 1.0f), float2(0.0f, 1.0f), float2(1.0f, 1.0f) },
    };
     float4 c4Color = float4(0.0f, 0.0f, 0.0f, 0.0f);
    
    for (int i = 0; i < 3; i++)
    {
        for (int j = 0; j < 3; j++)
        {
            //计算采样点，得到当前像素附件的像素点的坐标（上下左右，八方）
            float2 v2NearbySite = v2Pixelsite + v2aUVDelta[i][j];
            
            
            c4Color += g_Tex.Sample(g_SamLinear, v2NearbyUV/v2TexSize) * mxOperators [i][j];


        }
    }
    outp.rgb = c4Color.rgb;
    return outp;

}

锐化效果

可以明显看到锐化后的图像变清晰了，但是主要是由于当前图片像素是512x512，分辨率较低。当使用的图片分辨率较高时，锐化的效果不一定会很好，而且还可能导致锐化后的图片种夹杂很多“亮点”，可以尝试更改锐化所用的矩形（如3x3更改为5x5）。