Kurz SVG – bitmapové efekty (elementární grafické filtry 2.)

V předchozích článcích jsme se věnovali obecné teorii bitmapových efektů v SVG a rozebrali jsme si některá primitiva základních bitmapových efektů. V tomto článku budeme pokračovat podrobným popisem dalších grafických filtrů.

Přehled elementárních grafických filtrů v tomto článku

Kompletní přehled naleznete v článku Kurz SVG – bitmapové efekty (elementární grafické filtry 1.), kde jsou uvedeny také jejich společné atributy a další potřebné informace.

• Elementární bitmapové filtry
  • Filter primitive „feFlood“ – vyplnění plochy
  • Filter primitive „feImage“ – vložení další grafiky
  • Filter primitive „feOffset“ – posuv
  • Filter primitive „feDisplacementMap“ – deformace
  • Filter primitive „feTile“ – vyplnění vzorkem
  • Filter primitive „feGaussianBlur“ – rozostření
  • Filter primitive „feMorphology“ – nasílení / zúžení
  • Filter primitive „feTurbulence“ – generování šumu
  • Filter primitive „feSpecularLighting“ – osvětlovací efekt
  • Filter primitive „feDiffuseLighting“ – osvětlovací efekt

Filter primitive „feFlood“

Vyplní oblast filtru konstantní barvou a průhledností.

Atributy:

• flood-color – barva výplně, krom uvedení barvy lze použít klíčové slovo „currentColor“ (umožňuje použití barvy nastavené v atributu „color“, což je dobré například pro převzetí barvy nastylované v nadřazeném XHTML kódu); výchozí hodnota: black
• flood-opacity – průhlednost výplně; výchozí hodnota: 1

<feFlood flood-color=“white“ flood-opacity=“1″ result=“flood“/>

Filter primitive „feImage“

Vložení obrazu do pracovní oblasti filtru. Vkládaným obrazem může být libovolný vektorový objekt v rámci SVG souboru, ale podporováno je i externí vkládání formátů JPEG, PNG a dokonce i SVG samotného. Posledně jmenovanou variantu v současnosti zatím příliš nedoporučuji, jelikož s ní mnoho současných prohlížečů – díky obtížnosti její implementace – bude mít problémy.

Chování filtru a jeho implementace by měla být shodná s prvkem „image“ pro případ externího odkazu. Pro případ interního odkazu bude chování shodné s elementem „use“.

Atributy:

• xlink:href – odkaz na externí obraz nebo též na pojmenovaný objekt uvnitř SVG souboru

<feImage xlink:href=“#vectorObject“ result=“bitmap“/>

Filter primitive „feOffset“

Filtr posouvá bitmapový rastr ve směru X nebo Y. Tato operace se očividně nabízí například k výrobě oblíbených stínů…

Photoshop: Tuto funkci najdete v menu pod „Filter/Other/Offset“

Pokud souřadnicový systém, ve kterém filtr pracuje, neodpovídá pixlům výstupního zařízení, je dobré si uvědomit, že může dojít k přepočtům (interpolaci) obrazu. Při takové interpolaci se (většinou zbytečně) zvyšuje časová a výkonová spotřeba filtru. Takže doporučuji používat atribut image-rendering ovlivňující interpolaci bitmapových obrazů a filtrů – a nastavit jej na maximální rychlost: image-rendering="optimizeSpeed".

Tato ukázka využívá posuv a rozostření (originální SVG, cca 1 kB)

Atributy:

• dx – posun ve směru osy X (připomínám, že se opět jedná o aktuálně nastavený souřadnicový systém, jak je v SVG dobrým zvykem)
• dy – posun ve směru osy Y

Výpis XML kódu:

<?xml version=“1.0″?>
<svg width=“320px“ viewBox=“0 0 320 200″
  xmlns=“http://www.w3.org/2000/svg“ version=“1.1″
  xmlns:xlink=“http://www.w3.org/1999/xlink“>
  <title>feOffset – priklad pouziti k vyrobe stinu – www.interval.cz</title>
  <desc>
    Povsimnete si prosim nastaveni rozmeru u prvku
    „filter“ – vzdy se snazime o jejich minimalizaci!
  </desc>
  <filter id=“shadow30_15″
      x=“-2%“ y=“-4%“ width=“128%“ height=“128%“>
    <feOffset in=“SourceGraphic“ dx=“30″ dy=“15″ />
    <feGaussianBlur result=“blur“ stdDeviation=“10″ />
    <feBlend in=“SourceGraphic“ in2=“blur“ mode=“normal“ />
  </filter>
  <g stroke-width=“7″ filter=“url(#shadow30_15)“ image-rendering=“optimizeSpeed“>
    <rect x=“53″ y=“10″ width=“100″ height=“50″
      stroke=“blue“ fill=“aquamarine“ />
    <rect x=“160″ y=“33″ width=“100″ height=“50″
      stroke=“forestgreen“ fill=“palegreen“ />
    <rect x=“20″ y=“67″ width=“100″ height=“50″
      stroke=“red“ fill=“plum“ />
    <rect x=“127″ y=“90″ width=“100″ height=“50″
      stroke=“goldenrod“ fill=“peachpuff“ />
  </g>
</svg>

Filter primitive „feDisplacementMap“

Filtr získá výsledek tak, že používá hodnoty pixlů ze zdroje in2 k deformaci (posouvání) jednotlivých obrazových bodů na vstupu in. Mezi praktická využití bych mohl zařadit kupříkladu simulaci lomu světla na trojrozměrném objektu (zdeformování odrazu objektu na zvlněné vodní hladině nebo obraz viděný přes tvarované sklo).

Ačkoli to tak nemusí na první pohled vypadat, patří tento filtr mezi nejzajímavější a nejvíce „kreativní“ grafické funkce. Pomocí něho lze realizovat v podstatě všechny filtry Photoshopu ze skupiny „Distort“ (Deformace).

Věřte nebo ne, i toto je feDisplacementMap (originální SVG, cca 1 kB)

Kouzlo tkví v použití šikovné deformační mapy (displace map). Spoustu takových užitečných vzorků můžete najít ve všech verzích Photoshopu v následujících složkách (podadresářích): \Photoshop\Plug-ins\Displacement maps\, \Photoshop\Presets\Textures\, \Photoshop\Presets\Patterns\.

Pozn. aut.: Velice příhodným zdrojem „displace“ map je rovněž SVG filtr feTurbulence, kterým snadno dosáhnete přirozeného náhodného zvlnění či roztřesení filtrovaného obrázku…Photoshop samotný také obsahuje velmi podobný analogický filtr (v nabídce „Filter/Distort/Displace“).

Pravděpodobně jste již zaregistrovali, že většina displace map distribuovaných s Photoshopem má modrofialový nádech. Vysvětlení je jednoduché a velmi logické – R-kanál slouží pro posun v ose X a následující G-kanál obdobně pro osu Y. Kanál modré je vynulován. Tak proto.

Photoshop: Jeden z mnoha efektů dosažitelných pomocí „displace map“

Pro šťouraly tu mám matematické vyjádření příslušné 2D transformace obrazu:

VÝSTUP(x,y) = IN( x + scale*(Cx(x,y)-0.5), y + scale*(Cy(x,y)-0.5) )

Zde Cx(x,y) je hodnota barevné složky obrazu in2 ovlivňující X-posuv a Cy(x,y) je hodnota barevné složky obrazu in2 ovlivňující Y-posuv.

I tento filtr je ovlivněn nastavením atributu image-rendering.

Atributy:

• scale – měřítko deformace (výchozí hodnota je 0)
• in2 – druhá vstupní bitmapa, která určuje deformace obrazu v in
• xChannelSelector – určuje, který barvový kanál z in2 bude určovat deformace ve směru X; možné hodnoty: R, G, B, A
• yChannelSelector – určuje, který barvový kanál z in2 bude určovat deformace ve směru Y; možné hodnoty: R, G, B, A

Zde je zdrojový kód k SVG grafice umístěné o něco výše:

<?xml version=“1.0″?>
<!DOCTYPE svg PUBLIC „-//W3C//DTD SVG 1.1//EN“
          „http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“>
<svg width=“320px“ viewBox=“0 0 320 320″
     xmlns=“http://www.w3.org/2000/svg“ version=“1.1″>
  <title>
  feDisplacementMap – efekt „ZigZag“ – www.interval.cz
  </title>
  <desc>
  Bitmapu definujici „rozvlneni“ si tomto pripade
  vytvorime umele z kruhoveho prechodu barev.
  Vysledkem je efekt znamy z Photoshopu jako „ZigZag“.
  </desc>
<defs>
  <!– MH: tento kruhovy prechod vytvori „displace“ mapu pro deformacni efekt –>
  <radialGradient id=’gradient‘ spreadMethod=’reflect‘
    gradientUnits=’objectBoundingBox‘
    cx=’50%‘ cy=’50%‘ r=’5%‘ fx=’50%‘ fy=’50%‘>
    <stop id=’c1′ offset=’5%‘ stop-color=’red‘ stop-opacity=’1’/>
    <stop id=’c2′ offset=’95%‘ stop-color=’yellow‘ stop-opacity=’1’/>
  </radialGradient>
  <!– MH: na tomto prechodu si ukazeme jak muze byt vysledek pusobivy –>
  <linearGradient id=’gr‘ gradientUnits=’objectBoundingBox‘
    x1=’0%‘ y1=’0%‘ x2=’100%‘ y2=’0%‘>
    <stop offset=’00%‘ stop-color=’red‘ stop-opacity=’1’/>
    <stop offset=’25%‘ stop-color=’blue‘ stop-opacity=’1’/>
    <stop offset=’50%‘ stop-color=’green‘ stop-opacity=’1’/>
    <stop offset=’75%‘ stop-color=’yellow‘ stop-opacity=’1’/>
    <stop offset=’99%‘ stop-color=’red‘ stop-opacity=’1’/>
  </linearGradient>
  <g id=’displaceMap‘>
    <rect x=’0′ y=’000′ width=’320′ height=’160′ fill=’url(#gradient)’/>
    <rect x=’0′ y=’160′ width=’320′ height=’160′ fill=’url(#gradient)’/>
  </g>
  <filter id=’ZigZag44′ filterUnits=’objectBoundingBox‘
    x=’0%‘ y=’0%‘ width=’100%‘ height=’100%‘>
    <!– MH: zde si vytvorime „displace“ mapu z vektoroveho objektu –>
    <!– MH: (viz id=“displaceMap“) vyplneneho kruhovym prechodem –>
    <feImage xlink:href=’#displaceMap‘ result=’map’/>
    <!– MH: „scale“ urcuje velikost efektu –>
    <feDisplacementMap scale=’44‘
      xChannelSelector=’G‘ yChannelSelector=’G‘
      in2=’map‘ in=’SourceGraphic’/>
  </filter>
</defs>
<!– MH: Tady jsou dve ukazky. Velmi efektni efekt. –>
<rect x=’0′ y=’0′ width=’320′ height=’160′
  fill=’url(#gr)‘ filter=’url(#ZigZag44)’/>
<image x=’0′ y=’160′ width=’320′ height=’160′
  xlink:href=’svg.gif‘ filter=’url(#ZigZag44)’/>
</svg>

Filter primitive „feTile“

Vyplní cílovou plochu opakujícími se kopiemi zdrojové bitmapy. Jinými slovy je to obdoba výplně pomocí vzorku či textury.

• x, y, width, height – vyplňovaná oblast

Plocha vyplněná kopiemi SVG „tlačítka“ (originální SVG, cca 1 kB)

Je logické, že tato operace má význam pro případ, kdy je vstupní obraz menší než výstupní.

<?xml version=“1.0″?>
<!DOCTYPE svg PUBLIC „-//W3C//DTD SVG 1.1//EN“
          „http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“>
<svg width=“320px“ viewBox=“0 0 320 240″
     xmlns=“http://www.w3.org/2000/svg“ version=“1.1″>
  <title>feTile – vykresleni textury – www.interval.cz</title>
  <defs>  
     <filter id=“tile“ filterUnits=“userSpaceOnUse“>
       <feImage xlink:href=“svg.gif“
         x=“8″ y=“0″ width=“88″ height=“31″ result=“img“/>
       <feTile x=“0″ y=“0″ width=“320″ height=“210″ in=“img“/>
     </filter>
  </defs>
  <rect x=“0″ y=“0″ width=“320″ height=“240″ filter=“url(#tile)“/>
</svg>

Filter primitive „feGaussianBlur“

Gausovské rozostření – jeden z naprosto základních a nejpoužívanějších efektů vůbec.

Klasické gausovské rozostření může mít v SVG pro každou osu jinou velikost (originální SVG, cca 1 kB)

Prakticky používaná výpočetní konvoluční matice je aproximací výrazu:

H(x) = exp( -x² / (2*s²) ) / sqrt(2*pi*s²)

Zde s je standardní odchylka nastavená v atributu stdDeviation.

Atributy:

• stdDeviation – standardní odchylka >= 0 (z praktického hlediska řekněme velikost rozostření), uvedeny mohou být dvě hodnoty, pro každou souřadnicovou osu zvlášť; pozor, hodnota 0 vypne filtr a na výstupu se potom objeví 0, tedy průhledná černá

<filter id=“blurX“ filterUnits=“objectBoundingBox“
  x=“-25%“ y=“-3%“ width=“150%“ height=“106%“>
    <!– „stdDeviation“ controls size of blur effect (X and Y) –>
    <feGaussianBlur stdDeviation=“20 1″/>
</filter>

Filter primitive „feMorphology“

Výsledek práce filtru (originální SVG, cca 1 kB)

Provádí „ztučnění“ nebo naopak „ztenčení“ nakresleného obrázku. Nejčastěji jej nejspíše využijete pro úpravy alfa kanálu.

Pozn. aut.: Pro lepší představu vám určitě pomůže, když si vzpomenete na odpovídající funkce Photoshopu, jež lze nalézt v nabídce „Filter/Other/Maximum resp. Minimum“.

Photoshop: Ekvivalent SVG filtru „feMorphology“

Atributy:

• operator – možné hodnoty: erode (zúžení), dilate (rozšíření)
• radius – poloměr operace (nebo dva poloměry – pro druhou souřadnicovou osu totiž může být hodnota jiná); výchozí hodnota 0 filtr vypne, tj. výsledkem bude průhledná černá

Zápis vypadá v praxi takto:

<filter id=“Dilate3″>
  <feMorphology operator=“dilate“ in=“SourceGraphic“ radius=“4″ />
</filter>

Filter primitive „feTurbulence“

Filtr generuje obraz pomocí takzvané Perlin turbulence funkce. Tu lze použít k syntéze umělých textur napodobujících přírodu, například šumu, oblak nebo mramoru.

Upravil jsem demonstrační ukázku ze specifikace SVG tak, aby byla více názornější – jeden obrázek pro režim „turbulence“ a druhý pro režim „fractalNoise“. Velice doporučuji oba obrázky zkoumat se zvětšením v odpovídajícím SVG prohlížeči (ASV, Batik).

Vidíme, že v režimu „turbulence“ ovlivňuje parametr baseFrequency hustotu nejvýraznějších světlých linií. Tyto linie naopak chybí v režimu „fractalNoise“ – kterýžto má současně velmi blízko k filtru „Clouds“ alias „Oblaka“, důvěrně známému uživatelům Photoshopu.

Filtr v režimu „turbulence“ (originální SVG, cca 1 kB)

Filtr v režimu „fractalNoise“ (originální SVG, cca 1 kB)

Příklad zápisu:

<filter id=“Turb1″ filterUnits=“objectBoundingBox“
        x=“0%“ y=“0%“ width=“100%“ height=“100%“>
  <feTurbulence type=“turbulence“ baseFrequency=“0.03″ numOctaves=“1″/>
</filter>

Pozn. aut.: (Profesionálním uživatelům Photoshopu se omlouvám za nošení dříví do lesa v poznámce k praktickému využití.) Výsledek tohoto filtru berte především jako určitý polotovar vhodný jako základ k přehršli dalších vizuálních efektů. Velmi často se bude výsledek upravovat jasově a barevně filtry, které už jsme probrali v tomto kurzu o něco výše…

Velmi zajímavé výstupy například dosáhnete, použijete-li feTurbulence k vygenerování bumpmapy pro filtr feDiffuseLighting. Tuto možnost demonstrují následující příklady, které jsem vytvořil velmi primitivně a prostě tak, že jsem výstup předchozích ukázek nechal zpracovat ve zmíněném osvětlovacím filtru.

Filtr v režimu „turbulence“ v této ukázce funguje jako „bumpmap“ pro osvětlovací filtr (originální SVG, cca 1 kB)

Filtr v režimu „fractalNoise“ zde funguje jako „bumpmap“ pro osvětlovací filtr (originální SVG, cca 1 kB)

Už víte jak simulovat nahrubo otesaný kámen nebo třeba písečné duny?

Pozn. aut.: Teorii lze nalézt v odborné literatuře: „Perlin turbulence function“ – „Texturing and Modeling“, Ebert et al, AP Professional, 1994.

Atributy:

• type – typ funkce určuje zda se bude generovat šum (fractalNoise) nebo víření (turbulence)
• baseFrequency – základní kmitočet šumové funkce, pokud jsou zapsány dvě hodnoty, tak se druhá uplatní pro směr osy Y, výchozí hodnota je 0
• numOctaves – druhý parametr šumové funkce, výchozí hodnota 1
• seed – počáteční startovací číslo pro generátor pseudonáhodných čísel, výchozí hodnota je 0
• stitchTiles – tento parametr přijde ke slovu pokud bychom chtěli bitmapu vygenerovanou touto funkcí využít ke skládání větší textury (pomocí filtru feTile); možné hodnoty atributu: noStitch (výchozí), stitch (pokud je nastavena tato hodnota, tak prohlížeč automaticky přizpůsobí některé parametry – jako třeba kmitočet – aby se barvy na protilehlých okrajích shodovaly a dosáhlo se hladkého, bezešvého napojení na okrajích jednotlivých dílků)

Filter primitive „feDiffuseLighting“

Tento a následující filtr feSpecularLighting používá Phongův osvětlovací model k simulaci reálného osvětlení skutečného plastického (3D) povrchu. Teoretické podrobnosti naleznete ve všech učebnicích počítačové grafiky (například „Algoritmy počítačové grafiky“; Sochor J., Žára J., Beneš B.; Vydavatelství ČVUT, 1996; kap. 11.1.1). Detaily praktické realizace v SVG prohlížečích obsahuje specifikace SVG.

Pomocí tohoto efektu lze mimo jiné získat takové ty úžasné plastické objekty s realistickými světelnými odlesky.

Bodový zdroj světla (originální SVG, cca 1 kB)

Zápis XML:

<filter id=“diffPoint“ x=“0%“ y=“0%“ width=“100%“ height=“100%“>
  <feGaussianBlur stdDeviation=“1″/>
  <feDiffuseLighting surfaceScale=“3″ lighting-color=“#BFB“
    diffuseConstant=“1″>
    <fePointLight x=“125″ y=“75″ z=“25″/>
  </feDiffuseLighting>
</filter>

Světelný zdroj typu reflektor (originální SVG, cca 1 kB)

Zápis XML:

<filter id=“diffSpot“ x=“0%“ y=“0%“ width=“100%“ height=“100%“>
  <feGaussianBlur stdDeviation=“1″ />
  <feDiffuseLighting surfaceScale=“3″ lighting-color=“#FFB“
    diffuseConstant=“1″>
    <feSpotLight x=“0″ y=“0″ z=“120″
      pointsAtX=“125″ pointsAtY=“150″ pointsAtZ=“-30″
      specularExponent=“44″ limitingConeAngle=“90″/>
  </feDiffuseLighting>
</filter>

Pro snadnější představu vám nabízím srovnání s funkcí Photoshopu, která vykonává téměř identickou práci a která se skutečně prakticky používá k dosažení efektu zmíněného v předchozím odstavci. (I když po zavedení takzvaných efektů vrstvy četnost jejího nasazení samozřejmě výrazně poklesla.)

Odpovídající filtr najdete ve Photoshopu pod názvem „Lighting Effects“ (Světelné efekty)

Atributy:

• surfaceScale – měřítko určující velikost nerovností osvětlovaného povrchu (bumpmap uložené v alfa kanálu na vstupu in), výchozí hodnota 1
• diffuseConstant – difusní konstanta (větší než 0) pro odraz světla v Phongově modelu, výchozí hodnota 1
• kernelUnitLength – aby byla zajištěna škálovatelnost a nezávislost filtru na rozlišení, je dobré zde nastavit, jak velká je vlastně jedna buňka matice; lze uvést jednu nebo dvě hodnoty (pokud se měřítko ve směru Y liší); jestliže hodnotu nezapíšete, SVG prohlížeč předpokládá, že jedna buňka konvoluční matice odpovídá jednomu pixlu obrázku, což je možná rychlejší na výpočet, ale výsledek se bude lišit podle rozlišení výstupního zařízení

Filter primitive „feSpecularLighting“

Tento a předcházejícífiltr feDiffuseLighting používá Phongův osvětlovací model k simulaci nasvícení trojrozměrného povrchu. Předcházející filtr feDiffuseLighting počítá difusní složku (stínování) Phongova modelu, zatímco feSpecularLighting počítá takzvanou „specular“ složku (to jsou v podstatě odlesky).

Bodový zdroj světla (originální SVG, cca 1 kB)

Zápis XML:

<filter id=“specPoint“ x=“0%“ y=“0%“ width=“100%“ height=“100%“>
  <feGaussianBlur stdDeviation=“1″/>
  <feSpecularLighting surfaceScale=“3″ lighting-color=“#BFB“
    specularConstant=“3″ specularExponent=“9″>
    <fePointLight x=“125″ y=“75″ z=“25″/>
  </feSpecularLighting>
</filter>

Světelný zdroj typu reflektor (originální SVG, cca 1 kB)

Zápis XML:

<filter id=“specSpot“ x=“0%“ y=“0%“ width=“100%“ height=“100%“>
  <feGaussianBlur stdDeviation=“1″ />
  <feSpecularLighting surfaceScale=“3″ lighting-color=“#FFB“
    specularConstant=“3″ specularExponent=“9″>
    <feSpotLight x=“0″ y=“0″ z=“120″
      pointsAtX=“125″ pointsAtY=“150″ pointsAtZ=“-30″
      specularExponent=“44″ limitingConeAngle=“90″/>
  </feSpecularLighting>
</filter>

Pozn. aut.: Vzhledem k tomu, že se feDiffuseLighting a feSpecularLighting často využívají společně, měly by tohoto faktu pokročilejší SVG prohlížeče využít k optimalizaci výpočtů a neprovádět opakující se operace vícenásobně…

Atributy:

• surfaceScale – měřítko určující velikost nerovností osvětlovaného povrchu (bumpmap uložené v alfa kanálu na vstupu in), výchozí hodnota 1
• specularConstant – „specular“ konstanta (větší než 0) pro odraz světla v Phongově modelu, výchozí hodnota 1
• specularExponent – „specular“ exponent v Phongově matematickém výrazu, platí: čím vyšší hodnota, tím vyšší lesklost materiálu virtuálního povrchu, povolený rozsah hodnot v SVG: od 1.0 do 128.0, výchozí hodnota 1
• lighting-color – definuje barvu světla u všech třech typů osvětlení. Nabývá možných hodnot: currentColor a dále všech možných RGB hodnot povolených v SVG specifikaci; výchozí hodnota: white (bílá)
• kernelUnitLength – aby byla zajištěna škálovatelnost a nezávislost filtru na rozlišení, je dobré zde nastavit, jak velká je vlastně jedna buňka matice; lze uvést jednu nebo dvě hodnoty (pokud se měřítko ve směru Y liší); jestliže hodnotu nezapíšete, SVG prohlížeč předpokládá, že jedna buňka konvoluční matice odpovídá jednomu pixlu obrázku, což je možná rychlejší na výpočet, ale výsledek se bude lišit podle rozlišení výstupního zařízení

Phongův vzorec ve 2D

Phongův model počítá osvětlení v trojrozměrném prostoru, ale my se pohybujeme v oblasti 2D grafiky. Nikterak překvapivě je proto osvětlovaný povrch umístěn do roviny X-Y se souřadnicí Z=0. Podmínkou je, že pozorovatel je jakoby „velmi daleko“ od zobrazeného povrchu, takže s dostatečnou přesností lze předpokládat, že jednotkový vektor ve směru jeho pohledu je v každém bodu (0,0,1).

Plasticita povrchu je simulována pomocí bumpmap, což je šedotónový alfa kanál a hodnota šedé v konkrétním bodu určuje virtuální výšku povrchu. (Ve Photoshopu je bumpmap nazývána „Texture Channel“.)

Zdroj světla

Filtr může počítat osvětlení způsobené jedním světelným zdrojem, který je definován pomocí vnořeného (synovského) objektu. A to feDistantLight, fePointLight nebo feSpotLight.

Zpracování výsledku a více světelných zdrojů

Filtr feDiffuseLighting počítá difusní složku (stínování) Phongova modelu, zatímco následující feSpecularLighting počítá takzvanou „specular“ složku (to jsou v podstatě odlesky).

Výsledná bitmapa obsahující nasvícení povrchu je po výpočtu vždy kompletně vyplněna. Alfa kanál výsledku přitom obsahuje – řekněme – váhu nasvícení pro každý bod bitmapy.

Nejvhodnější metodou, jak tuto světelnou mapu dále zpracovat, je sloučit ji s podkladem (texturou) pomocí filtrů feBlend nebo feComposite v režimu „arithmetic“. Více zdrojů světla lze velmi snadno přidat vícenásobným výpočtem podle Phongova modelu a sečtením jednotlivých světelných map ještě před sloučením s pozadím.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.