SVG filter bump mapping with diffuse lighting spills out -


i trying create bump mapping effect in svg using luminancetoalpha conversion of image , altering location of point light on overall surface.

here short fiddle created, https://jsfiddle.net/5g2qncq8/6/

code snippet:

<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> 

when scroll on image, location of point light updated , image goes darker pointer further away it. problem have is, while house polygon shaped, see greyish rectangular area (over house) when point light away. why happen?

it disappears when light shone on top of house. can suggest ways rid of grey area?

i know missing obvious. or pointers appreciated. cheers!

this happens because feblend formula cr = (1-qa)*cb + (1-qb)ca + cacb. if light (say opaque mid-grey) , transparent black background b, color of pixel (1-1)(.0/.0/.0) + (1-0)(0.5/.05/.05) +.5*.0 ==>> grey.

and opacity qr = 1 - (1-qa)(1-qb): 1 - (1-1)(1-0) = 1.

in other words, if have @ least 1 opaque source, you're getting opaque result.

you can clip out background adding:

  <fecomposite operator="in" in2="sourcegraphic"/> 

to end of filter.


Comments

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -