1

我正在使用 cocos2d-x 2.0.4。我通过这两张图片说明了我正在尝试做的事情。

凸多边形 凸多边形带边框

我想要做的是以编程方式创建一个模糊的边界或一个带有渐变的边界。我有两个想法可以做到这一点，但我不确定这是否是正确的做法。第一个解决方案是对仅包含模糊颜色的多边形（在这种情况下为带有孔的凹多边形）进行三角剖分，并使用渐变在其上渲染颜色，多边形外部的顶点将是全 alpha，内部的顶点为零-α。插值将完成梯度的工作。第二种解决方案是在着色器本身内部进行。我需要的只是计算一个像素和多边形最近边缘到它的距离。然后在某个阈值下，我会根据该距离影响具有某个 alpha 值的像素白色（距离最短，alpha 最大）。

无论如何，我对openGL的东西很陌生，我担心第二种解决方案最终会花费大量的处理时间，因为我必须计算多边形每个像素的距离。你怎么看这些家伙？有什么想法可以证实我的猜测，还是我完全错了？

编辑：我最终选择的解决方案是使用多边形中每个角度的平分线（易于用 3 个连续顶点计算），并在该平分线上取一个点，该点将成为内部多边形的顶点。然后我采用外部多边形顶点或内部多边形顶点来构建可以适合 GL_TRIANGLE_STRIP 参数的顶点数组。我把图片放在下面以便更好地理解。

解释

4

2 回答 2

2

边缘照明着色器会做你想要的吗？链接到一个例子

GLSL 边缘照明着色器的示例代码：

const float rimStart = 0.5f;
const float rimEnd = 1.0f;
const float rimMultiplier = 0.0f;
vec3  rimColor = vec3(1.0f, 1.0f, 1.0f);

float NormalToCam = 1.0 - dot(normalize(outNormal), normalize(camPos - vertexWorldPos.xyz));
float rim = smoothstep(rimStart, rimEnd, NormalToCam) * rimMultiplier;

outColor.rgb += (rimColor * rim);
于 2013-02-26T18:21:02.677 回答
1

为了从 3D 场景中的任何角度看都正确，您需要执行一些剪影。这主要涉及使用几何着色器来确定对象的哪些边缘具有面向屏幕的相邻面和不面向屏幕的相邻面。我相信这可以通过测试一个相邻面法线与您的相机方向之间的点积是否 <= 0 而另一个相邻面法线与您的相机方向之间的点积是否 > 0 来实现。

一旦您知道以某个角度勾勒出多边形的所有边缘，您就可以将由该边界定义的多边形细分为三角形条带（仍在几何着色器中）。然后，将每个顶点的颜色传递给片段着色器；其中位于边界上的所有顶点都以全 alpha 传递边界颜色，非边界点以零 alpha 传递颜色。片段着色器将从边框颜色插入中间片段的中心 alpha 颜色，为您提供所需的渐变。您的总体方法应该是这样的：

  1. 使用无边框着色器程序作为背景颜色绘制对象。

  2. 启用 Alpha 混合。

    glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA);

  3. 使用剪影程序绘制对象，确定用边框颜色构成边框的边缘，并将非边框点绘制为零 alpha。

  4. glDisable(GL_BLEND);
于 2013-02-26T17:51:21.570 回答