svg : 光滤镜（一）

马黑黑

上帝说要有光，于是就有了光。要有光，其实得先有光源，起初光源是一个点，svg 的 光源滤镜 fePointLight 描述的就是点光源，莫非它就是上帝创建的光源点？不管它。我们知道，光照射在物体上，部分光被物体吸收，吸收不完的部分则反射出来，反射出来的光描述了物体的形状、质地，人因此能看到物体。反射滤镜难道就是上帝创造的杰作呢？鹅鹅，当然不是！上帝是人类智慧的虚拟依托而已——人类太有智慧，但不知道智慧从何而来、为何如此厉害，人就说，要有上帝，于是就有了上帝，于是还有了光和滤镜。嗯嗯，光与光的反射让人看见东西，于是人类为 svg 创建了反射滤镜，其中，feDiffuseLighting，叫漫反射滤镜，我们今天要配合点滤镜 fePointLight 进行学习。这里注意一下，svg 光的滤镜中，光源滤镜的 Light 不要后缀 -ing，反射率竟则有 -ing 后缀。

先简单说说点光源滤镜（fePointLight）：它营造光的起源，使用 xy 坐标指定光点水平和垂直方向的起始位置、z坐标指定光点纵深位置，这是三维的点光源。下面的代码，坐标体系默认基于 svg 画布，规定点光源的中心在水平方向的40px、垂直方向的40px开始，Z坐标为 10px。

<fePointLight x="40" y="40" z="10"></fePointLight>

在 svg 光滤镜世界里，光源被反射滤镜所拥有的。漫射滤镜 feDiffuseLighting 作为父标签出现，其内拥有一个点光源 fePointLight 标签，二者以父子关系共同构建光滤镜组。其他的光滤镜也都照这个模式工作。漫射滤镜的简单用法演示代码如下：

<feDiffuseLighting in="SourceGraphic" lighting-color="#fff" result="light">
	<fePointLight x="40" y="40" z="10"></fePointLight>
</feDiffuseLighting>

代码中，in 属性指定滤镜的作用对象，SourceGraphic 指源图形即调用滤镜者图形，lighting-color 属性指定光的颜色，result 是给漫射滤镜指定的快照标识。光滤镜中有了光源滤镜和漫射滤镜还不行，还需要合成，所以需要在其后使用 feComposite 滤镜用来描述光滤镜组如何完成细节工作：

<feDiffuseLighting in="SourceGraphic" lighting-color="#fff" result="light">
	<fePointLight x="40" y="40" z="10"></fePointLight>
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"></feComposite>

合成细节是，以 arithmetic 智能组件按 k1~k4 规定的值去操作图像合成，将源2（in2)将漫射滤镜的效果作用于作用对象（in="SourceGraphic"）。下面是完整代码和效果，为了比较，这里设置了两个圆（circle）图形对象，第二个圆不加滤镜：

<svg width="400" height="200" style="border: 1px solid gray;">
	<filter id="lightPoint">
		<feDiffuseLighting in="SourceGraphic" lighting-color="#fff" result="light">
			<fePointLight x="40" y="40" z="10"></fePointLight>
		</feDiffuseLighting>
		<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"></feComposite>
	</filter>

	<circle cx="100" cy="100" r="90" fill="steelblue" filter="url(#lightPoint)"></circle>
	<circle cx="300" cy="100" r="90" fill="steelblue"></circle>
</svg>

上例，我们能明显看到光点的起源，在圆的左上角，同时也能明显看到慢射效果，一圈一圈地从原点向右下扩展开来。当然，整体滤镜效果取决于诸多因素的共同作用，包括各个滤镜的属性、合成滤镜的配置、源图形的背景颜色等等，而标签属性当中，漫射滤镜的 lighting-color 总体上规定的是光及反射光的颜色，但最终体现出来的效果也同时取决于其他因素的共同作用。

【提示】svg 子元素标签，多数情形下，可以是自闭合标签，出于需要也可以写成非自闭合标签，即可以拥有开始标签和结束标签。

马黑黑

feDiffuseLighting滤镜之下，未被光照的地方呈现黑色，所以使用了该滤镜的图形，会比原色呈现更深的颜色

红影

这个真漂亮，真的能看到漫反射的效果呢。
没想到用白色的光去反射，得到的却是比原图更深的颜色？是因为合成导致的效果么？

红影

这个用到了上一节课的内容，赶紧复习一下，operator="合成方式"，合成方式里有over、in、atop、xor、arithmetic ，智能组件 arithmetic ，还需加上 k1、k2、k3、k4 属性，—— k1 控制重叠的图像亮度，k2 控制输入源 in 亮度，k3 控制输入源 in2 的输入亮度，k4 亮度偏移量。
昨天的k1-k4到底怎么用的就有点模糊，今天的已经是实际应用了，仍然迷糊着

红影

如果换成昨天的k1="1" k2="0.1" k3="0.1" k4="0.2" 结果就是灰突突的了，显现出来的颜色果然是和合成有关。

红影

很有立体感啊。点光源的xy事定位的，z去试了一下，5-20之类的能清楚地看到光源点的位置，40以上就觉得那个点的位置很模糊了，但看光的走向，仍然能感觉到光源点的大致位置。

红影

上帝说要有光，于是就有了光。这个讲解的语言很风趣，非常生动的一堂课

马黑黑

红影 发表于 2023-10-20 13:41
上帝说要有光，于是就有了光。这个讲解的语言很风趣，非常生动的一堂课

这是旧约里的语句

马黑黑

红影 发表于 2023-10-20 13:39
很有立体感啊。点光源的xy事定位的，z去试了一下，5-20之类的能清楚地看到光源点的位置，40以上就觉得那个 ...

嗯，是应该试一下

马黑黑

红影 发表于 2023-10-20 13:20
这个真漂亮，真的能看到漫反射的效果呢。
没想到用白色的光去反射，得到的却是比原图更深的颜色？是因为合 ...

二楼那里有说明

马黑黑

红影 发表于 2023-10-20 13:32
如果换成昨天的k1="1" k2="0.1" k3="0.1" k4="0.2" 结果就是灰突突的了，显现出来的颜色果然是和合成有关。

对的。k1~k4有一整套规范。

马黑黑

红影 发表于 2023-10-20 13:25
这个用到了上一节课的内容，赶紧复习一下，operator="合成方式"，合成方式里有over、in、atop、xor、arithm ...

这个先不管，若感兴趣，可以自行查查资料

上海朝阳

反正看你俩的交流都是高科技，我是看不懂

红影

马黑黑 发表于 2023-10-20 19:33
这是旧约里的语句

这个帖子里的更进一步，不但有光，还有光的反射

红影

马黑黑 发表于 2023-10-20 19:34
嗯，是应该试一下

把光点放在不同位置上也很有趣。Z的取值的确有影响呢，试过了才感受到了。

红影

马黑黑 发表于 2023-10-20 19:34
二楼那里有说明

光顾着看帖子了，没注意二楼，这次进来才看到，原来黑黑早就说明了

红影

马黑黑 发表于 2023-10-20 19:35
对的。k1~k4有一整套规范。

这个觉得特别难了，完全摸不到边。

红影

马黑黑 发表于 2023-10-20 19:36
这个先不管，若感兴趣，可以自行查查资料

还是算了，我能先把简单的学一下就已经不容易了

马黑黑

红影 发表于 2023-10-20 20:05
还是算了，我能先把简单的学一下就已经不容易了

也好

马黑黑

红影 发表于 2023-10-20 20:05
这个觉得特别难了，完全摸不到边。

数学一般都需要慢慢领会