s464965/GRK_Room
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
72128eecb1
GRK_Room/cw 9/Zadania 9.html

184 lines
20 KiB
HTML
Raw Normal View History

init
2023-01-14 12:00:59 +01:00
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Zadania 9</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>
<link rel="stylesheet" href="style.css" />
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<h1 id="shadow-mapping">Shadow mapping</h1>
<p>Cienie są ważnym elementem oświetlenie. Dodają realizmu do sceny i dzięki nim łatwiej jest graczowi zorientować się w przestrzennym rozłożeniu obiektów. <img src="./img/shadows1.bmp" /> Na powyższym obrazku możesz zobaczyć, że dużo łatwiej jest okreśłić położenie kostek, gdy rzucają one cienie. Podstawową techniką generowania cieni jest <strong>shadow mapping</strong> i wiele bardziej zaawansowanych technik na niej bazuje.</p>
<p>Składa się on z dwóch kroków. W pierwszym obliczamy mapy głębokości z perspektywy źródła światła i zapisaniu do tekstury (tą teksturę nazywamy <em>shadowmap</em>), w drugim przy rysowaniu fragmentu porównujemy jego odległość do źródła światła z odległością zapisaną w teksturze.</p>
<p>Celem tych zajęć będzie dodanie cieni do początkowej sceny. W obecnym projekcie są 3 źródła światła: światło słoneczne, reflektor samolociku i lampa planetarna. W trakcie zajęć skupimy się na świetle słonecznym.</p>
<h2 id="mapa-głębokości---framebuffers">Mapa głębokości - Framebuffers</h2>
<p>Framebuffer to obiekt, do którego rednerowana jest scena w postaci tekstury. Do tej pory korzystaliśmy z domyślnego Famebuffora, który był wyświetlany na ekranie. Teraz potrzebujemy dodatkowy, który będzie przechwytywał mapę głębokości. Tworzymy go w następujący sposób</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode c++"><code class="sourceCode cpp"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a>glGenFramebuffers(<span class="dv">1</span>, &amp;depthMapFBO); </span></code></pre></div>
<p>Zmienna <code>depthMapFBO</code> jest jak to typu <code>unsignet int</code> i powinna być dostępna globalnie. Kolejnym krokiem jest stworzenie tekstury głębokości</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode c++"><code class="sourceCode cpp"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a>glGenTextures(<span class="dv">1</span>, &amp;depthMap);</span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a>glBindTexture(GL_TEXTURE_2D, depthMap);</span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a>glTexImage2D(GL_TEXTURE_2D, <span class="dv">0</span>, GL_DEPTH_COMPONENT, </span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a> SHADOW_WIDTH, SHADOW_HEIGHT, <span class="dv">0</span>, GL_DEPTH_COMPONENT, GL_FLOAT, NULL);</span>
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a>glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);</span>
<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a>glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);</span>
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a>glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); </span>
<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a>glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); </span></code></pre></div>
<p>Również zmienna <code>depthMap</code> jest jak to typu <code>unsignet int</code> i powinna być dostępna globalnie. Tworzymy teksturę, zaznaczamy, że jest to tekstura głębokości nadając jej format <code>GL_DEPTH_COMPONENT</code>. Parametry <code>SHADOW_WIDTH</code>, <code>SHADOW_HEIGHT</code> są ustalone globalnie i oba wynoszą 1024.</p>
<p>I w końcu podpinamy teksturę pod FBO.</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode c++"><code class="sourceCode cpp"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a>glBindFramebuffer(GL_FRAMEBUFFER, depthMapFBO);</span>
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a>glFramebufferTexture2D(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_TEXTURE_2D, depthMap, <span class="dv">0</span>);</span>
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a>glDrawBuffer(GL_NONE);</span>
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a>glReadBuffer(GL_NONE);</span>
<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a>glBindFramebuffer(GL_FRAMEBUFFER, <span class="dv">0</span>); </span></code></pre></div>
<h3 id="zadanie">Zadanie</h3>
<p>Utwórz funkcję <code>initDepthMap</code>, w której zainicjalizujesz mapę głębokości. Wywołaj ją w funkcji <code>init</code>.</p>
<h3 id="renderowanie-mapy-głębokości">Renderowanie mapy głębokości</h3>
<p>W tej części będziemy uzupełniać funkcję <code>renderShadowapSun</code>. Funkcja ma za zadanie zapisać w FBO mapę głębokości z perspektywy słońca. Pierwsze co musimy mieć, to parę shaderów, która będzie renderować mapę. Ponieważ jedyne co potrzebujemy tylko rozmieścić obiekty w odpowiednich miejscach. Shader wierzchołków ustawia tylko pozycję w oparciu o przesyłanie macierze.</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode c++"><code class="sourceCode cpp"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="pp">#</span><span class="er">version 430 core</span></span>
<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a>layout(location = <span class="dv">0</span>) in vec3 vertexPosition;</span>
<span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a>layout(location = <span class="dv">1</span>) in vec3 vertexNormal;</span>
<span id="cb4-5"><a href="#cb4-5" aria-hidden="true" tabindex="-1"></a>layout(location = <span class="dv">2</span>) in vec2 vertexTexCoord;</span>
<span id="cb4-6"><a href="#cb4-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb4-7"><a href="#cb4-7" aria-hidden="true" tabindex="-1"></a>uniform mat4 viewProjectionMatrix;</span>
<span id="cb4-8"><a href="#cb4-8" aria-hidden="true" tabindex="-1"></a>uniform mat4 modelMatrix;</span>
<span id="cb4-9"><a href="#cb4-9" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb4-10"><a href="#cb4-10" aria-hidden="true" tabindex="-1"></a><span class="dt">void</span> main()</span>
<span id="cb4-11"><a href="#cb4-11" aria-hidden="true" tabindex="-1"></a>{</span>
<span id="cb4-12"><a href="#cb4-12" aria-hidden="true" tabindex="-1"></a> gl_Position = viewProjectionMatrix * modelMatrix * vec4(vertexPosition, <span class="fl">1.0</span>);</span>
<span id="cb4-13"><a href="#cb4-13" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<p>Natomiast shader fragmentów jest pusty, ponieważ nic nie wysyłamy a głębokość zapisywana jest automatycznie.</p>
<div class="sourceCode" id="cb5"><pre class="sourceCode c++"><code class="sourceCode cpp"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="pp">#</span><span class="er">version 430 core</span></span>
<span id="cb5-2"><a href="#cb5-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb5-3"><a href="#cb5-3" aria-hidden="true" tabindex="-1"></a><span class="dt">void</span> main()</span>
<span id="cb5-4"><a href="#cb5-4" aria-hidden="true" tabindex="-1"></a>{ </span>
<span id="cb5-5"><a href="#cb5-5" aria-hidden="true" tabindex="-1"></a>} </span></code></pre></div>
<h3 id="zadanie-1">Zadanie</h3>
<p>Dodaj utwórz parę shaderów jak powyżej, załaduj je do zmiennej globalnej o nazwie <code>programDepth</code> i aktywuj go w funkcji <code>renderShadowapSun</code>. Utwórz funkcję <code>drawObjectDepth</code>. która będzie przyjmować referencję do <code>RenderContext</code>, macierz <code>viewProjection</code> i macierz modelu oraz przesyłać macierze do GPU i rysować <code>RenderContext</code></p>
<p>Musimy zdefiniować macierz widoku i rzutowania, które mamy przesłać. Implementujemy cienie dla oświetlenia kierunkowego, gdzie dla każdego punktu kierunek światła jest taki sam. W takim wypadku skorzystamy z rzutowania prostopadłego. <img src="./img/shadow_mapping_projection.png" /></p>
<p>Do stworzenia macierzy rzutowania perspektywicznego wykorzystamy funkcję:</p>
<div class="sourceCode" id="cb6"><pre class="sourceCode c++"><code class="sourceCode cpp"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a>glm::mat4 lightProjection = glm::ortho(</span>
<span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a> <span class="dt">float</span> left,</span>
<span id="cb6-3"><a href="#cb6-3" aria-hidden="true" tabindex="-1"></a> <span class="dt">float</span> right,</span>
<span id="cb6-4"><a href="#cb6-4" aria-hidden="true" tabindex="-1"></a> <span class="dt">float</span> bottom,</span>
<span id="cb6-5"><a href="#cb6-5" aria-hidden="true" tabindex="-1"></a> <span class="dt">float</span> top,</span>
<span id="cb6-6"><a href="#cb6-6" aria-hidden="true" tabindex="-1"></a> <span class="dt">float</span> zNear,</span>
<span id="cb6-7"><a href="#cb6-7" aria-hidden="true" tabindex="-1"></a> <span class="dt">float</span> zFar</span>
<span id="cb6-8"><a href="#cb6-8" aria-hidden="true" tabindex="-1"></a>)</span></code></pre></div>
<p>Tworzy ona macierz rzutowania prostopadłego dla zadanych wymiarów. Musimy tak je dobrać, żeby rzutowanie zawierało całą interesującą scenę. Za małe wartości spowodują artefakty a za duże pogorszą jakość. Przykładowo możesz wziąć <code>glm::ortho(-10.f, 10.f, -10.f, 10.f, 1.0f, 30.0f)</code>. Do stworzenia macierzy kamery wykorzystamy funkcję <code>glm::lookAt</code> z poniższymi argumentami argumentami</p>
<div class="sourceCode" id="cb7"><pre class="sourceCode c++"><code class="sourceCode cpp"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a>glm::lookAt(sunPos, sunPos - sunDir, glm::vec3(<span class="dv">0</span>, <span class="dv">1</span>, <span class="dv">0</span>))</span></code></pre></div>
<h3 id="zadanie-2">Zadanie</h3>
<p>Uzupełnij funkcję <code>renderShadowapSun</code>. Wywołaj w niej instrukcje</p>
<div class="sourceCode" id="cb8"><pre class="sourceCode c++"><code class="sourceCode cpp"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a> <span class="co">//ustawianie przestrzeni rysowania </span></span>
<span id="cb8-2"><a href="#cb8-2" aria-hidden="true" tabindex="-1"></a> glViewport(<span class="dv">0</span>, <span class="dv">0</span>, SHADOW_WIDTH, SHADOW_HEIGHT);</span>
<span id="cb8-3"><a href="#cb8-3" aria-hidden="true" tabindex="-1"></a> <span class="co">//bindowanie FBO</span></span>
<span id="cb8-4"><a href="#cb8-4" aria-hidden="true" tabindex="-1"></a> glBindFramebuffer(GL_FRAMEBUFFER, depthMapFBO);</span>
<span id="cb8-5"><a href="#cb8-5" aria-hidden="true" tabindex="-1"></a> <span class="co">//czyszczenie mapy głębokości </span></span>
<span id="cb8-6"><a href="#cb8-6" aria-hidden="true" tabindex="-1"></a> glClear(GL_DEPTH_BUFFER_BIT);</span>
<span id="cb8-7"><a href="#cb8-7" aria-hidden="true" tabindex="-1"></a> <span class="co">//ustawianie programu</span></span>
<span id="cb8-8"><a href="#cb8-8" aria-hidden="true" tabindex="-1"></a> glUseProgram(programDepth);</span></code></pre></div>
<p>Stwórz macierz <code>viewProjection</code></p>
<div class="sourceCode" id="cb9"><pre class="sourceCode c++"><code class="sourceCode cpp"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a> glm::mat4 lightVP = glm::ortho(-<span class="fl">10.</span><span class="bu">f</span>, <span class="fl">10.</span><span class="bu">f</span>, -<span class="fl">10.</span><span class="bu">f</span>, <span class="fl">10.</span><span class="bu">f</span>, <span class="fl">1.0</span><span class="bu">f</span>, <span class="fl">30.0</span><span class="bu">f</span>) * glm::lookAt(sunPos, sunPos - sunDir, glm::vec3(<span class="dv">0</span>, <span class="dv">1</span>, <span class="dv">0</span>));</span></code></pre></div>
<p>następnie wywołaj <code>drawObjectDepth</code> dla każdego obiektu, który rysujemy w naszej scenie. wykorzystaj macierz <code>viewProjection</code> zdefiniowaną wyżej, użyj tej samej macierzy modelu co przy właściwym rysowaniu.</p>
<p>Zakończ funkcję linią <code>glBindFramebuffer(GL_FRAMEBUFFER, 0);</code>, która przywraca domyślny FBO.</p>
<h3 id="wizualizacja-mapy-głębokości">Wizualizacja mapy głębokości</h3>
<p>odkomentuj linie:</p>
<div class="sourceCode" id="cb10"><pre class="sourceCode c++"><code class="sourceCode cpp"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a> <span class="co">//glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);</span></span>
<span id="cb10-2"><a href="#cb10-2" aria-hidden="true" tabindex="-1"></a> <span class="co">//glUseProgram(programTest);</span></span>
<span id="cb10-3"><a href="#cb10-3" aria-hidden="true" tabindex="-1"></a> <span class="co">//glActiveTexture(GL_TEXTURE0);</span></span>
<span id="cb10-4"><a href="#cb10-4" aria-hidden="true" tabindex="-1"></a> <span class="co">//glBindTexture(GL_TEXTURE_2D, depthMap);</span></span>
<span id="cb10-5"><a href="#cb10-5" aria-hidden="true" tabindex="-1"></a> <span class="co">//Core::DrawContext(models::testContext);</span></span></code></pre></div>
<p>znajdujące się w <code>renderScene</code>. Rysują one prostokąt z mapą głębokości jako teksturą. Jeżeli wszystko zostało wykonane poprawnie, to powinien on zawierać rzutowanie naszego pokoju.</p>
<h3 id="zadanie-3">Zadanie</h3>
<p>W tej chwili rzutowanie jest nieoptymalne. popraw je na lepsze. Zmodyfikuj wartości w <code>glm::ortho(-10.f, 10.f, -10.f, 10.f, 1.0f, 30.0f)</code> do takich, żeby pokój wypełniał jak największą część tekstury.</p>
<h3 id="rysowanie-cieni">Rysowanie cieni</h3>
<p>Na tym etapie powinniśmy mieć poprawnie stworzoną mapę głębokości. Pozostaje wykorzystać ją w oświetleniu. ### Zadanie #### Przesłanie danych W funkcji <code>drawObjectPBR</code> prześlij teksturę za pomocą instrukcji:</p>
<div class="sourceCode" id="cb11"><pre class="sourceCode c++"><code class="sourceCode cpp"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a> glActiveTexture(GL_TEXTURE0);</span>
<span id="cb11-2"><a href="#cb11-2" aria-hidden="true" tabindex="-1"></a> glBindTexture(GL_TEXTURE_2D, depthMap);</span></code></pre></div>
<p>oraz macierz <code>LightVP</code>, która musi być taka sama jak w <code>drawObjectDepth</code>.</p>
<p>Następnie w shaderze wierzchołków odbierz <code>LightVP</code>.</p>
<h4 id="shader-wierzchołków">Shader wierzchołków</h4>
<p>Oblicz pozycję wierzchołka z perspektywy słońca <code>sunSpacePos=LightVP*modelMatrix*vec4(vertexPosition,1)</code>, wynik prześlij do shadera fragmentów #### Shader fragmentów odbierz <code>sunSpacePos</code> i napisz funkcję <code>calculateShadow</code>, która sprawdza czy obiekt jest zacieniony. Aby to zrobić kolejno w funkcji: * ujednorodnij zmienną <code>lightSpacePos</code> dzieląc ją przez współrzędną <strong>w</strong>, * przeskaluj ją, ma wartości od -1 do 1 a potrzebujemy wartości od 0 do 1 (pomnóż przez 0.5 i dodaj 0.5) wynik zapisz do zmiennej <code>lightSpacePosNormalized</code>, * pobierz głębokość z <code>depthMap</code> próbkuj za pomocą współrzędnych <strong>x</strong> i <strong>y</strong>. Pobierz tylko kanał <code>r</code>, zapisz go do zmiennej <code>closestDepth</code>, * porównaj <code>closestDepth</code> ze współrzędną <strong>z</strong> <code>lightSpacePosNormalized</code>. jeżeli <code>closestDepth</code> jest większa zwróć 1.0, w przeciwnym wypadku zwróć 0.0. * wynik funkcji przemnóż z <code>sunColor</code> w trakcie oblicznia.</p>
<pre><code> ilumination=ilumination+PBRLight(sunDir,sunColor,normal,viewDir);</code></pre>
<h4 id="shadow-acne">shadow acne</h4>
<p>Powinniśmy dostać cienie , jednak w niezacienionych strefach pojawiły się paski, które znane są jako <em>shadow acne</em> wynikają one z błędu przybliżenia liczb zmiennoprzecinkowych. Można się go pozbyć na dwa sposoby 1. dodać bias. zamiast sprawdzać <code>closestDepth&lt;lightSpacePosNormalized</code> można wziąć <code>closestDepth+bias&gt;lightSpacePosNormalized</code>, gdzie <code>bias</code> to mała wartość (np 0.01). 2. innym rozwiązaniem jest, żeby przy renderowaniu cieni włączyć front face culling. dzięki temu rysowane będą część modelu, które są dalej niż te, które odpytujemy.</p>
<h3 id="zadanie-4">Zadanie*</h3>
<p>Dodaj rysowane cieni również dla latarki doczepionej do statku. pamiętaj, że musisz wykorzystać tutaj macierz rzutowania perspektywicznego</p>
</body>
</html>
Reference in New Issue Copy Permalink