svg : 光滤镜（四）

马黑黑 · 发表于 2023-10-23 08:31

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本节演示漫射滤镜的 diffuseConstant 属性，该属性我想可以叫做漫射指数，表示在Phong光照模型中的kd值，可以是任意非负数；在 SVG, 它用于确定给定像素的最终 RGB 值。灯光颜色越亮，这个数字应该越小。下面我们分别使用聚光灯滤镜、点光源滤镜做光源，展示由 feDiffuseLighting 滤镜模拟的漫反射环境下，不同的漫射指数值对光滤镜组的影响。

一、聚光灯光源

<svg width="200" height="200" style="border: 1px solid gray;">
	<filter id="spot">
		<feDiffuseLighting in="SourceGraphic" surfaceScale="2" diffuseConstant="5" lighting-color="orange" id="feDiff">
			<feSpotLight
				x="0"
				y="0"
				z="10"
				pointsAtX="120"
				pointsAtY="150"
				pointsAtZ="0"
				limitingConeAngle="20">
			</feSpotLight>
		</feDiffuseLighting>
	</filter>
	<rect x="0" y="0" width="100%" height="100%" filter="url(#spot)"></rect>
</svg>

diffuseConstant 缺省时漫射滤镜默认使用 1，上面代码，其值为 5，可以通过调节不同的值，体会一下聚光灯光源在漫射滤镜环境下的效果：

diffuseConstant="5"

二、点光源

以下，核心代码不变，只是换上了点光源，点光源的中心坐标放在矩形中央：

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

diffuseConstant="5"

【附】关于Phong光照模型：该模型属于简单光照模型，考虑物体对直接光照的反射作用，认为环境光是常量，没有考虑物体之间相互的反射光，物体间的反射光只用环境光表示。Phong模型以纯几何方法简单有效地模拟了漫反射和高光（镜面），被广泛应用于计算机图形学，其着色方法比较准确逼真。Phong模型创建于1975年，由Bui Tuong Phong（裴祥风）在攻读博士期间完成。可惜作者后来因白血病英年早逝，享年仅33岁。