2013-02-26 100 views
1

我正在使用cocos2d-x 2.0.4。我通过这两个图像来说明我正在尝试做什么。OpenGL - 在纹理多边形上创建边框

convex_poly http://img542.imageshack.us/img542/2554/convexpoly.png convex_poly_with_border http://img40.imageshack.us/img40/8007/convexpolywithborder.png

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

无论如何,我对openGL的东西很陌生,恐怕第二种解决方案最终会有很大的处理时间,因为我必须计算多边形每个像素的距离。你对这个家伙有什么看法?任何想法都倾向于证实我的猜测,或者我完全错了吗?

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

expl http://img571.imageshack.us/img571/892/convexpolyexplanation.png

+0

只是一般的评论,但你需要考虑在三角形的方面,而不是任意多边形。 – JasonD 2013-02-26 15:15:15

回答

2

将边缘照明着色器你想要做什么?对于GLSL边缘照明着色器Link to an example

示例代码:

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); 
+0

真的很有意思,我会看看那个;) – olma 2013-02-27 10:05:35

+0

我在2D项目上工作,所以没有深度的这个概念,我猜NormalToCam浮点值在我的情况下是没有意义的。我为未来的3D项目保留它;) – olma 2013-02-27 10:14:10

+0

那么,你仍然有一个深度的概念!所有事情恰好分享相同的深度。我想知道是否可以沿着与摄像机垂直的poly点的外侧制作法线,并在与摄像机平行的内侧点上进行法线。这可能会使它对你有用。无论哪种方式,我怀疑技术可以以某种方式适应。 – MrLeap 2013-02-27 17:46:18

1

为了使这一下直接从任何角度看三维场景中,您将需要执行一些剪影。这基本上涉及使用几何着色器来确定对象的边缘具有面向屏幕的相邻面和不面向屏幕的相邻面。我相信这可以通过测试一个相邻的脸部法线和您的相机方向之间的点积是否为< = 0,而另一个相邻脸部法线和您的相机方向的点积是否大于0来实现。

一旦您知道所有以某个角度勾画多边形的边缘,可以将由该边框定义的多边形镶嵌到三角形条带中(仍然保留在几何着色器中)。然后,您将每个顶点的颜色传递给片段着色器;其中位于边界上的所有顶点都以完整的alpha值传递边界颜色,而非边界点则以零alpha值传递颜色。片段着色器将从边框颜色插入到中间片段的中心alpha颜色,从而为您提供所需的渐变效果。你的总体方法应该是这样的:

  1. 绘制具有非边界着色器程序作为背景色的对象。
  2. 启用alpha混合。与剪影节目确定组成的边界与边框颜色的边缘上,和绘图非边界点作为零阿尔法

    glEnable(GL_BLEND); 
    glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA); 
    
  3. 绘图对象。

  4. glDisable(GL_BLEND); 
    
+0

其实它是一个2D项目,但你的方法确认我的,我认为这应该工作。 Thx;) – olma 2013-02-27 10:03:14

+0

没问题!我很习惯在3D头像中思考我完全忘记了人们使用OpenGL进行二维绘图。祝你好运! – 2013-02-27 19:57:08