svg ：光滤镜（三）

马黑黑

本节主要内容：① 扩展介绍镜面滤镜 feSpecularLighting 的属性；② 聚光灯光源滤镜 feSpotLight。

镜面反射滤镜中有两个重要属性需要补充：一是 specularExponent 属性，它是镜面反射指数，该属性控制光源的焦点，值越大光亮越强；二是specularContant 属性，是镜面反射指数，该属性控制镜面反射照明的反射比率。它表示冯(Phong)照明模型中的 ks 值。值越大，反射越强。本节的示例将用到这两个属性。

下面重点介绍聚光灯光源滤镜。作为光源滤镜，我们可以将之想象成手电筒光源。它的光发自手电筒的发光体，用 x、y、z 表示光源的坐标点，这和点光源 fePointLight 是一致的。既然是聚光灯，就需要定义光射出去的方向，用 pointsAtX、pointsAtY、pointsAtZ 表示聚光灯朝向的坐标点，聚光灯的光柱宽度用角度限制，即圆锥形角度，属性名为 limitingConeAngle，角度越大光柱越大。x、y、z、pointsAtX、pointsAtY、pointsAtZ 和 limitingConeAngle 各属性，以及父滤镜的相关属性、合成滤镜的设定等等，它们是共同作用的，任何一个参数值的改变，都不同程度会改变光柱的渲染形态。

以下示例，f1 滤镜组使用的是镜面反射滤镜，光源来自聚光灯滤镜，它们直接作用于200*200的矩形，在其上产生聚光灯效果：

代码：

<svg width="200" height="200" style="border: 1px solid gray;">

	<!-- f1滤镜 --!>
	<filter id="f1">
		<!-- 反射滤镜 : 镜面反射 feSpecularLighting -->
		<feSpecularLighting in="SourceGraphic" specularExponent="1" specularConstant="10" lighting-color="blue">
			<!-- 光源 : 聚光灯 feSpotLight -->
			<feSpotLight
				x="0"
				y="0"
				z="5"
				pointsAtX="200"
				pointsAtY="150"
				pointsAtZ="0"
				limitingConeAngle="10"></feSpotLight>
		</feSpecularLighting>
	</filter>

	<!-- 尺寸为完整svg画布的矩形绑定 f1 滤镜 -->
	<rect x="0" y="0" width="100%" height="100%" filter="url(#f1)"></rect>

</svg>

因为没有使用合成滤镜，光滤镜组直接作用于矩形，矩形的默认 fill 颜色的黑色没有了，rect矩形的表现形态由光滤镜组替代。

红影

聚光灯啊，需要设置的数值还是挺多的

马黑黑

红影 发表于 2023-10-22 13:22
聚光灯啊，需要设置的数值还是挺多的

其实都好懂

红影

马黑黑 发表于 2023-10-22 22:42
其实都好懂

嗯嗯，这个好，还让光有了方向

马黑黑

红影 发表于 2023-10-22 23:48
嗯嗯，这个好，还让光有了方向

光都有方向。点光源的光，向四周发射，就像太阳；聚光灯光源就像手电筒，通过灯头装置（pointsAtX/Y/Z）让它朝一个方向行进。

红影

马黑黑 发表于 2023-10-23 08:30
光都有方向。点光源的光，向四周发射，就像太阳；聚光灯光源就像手电筒，通过灯头装置（pointsAtX/Y/Z） ...

原来代码里把光也按自然方式做了区分啊。

马黑黑

红影 发表于 2023-10-23 09:52
原来代码里把光也按自然方式做了区分啊。

一般都尽量这么做

马黑黑

红影 发表于 2023-10-22 23:48
嗯嗯，这个好，还让光有了方向

说过的，光都有方向

红影

马黑黑 发表于 2023-10-23 11:16
一般都尽量这么做

limitingConeAngle 角度是按这条线中心往两边散开的角度吧？
从光源点出发到无穷远？

红影

马黑黑 发表于 2023-10-23 11:18
说过的，光都有方向

“用 x、y、z 表示光源的坐标点”，我看x y都取的0，为什么光源点不是在0位置上？
为什么z="5"，pointsAtZ="0" 这个有什么说道么？圆锥形角度只是平面散开？和z有关系么？

红影

又仔细看了看，发现越看，十万个为什么就越多

马黑黑

红影 发表于 2023-10-23 14:46
又仔细看了看，发现越看，十万个为什么就越多

这是正常的。全网，都没有一篇文章能完整地介绍滤镜的全部参数，官网绝大多数滤镜都是简介。

马黑黑

红影 发表于 2023-10-23 14:45
“用 x、y、z 表示光源的坐标点”，我看x y都取的0，为什么光源点不是在0位置上？
为什么z="5"，pointsA ...

这很正常。就像手电筒一样，射出来的光，在一定距离里，看到的是与光源不衔接的光柱，射灯也存在这样的现象。

马黑黑

红影 发表于 2023-10-23 14:42
limitingConeAngle 角度是按这条线中心往两边散开的角度吧？
从光源点出发到无穷远？

是的

红影

马黑黑 发表于 2023-10-23 23:08
这是正常的。全网，都没有一篇文章能完整地介绍滤镜的全部参数，官网绝大多数滤镜都是简介。

估计这个太复杂，讲清楚太难了吧。

红影

马黑黑 发表于 2023-10-23 23:09
这很正常。就像手电筒一样，射出来的光，在一定距离里，看到的是与光源不衔接的光柱，射灯也存在这样的现 ...

哦哦，知道了。只是不知道那个点离开左上角距离是多少。

红影

马黑黑 发表于 2023-10-23 23:09
是的

一开始我以为是这条线开始顺时针转，后来发现我弄错了，是用这条线为中心两边散的。

马黑黑

红影 发表于 2023-10-24 13:55
一开始我以为是这条线开始顺时针转，后来发现我弄错了，是用这条线为中心两边散的。

慢慢体会

马黑黑

红影 发表于 2023-10-24 13:54
哦哦，知道了。只是不知道那个点离开左上角距离是多少。

慢慢体会

马黑黑

红影 发表于 2023-10-24 13:53
估计这个太复杂，讲清楚太难了吧。

设计的人和写文档的人估计不是一个人