javascript - 在 Javascript 中创建非矩形形状的斜 Angular 效果

Question

我希望在(非矩形)形状(在 canvas 元素中)创建斜 Angular 效果。搜索了几乎整个互联网:到目前为止还没有运气。寻找建议。在我用尽所有现有的可能性之前，我不想自己实现斜 Angular 效果。目标浏览器是 Chrome。

这是一张没有应用斜 Angular 的图像，以及一张具有我正在寻找的效果的图像。这是在 Photoshop 中完成的:

编辑:我根据 markE 的建议整理了一些内容。阴影偏移方法的两个问题是:

1)有一个必须绘制的边框，这是我不想要的。

2)边框的粗细决定了阴影的强度。

<小时/>

我不希望边框可见，因此我需要一种方法来使边框尽可能小，然后剪掉边框。到目前为止，这涉及许多不同的步骤:

1)首先，我创建一个具有透明填充颜色、边框和轻微阴影(具有 (0,0) 偏移量)且模糊度为 1 的形状。然后，我将形状绘制到自身上以增加阴影的不透明度。

2)然后，我创建一个具有透明填充颜色、边框和阴影的形状，如 markE 所描述的那样。我将 lineWidth 设置为一个非常小的数字 - 例如.5.我将 (1) 中的形状应用到该形状上(通过 globalCompositeOperation = 'destination-out' )，然后在其自身上绘制该形状 3 次，以增加阴影的不透明度。

3)然后我画出正常的形状，没有边框。我将(2)应用到正常形状上，并再次使用 globalCompositeOperation = 'destination-out' 剪切(1)中形状的边框。 .

结果如下:

Answer 1

所以问题首先是 - 斜 Angular 效果是如何工作的？

您可能会说斜 Angular 效果也是 3D 化您的平面 2D 图像，而且确实如此(嗯，以物体的照明方式)。

基本上，着色计算的完成方式就像在某些实际的 3D 对象上完成的那样，但由于您只有 2D 图像，因此您还需要称为法线贴图的东西。

法线贴图是二维图像，它不是图像中的颜色，而是在 RGB channel 中编码了表面法线信息。因此图像中的每个像素都有 RGB 分量，R channel 代表 x 方向的表面法线，G 代表 y 方向的法线，B 代表法线的 z 轴分量。

了解有关法线贴图的更多信息 here .

另一个选择是使用凹凸贴图。该图像保存的是有关像素“高度”的信息，而不是像素的颜色或法线信息。

了解有关凹凸贴图的更多信息 here .

无论您有凹凸贴图还是法线贴图，结果都非常相似。凹凸贴图在图像(灰度图像)中只有一个 channel ，因此它们更容易制作，并且往往更“逼真”，但这取决于您想要什么效果。

下面是方形图像上斜 Angular 效果的凹凸贴图示例。

问题是图像通常具有不均匀的形状(如您的示例)，那么如何为这些图像创建凹凸贴图？

解决方案是创建名为“Eucledian Distance Matrix ”的内容。

EDM 在 Photoshop 中广泛使用，它们保存特定像素距图像的距离(图层上最近的彩色像素)的信息。 EDM 用于抚摸物体和斜 Angular 效果。 (关于如何生成 EDM 有大量资源)

因此，第 2 行和第 2 列中仅具有像素颜色的 4x4 图片的 EDM 示例如下所示。

1 1 1 2
1 0 1 2
1 1 1 2
2 2 2 3

使用 EDM，您可以获得图像“内部”有多少特定像素的信息，然后根据该信息生成凹凸贴图。

if (isInside(x,y))
    if ( dist = innerDistanceAt(x,y) < bevelWidth )
        bumpMap[x][y] = dist/bevelWidth;
    else
        bumpMap[x][y] = 1.0;

这段代码只是一个示例，伪代码，但您应该明白。

现在我们已经制作出了凹凸贴图，是时候计算光照(进行着色)了。

有很多着色模型可以使用 - list 。这是它们之间更多的视觉差异 - link .

我将从兰伯特模型开始。您可以找到大量相关资源。

通常，您需要表面法线(或凹凸贴图，然后可以从中计算表面法线(使用微分))和光矢量。根据该信息和漫反射颜色(在本例中为图像中的像素颜色)，您可以计算该像素的亮度，然后输出着色像素。

我还没有发布很多工作代码，因为描边效果和斜 Angular 效果非常复杂，但你应该明白了。这就是它们在照片编辑软件中“真正”的工作方式，正如您所看到的，这并不那么容易。

如果您有任何问题，请随时提问。

关于斜 Angular 效果的随机链接 - here .