将每个图像的白点replace为径向渐变

最近,我读了一篇关于太阳着色器(XNA Sun Shader)的文章,并决定使用OpenGL ES 2.0来实现它,但是我遇到了一个有关着色器的问题:

我有两个纹理,其中之一就是火渐变纹理: 火梯度纹理

另一个是纹理,每个白色的部分将使用渐变填充; 目标纹理

所以,我将得到一个类似于下面的图像的结果(不要关注在球形网格上渲染的纹理):

结果

我真的希望有人知道如何实现这个着色器。

作为替代scheme,我如何在Photoshop中制作它?

如果源图像是双色(1位黑/白),则灰度到灰度的直接映射将不够用。

解决这个问题的一个可能的方法是计算一个距离场(最好是一个离线任务),其中每个纹理元素编码到最近的白色纹理元素的距离。 然后可以使用该距离来对梯度图进行采样。

下面的图片显示了一个源图像和一个对应的带符号的距离场:

原始的双级位图签署的距离场

正如文章所述,在着色器中,您可以使用亮度值(介于0和1之间,或黑白之间)来水平索引“火”纹理。 这应该给你像素着色器返回的颜色:

  1. 索引噪点纹理。 这将返回一个灰色的颜色
  2. 从灰色的颜色(r,g和b应该是相同的)
  3. 使用该值将火焰纹理索引为x,其中y是任意值(例如0.5)
  4. 从火焰纹理中返回颜色

如果您不打算使用文章中介绍的添加技术,将红色和黄色烘焙到纹理中会更有意义,因此您可以节省一些GPU周期。 我不知道如何用Photoshop的噪音发生器做到这一点,但我想你总是可以用手绘制边缘:)