Alpha测试的带符号距离场的文本渲染会产生扭曲的边缘

时间:2017-07-16 18:20:48

标签: c++ opengl textures distance text-rendering

我正在尝试使用表示为带符号距离场纹理的字形图集来渲染我的应用程序中的文本,这意味着存储距离到每个像素中最近轮廓的距离的纹理。 此距离场纹理是使用此算法从原始二进制字形图集纹理(0 - 字形轮廓外部,1-内部字形轮廓)生成的,该算法搜索纹理中每个像素周围的增量半径,直到具有相反状态的像素为止找到,然后存储找到该像素的距离。之后,所有距离都映射在0和1之间。

//set size of signed distance field atlas
atlas.width = binaryAtlasWidth* pDistanceFieldResolution;
atlas.height = binaryAtlasHeight * pDistanceFieldResolution;

const unsigned int atlasPixelCount = (atlas.width * atlas.height);
atlas.buffer.resize(atlasPixelCount);

//temporary buffer for the distances of each pixel
std::vector<float> unmappedBuffer;
unmappedBuffer.resize(atlasPixelCount);
//support multisampling
unsigned int samplesPerOutPixel = ceil(1.0 / pDistanceFieldResolution);

//for mapping the values between 0 and 1 later
float maxDistance = 0.0;
float minDistance = 0.0;

for (unsigned int outPixel = 0; outPixel < atlasPixelCount; ++outPixel) {
    //coordinate of the input sample
    unsigned int outPixelX = outPixel%atlas.width;
    unsigned int outPixelY = outPixel/atlas.width;

    float distanceSum = 0.0f;

    for (unsigned int sampleY = 0; sampleY < samplesPerOutPixel; ++sampleY) {
        for (unsigned int sampleX = 0; sampleX < samplesPerOutPixel; ++sampleX) {

            glm::uvec2 sampleCoord = glm::uvec2(outPixelX * samplesPerOutPixel+ sampleX, outPixelY * samplesPerOutPixel+ sampleY);
            unsigned int samplePos = sampleCoord.x + sampleCoord.y*binaryAtlasWidth;
            unsigned char sampleVal = buffer[samplePos];
            //inital distance is maximum search radius(outside of glyph)
            float dist = spread;
            int found = 0;
            unsigned int rad = 0;
            while(!found && (rad*(!sampleVal)) < spread_pixels) {
                //if sampleVal is 1(inside), search until found
                float radius = (float)rad + 1.0f;
                unsigned int compareCount = round(2.0f*radius*M_PI);
                float step = 1.0 / (float)compareCount;

                for (unsigned int t = 0; t < compareCount && !found; ++t) {
                    float theta = step*(float)t*360.0f;
                    glm::vec2 compareLocalCoord = glm::vec2(std::cos(theta), std::sin(theta))*radius;
                    glm::uvec2 compareCoord = sampleCoord + glm::uvec2(compareLocalCoord);
                    int comparePos = compareCoord.x + compareCoord.y*binaryAtlasWidth;
                    if (compareCoord.x >= 0 && compareCoord.x < binaryAtlasWidth&& compareCoord.y >= 0 && compareCoord.y < binaryAtlasHeight) {

                        unsigned char compareVal = buffer[comparePos];
                        if (compareVal != sampleVal ) {
                            float distance = sqrt(pow(compareLocalCoord.x, 2) + pow(compareLocalCoord.y, 2));
                            found = 1;
                            dist = std::min(distance * (1 - (sampleVal * 2)) , dist) ;
                        }
                    }
                }
                ++rad;
            }
            distanceSum += dist;
        }
    }

    float avgDistance = distanceSum / (float)(samplesPerOutPixel*samplesPerOutPixel);
    printf("pixel  %i  of  %i  has  %f  distance\n", outPixel, atlasPixelCount, avgDistance);
    unmappedBuffer[outPixel] = avgDistance;
    maxDistance = std::max(maxDistance, avgDistance);
    minDistance = std::min(minDistance, avgDistance);
}
minDistance *= -1.0;
float diff = maxDistance + minDistance;

//map all values between 0 and 255
for(unsigned int p = 0; p < atlasPixelCount; ++p) {
    float toMap = unmappedBuffer[p];
    float mappedDistance = 1.0f - (toMap + minDistance) / diff;
    atlas.buffer[p] = mappedDistance * 255;
}

此算法会创建以下结果:

266 x 183输入纹理

没有下采样的SDF结果(仍为266 x 183)

SDF结果采用下采样(106 x 73)

使用alpha测试渲染结果(当alpha大于0.5时传递):

没有下采样,最近的过滤

下采样,最近过滤

没有下采样,线性过滤

下采样,线性过滤

我的意思是,我到了那里,但实际上我期望准确的边缘,如valves paper所示。我准确的边缘缺少什么?

PS:我的片段着色器目前仅使用距离纹理值作为alpha值。 (color = vec4(1, 1, 1, distance);

0 个答案:

没有答案