svg : 光滤镜（四）
<style>.ma p, .ma pre, .ma svg { margin: 8px 0; }
.rred { color: red; }
.ma > pre { padding: 16px; background: #efefef; font: normal 16px monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; line-height:1.5em; }
</style>
<div class="ma">
<p>本节演示漫射滤镜的 diffuseConstant 属性，该属性我想可以叫做漫射指数，表示在Phong光照模型中的kd值，可以是任意非负数；在 SVG, 它用于确定给定像素的最终 RGB 值。灯光颜色越亮，这个数字应该越小。下面我们分别使用聚光灯滤镜、点光源滤镜做光源，展示由 feDiffuseLighting 滤镜模拟的漫反射环境下，不同的漫射指数值对光滤镜组的影响。</p>
<h3>一、聚光灯光源</h3>
<pre>
<svg width="200" height="200" style="border: 1px solid gray;">
<filter id="spot">
<feDiffuseLighting in="SourceGraphic" surfaceScale="2" <span class="rred">diffuseConstant="5"</span> 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>
</pre>
<p>diffuseConstant 缺省时漫射滤镜默认使用 1，上面代码，其值为 5，可以通过调节不同的值，体会一下聚光灯光源在漫射滤镜环境下的效果：</p>
<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>
<p>
<input id="rgDiff" type="range" min="1" max="10" value="5" />
<output id="outMsg">diffuseConstant="5"</output>
</p>
<h3>二、点光源</h3>
<p>以下，核心代码不变，只是换上了点光源，点光源的中心坐标放在矩形中央：</p>
<pre><fePointLight x="0" y="0" z="10"></fePointLight></pre>
<svg width="200" height="200" style="border: 1px solid gray;">
<filter id="point">
<feDiffuseLighting in="SourceGraphic" surfaceScale="2" diffuseConstant="5" lighting-color="orange" id="feDiff2">
<fePointLight x="100" y="100" z="10"></fePointLight>
</feDiffuseLighting>
</filter>
<rect x="0" y="0" width="100%" height="100%" filter="url(#point)"></rect>
</svg>
<p>
<input id="rgDiff2" type="range" min="1" max="10" value="5" />
<output id="outMsg2">diffuseConstant="5"</output>
</p>
<p>【附】关于Phong光照模型：该模型属于简单光照模型，考虑物体对直接光照的反射作用，认为环境光是常量，没有考虑物体之间相互的反射光，物体间的反射光只用环境光表示。Phong模型以纯几何方法简单有效地模拟了漫反射和高光（镜面），被广泛应用于计算机图形学，其着色方法比较准确逼真。Phong模型创建于1975年，由Bui Tuong Phong（裴祥风）在攻读博士期间完成。可惜作者后来因白血病英年早逝，享年仅33岁。</p>
</div>
<script>
rgDiff.oninput = () => {
feDiff.setAttribute('diffuseConstant',rgDiff.value);
outMsg.innerText = 'diffuseConstant="' + rgDiff.value + '"';
};
rgDiff2.oninput = () => {
feDiff2.setAttribute('diffuseConstant',rgDiff2.value);
outMsg2.innerText = 'diffuseConstant="' + rgDiff2.value + '"';
};
</script>
通过这个可见的演示来感受漫射指数的变化效果，特别好。{:4_199:} “灯光颜色越亮，这个数字应该越小。”看着怎么是反的，好像数字越大灯越亮啊{:4_173:} 红影 发表于 2023-10-23 09:39
“灯光颜色越亮，这个数字应该越小。”看着怎么是反的，好像数字越大灯越亮啊
官网说的。不过，它可能是指 RGB 通道的数字。 红影 发表于 2023-10-23 09:36
通过这个可见的演示来感受漫射指数的变化效果，特别好。
复习一下 马黑黑 发表于 2023-10-23 11:17
官网说的。不过，它可能是指 RGB 通道的数字。
哦哦，有可能指向不同，并不是这里看到的那样。 马黑黑 发表于 2023-10-23 11:18
复习一下
复习什么啊，讲漫反射滤镜的时候，根本就没提到这个diffuseConstant 属性啊{:4_173:} 红影 发表于 2023-10-23 14:47
哦哦，有可能指向不同，并不是这里看到的那样。
我读了英文原文的文档，发现说的很简单。此处它确实也这么说，没有指明具体数值的指向。 马黑黑 发表于 2023-10-23 23:07
我读了英文原文的文档，发现说的很简单。此处它确实也这么说，没有指明具体数值的指向。
不去管了，反正知道带来的感觉是什么就可以了。 红影 发表于 2023-10-24 13:52
不去管了，反正知道带来的感觉是什么就可以了。
那是那是 马黑黑 发表于 2023-10-24 19:59
那是那是
意会比言传更重要{:4_173:} 红影 发表于 2023-10-24 22:23
意会比言传更重要
额，应该都重要 马黑黑 发表于 2023-10-25 19:39
额，应该都重要
说得也是，尤其不懂的时候，肯定需要言传的。 红影 发表于 2023-10-25 22:26
说得也是，尤其不懂的时候，肯定需要言传的。
{:4_181:} 马黑黑 发表于 2023-10-25 22:26
{:4_181:} 红影 发表于 2023-10-25 23:32
早上嚎 马黑黑 发表于 2023-10-26 07:42
早上嚎
一起嚎{:4_173:} 红影 发表于 2023-10-26 13:44
一起嚎
嚎嚎更健康 马黑黑 发表于 2023-10-26 22:43
嚎嚎更健康
这个是讲聚光灯的帖子，在聚光灯下嚎，怎么想怎么喜感{:4_170:} 红影 发表于 2023-10-27 10:52
这个是讲聚光灯的帖子，在聚光灯下嚎，怎么想怎么喜感
挺好挺好