119 lines
10 KiB
HTML
119 lines
10 KiB
HTML
<!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>exercises_3</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" />
|
||
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js" type="text/javascript"></script>
|
||
<!--[if lt IE 9]>
|
||
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
|
||
<![endif]-->
|
||
</head>
|
||
<body>
|
||
<h2 id="perspective-projection">Perspective projection</h2>
|
||
<p>Exercises <strong>main_3_1</strong> starts where exercise <strong>main_2_1</strong> from previous class should end. You can see only a square not the whole box. We will display it with perspective projection, what will give us ilusion of depth.</p>
|
||
<h4 id="exercise-1">Exercise 1</h4>
|
||
<p>Perspective matrix is created by a function <code>createPerspectiveMatrix()</code>, look into definition of this function. Send a result of the function to shader.</p>
|
||
<p>Result is not exactly what we would expect. Reason for this is now the camera is inside the box. Add camera matrix to the transformation (this will allow us to move it with keyboard keys) and translate the box in such a way that the camera would land outside of it.</p>
|
||
<h4 id="exercise-1-1">Exercise 1*</h4>
|
||
<p>Modify the perspective matrix. Inside the function <code>createPerspectiveMatrix()</code> is a variable <code>frustumScale</code>. It is responsible for field of view, modify it’s value and see what effect is produced. To calculat is use a formula $ S = $, where <span class="math inline">\(fov\)</span> is the viewing angle.</p>
|
||
<h4 id="exercise-1-2">Exercise 1**</h4>
|
||
<p>Still we have a problem with stretching when the window shape is changed. Solution is to have different values of <strong>frustumScale</strong> for <strong>X</strong> and <strong>Y</strong> coordinates. For this use a function <code>onReshape</code>,which is called every time the screen size is changed. First calculate screen ratio and assign the result to a global variable <code>screenRatio</code>. Next multiply appropriate coordinate by <code>screenRatio</code> in <code>createPerspectiveMatrix()</code>.</p>
|
||
<h2 id="shaders">Shaders</h2>
|
||
<p>In this part we will use different objects than the box. Remove it’s initialization form <code>init</code> function and it’s drawcall in <code>renderScene</code>. Replace shaders to <code>shaders/shader_3_2.vert</code> and <code>shaders/shader_3_2.frag</code>.</p>
|
||
<h4 id="exercise-2">Exercise 2</h4>
|
||
<p>Load a spaceship and a sphere with <code>loadModelToContext</code> to according variables <code>Core::RenderContext</code>. Next display them with <code>Core::DrawContext</code> function. Finally place them in diferent locations in space.</p>
|
||
<h5 id="add-possibility-to-change-colours-of-different-objects">Add possibility to change colours of different objects:</h5>
|
||
<p>Create a variable <code>uniform vec3 objectColor</code> in the file <code>shader_3_2.frag</code>, which you will use to send the colour of an object in RGB format to the shader. The built-in shader variable <code>gl_FragColor</code> has type vec4 - RGBA. Set the .rgb part of the variable equal to <code>objectColor</code>, and the 4th element (.a) - <code>1.0f</code>. Now you can control the color of the drawn object, by sending values to the variable <code>objectColor</code> using the <code>function glUniform3f( int location, float v0, float v1, float v2 )</code>.</p>
|
||
<p>“location” indicates the address of the variable in GPU memory we want to send data to. You can retrieve this address with the function <code>glGetUniformLocation(program, "variable name")</code>.</p>
|
||
<h4 id="exercise-2-1">Exercise 2*</h4>
|
||
<p>Modify program in such a way, that colour of the ship would change in time.</p>
|
||
<h4 id="exercise-3">Exercise 3</h4>
|
||
<p>We want to display the normal vectors at each fragment as colors.</p>
|
||
<p>The normal vector of a vertex is accessible in the vertex shader (file with the extension <strong>.vert</strong>). The pixel color is defined in the fragment shader (<strong>.frag</strong>). Hence, we have to send the normal vector from vertex to fragment shader. The normal vector will be automatically interpolated.</p>
|
||
<p>Create a variable <code>out vec3 name</code> in the vertex shader and a corresponding variable <code>in vec3 name</code> in the fragment shader. Set the values in the vertex shader for the new variable - this will automatically set the value in the fragment shader. Keep in mind that you can only set variable values in the <code>main()</code> part of a shader. Use the new variable in the fragment shader to set the color of pixels: normalize the new variable and scale all the values to the range [0, 1] and use the result to define the R, G, B channels of the variable <code>gl_FragColor</code>.</p>
|
||
<h4 id="exercise-4">Exercise 4</h4>
|
||
<p>Create a function <code>drawObject</code> in the .cpp source file, which will make drawing objects more convienient. As input parameters we need a reference to <code>Core::RenderContext</code> as well as the model matrix of the object. Display a few objects in different positions (and look at the from different perspectives).</p>
|
||
<p>“Attach” the spaceship to the camera - its model matrix has to take into account the position and orientation of the camera such that it gives the impression you are steering the spaceship.</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>glm::mat4 shipModelMatrix = </span>
|
||
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a> glm::translate(cameraPos + cameraDir * <span class="fl">0.5</span><span class="bu">f</span> + glm::vec3(<span class="dv">0</span>,-<span class="fl">0.25</span><span class="bu">f</span>,<span class="dv">0</span>)) * </span>
|
||
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> glm::rotate(-cameraAngle + glm::radians(<span class="fl">90.0</span><span class="bu">f</span>), glm::vec3(<span class="dv">0</span>,<span class="dv">1</span>,<span class="dv">0</span>)) *</span>
|
||
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a> glm::scale(glm::vec3(<span class="fl">0.25</span><span class="bu">f</span>));</span></code></pre></div>
|
||
<p>Analize the above instruction and evaluate how else to perform the same task.</p>
|
||
<h4 id="exercise-5">Exercise 5</h4>
|
||
<p>Create a planetary system - with one immovable sphere at the center (sun) and a few orbiting planets with moons around it.</p>
|
||
</body>
|
||
</html>
|