Question

我正在尝试使用图像的brightnessToAlpha转换在SVG中创建凹凸贴图效果，然后改变整个表面上点光源的位置。

这是我创造的短小提琴， https://jsfiddle.net/5g2qncq8/6/

代码段：

<defs>
<filter id="bump" x="0" y="0" height="100%" width="100%" >
<feColorMatrix in="SourceGraphic" type="luminanceToAlpha" result="bumpMap"/>
<feDiffuseLighting in="bumpMap" surfaceScale="1" diffuseConstant="10" result="shading"> 
<fePointLight in="SourceGraphic" id="light" x="300" y="300" z="10">
</fePointLight>
</feDiffuseLighting>
<feBlend in="SourceGraphic" mode="multiply" result="lit"/>
</filter>
</defs>

当您在图像上滚动时，点光源的位置会更新，并且当指针远离它时图像会变暗。我的问题是，虽然房子实际上是多边形的，但是当点光源离开时，我会看到一些额外的灰色矩形区域（在房子上方）。为什么会这样？

当灯光照在房子的顶部时，它显然会消失。有人可以提出摆脱这个灰色区域的方法吗？

我知道我可能会遗漏一些明显的东西。任何帮助或指示表示赞赏。干杯！

Answer 1

这是因为feBlend公式为cr =（1-qa）* cb +（1-qb） ca + ca cb。如果你的光是A（比如不透明的中灰色）而你的透明黑色背景是B，那么像素的颜色将是（1-1）（。0 / .0 / .0）+（1- 0）（0.5 / .05 / .05）+ .5 * .0 ==＆gt;＆gt;灰色。

不透明度为qr = 1 - （1-qa）（1-qb）：1 - （1-1）（1-0）= 1.

换句话说，如果您至少有一个不透明的源，则会得到不透明的结果。

您可以添加以下内容来剪裁背景：

  <feComposite operator="in" in2="SourceGraphic"/>

到过滤器的末尾。

带有漫反射光照的SVG滤镜凹凸贴图溢出

1 个答案: