26 |
27 |
28 |
29 | {{ content }}
30 |
31 |
32 | {% if page.back_link %}
33 | Previous Lesson
34 | {% endif %}
35 | {% if page.home %}
36 | Home
37 | {% endif %}
38 | {% if page.next_link %}
39 | Next Lesson
40 | {% endif %}
41 |
42 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/docs/_sass/cayman.scss:
--------------------------------------------------------------------------------
1 | // Placeholder file. If your site uses
2 | // @import "{{ site.theme }}";
3 | // Then using this theme with jekyll-remote-theme will work fine.
4 | @import "jekyll-theme-cayman";
5 |
--------------------------------------------------------------------------------
/docs/_sass/jekyll-theme-cayman.scss:
--------------------------------------------------------------------------------
1 | @import "normalize";
2 | @import "rouge-github";
3 | @import "variables";
4 | @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
5 |
6 | @mixin large {
7 | @media screen and (min-width: #{$large-breakpoint}) {
8 | @content;
9 | }
10 | }
11 |
12 | @mixin medium {
13 | @media screen and (min-width: #{$medium-breakpoint}) and (max-width: #{$large-breakpoint}) {
14 | @content;
15 | }
16 | }
17 |
18 | @mixin small {
19 | @media screen and (max-width: #{$medium-breakpoint}) {
20 | @content;
21 | }
22 | }
23 |
24 | * {
25 | box-sizing: border-box;
26 | }
27 |
28 | body {
29 | padding: 0;
30 | margin: 0;
31 | font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
32 | font-size: 16px;
33 | line-height: 1.5;
34 | color: $body-text-color;
35 | }
36 |
37 | #skip-to-content {
38 | height: 1px;
39 | width: 1px;
40 | position: absolute;
41 | overflow: hidden;
42 | top: -10px;
43 |
44 | &:focus {
45 | position: fixed;
46 | top: 10px;
47 | left: 10px;
48 | height: auto;
49 | width: auto;
50 | background: invert($body-link-color);
51 | outline: thick solid invert($body-link-color);
52 | }
53 | }
54 |
55 | a {
56 | color: $body-link-color;
57 | text-decoration: none;
58 |
59 | &:hover {
60 | text-decoration: underline;
61 | }
62 | }
63 |
64 | .btn {
65 | display: inline-block;
66 | margin-bottom: 1rem;
67 | color: rgba(255, 255, 255, 0.7);
68 | background-color: rgba(255, 255, 255, 0.08);
69 | border-color: rgba(255, 255, 255, 0.2);
70 | border-style: solid;
71 | border-width: 1px;
72 | border-radius: 0.3rem;
73 | transition: color 0.2s, background-color 0.2s, border-color 0.2s;
74 |
75 | &:hover {
76 | color: rgba(255, 255, 255, 0.8);
77 | text-decoration: none;
78 | background-color: rgba(255, 255, 255, 0.2);
79 | border-color: rgba(255, 255, 255, 0.3);
80 | }
81 |
82 | + .btn {
83 | margin-left: 1rem;
84 | }
85 |
86 | @include large {
87 | padding: 0.75rem 1rem;
88 | }
89 |
90 | @include medium {
91 | padding: 0.6rem 0.9rem;
92 | font-size: 0.9rem;
93 | }
94 |
95 | @include small {
96 | display: block;
97 | width: 100%;
98 | padding: 0.75rem;
99 | font-size: 0.9rem;
100 |
101 | + .btn {
102 | margin-top: 1rem;
103 | margin-left: 0;
104 | }
105 | }
106 | }
107 |
108 | .link-bar {
109 | display: inline-block;
110 | text-align: center;
111 | .nav-btn {
112 | display: inline-block;
113 | margin-bottom: 1rem;
114 | color: rgba(255, 255, 255, 0.7);
115 | background-color: $header-bg-color;
116 | border-color: rgba(255, 255, 255, 0.2);
117 | border-style: solid;
118 | border-width: 1px;
119 | border-radius: 0.3rem;
120 | transition: color 0.2s, background-color 0.2s, border-color 0.2s;
121 |
122 | &:hover {
123 | color: rgba(255, 255, 255, 0.8);
124 | text-decoration: none;
125 | background-color: #0d4d2d;
126 | border-color: rgba(255, 255, 255, 0.3);
127 | }
128 |
129 | + .nav-btn {
130 | margin-left: 1rem;
131 | }
132 |
133 | @include large {
134 | padding: 0.75rem 1rem;
135 | }
136 |
137 | @include medium {
138 | padding: 0.6rem 0.9rem;
139 | font-size: 0.9rem;
140 | }
141 |
142 | @include small {
143 | display: block;
144 | width: 100%;
145 | padding: 0.75rem;
146 | font-size: 0.9rem;
147 |
148 | + .btn {
149 | margin-top: 1rem;
150 | margin-left: 0;
151 | }
152 | }
153 | }
154 | }
155 |
156 | .page-header {
157 | color: $header-heading-color;
158 | text-align: center;
159 | background-color: $header-bg-color;
160 | background-image: linear-gradient(120deg, $header-bg-color-secondary, $header-bg-color);
161 |
162 | @include large {
163 | padding: 5rem 6rem;
164 | }
165 |
166 | @include medium {
167 | padding: 3rem 4rem;
168 | }
169 |
170 | @include small {
171 | padding: 2rem 1rem;
172 | }
173 | }
174 |
175 | .project-name {
176 | margin-top: 0;
177 | margin-bottom: 0.1rem;
178 |
179 | @include large {
180 | font-size: 3.25rem;
181 | }
182 |
183 | @include medium {
184 | font-size: 2.25rem;
185 | }
186 |
187 | @include small {
188 | font-size: 1.75rem;
189 | }
190 | }
191 |
192 | .project-tagline {
193 | margin-bottom: 2rem;
194 | font-weight: normal;
195 | opacity: 0.7;
196 |
197 | @include large {
198 | font-size: 1.25rem;
199 | }
200 |
201 | @include medium {
202 | font-size: 1.15rem;
203 | }
204 |
205 | @include small {
206 | font-size: 1rem;
207 | }
208 | }
209 |
210 | .main-content {
211 | word-wrap: break-word;
212 |
213 | :first-child {
214 | margin-top: 0;
215 | }
216 |
217 | @include large {
218 | max-width: 64rem;
219 | padding: 2rem 6rem;
220 | margin: 0 auto;
221 | font-size: 1.1rem;
222 | }
223 |
224 | @include medium {
225 | padding: 2rem 4rem;
226 | font-size: 1.1rem;
227 | }
228 |
229 | @include small {
230 | padding: 2rem 1rem;
231 | font-size: 1rem;
232 | }
233 |
234 | kbd {
235 | background-color: #fafbfc;
236 | border: 1px solid #c6cbd1;
237 | border-bottom-color: #959da5;
238 | border-radius: 3px;
239 | box-shadow: inset 0 -1px 0 #959da5;
240 | color: #444d56;
241 | display: inline-block;
242 | font-size: 11px;
243 | line-height: 10px;
244 | padding: 3px 5px;
245 | vertical-align: middle;
246 | }
247 |
248 | img {
249 | max-width: 100%;
250 | }
251 |
252 | h1,
253 | h2,
254 | h3,
255 | h4,
256 | h5,
257 | h6 {
258 | margin-top: 2rem;
259 | margin-bottom: 1rem;
260 | font-weight: normal;
261 | color: $section-headings-color;
262 | }
263 |
264 | p {
265 | margin-bottom: 1em;
266 | }
267 |
268 | code {
269 | padding: 2px 4px;
270 | font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
271 | font-size: 0.9rem;
272 | color: $code-text-color;
273 | background-color: $code-bg-color;
274 | border-radius: 0.3rem;
275 | }
276 |
277 | pre {
278 | padding: 0.8rem;
279 | margin-top: 0;
280 | margin-bottom: 1rem;
281 | font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
282 | color: $code-text-color;
283 | word-wrap: normal;
284 | background-color: $code-bg-color;
285 | border: solid 1px $border-color;
286 | border-radius: 0.3rem;
287 |
288 | > code {
289 | padding: 0;
290 | margin: 0;
291 | font-size: 0.9rem;
292 | color: $code-text-color;
293 | word-break: normal;
294 | white-space: pre;
295 | background: transparent;
296 | border: 0;
297 | }
298 | }
299 |
300 | .highlight {
301 | margin-bottom: 1rem;
302 |
303 | pre {
304 | margin-bottom: 0;
305 | word-break: normal;
306 | }
307 | }
308 |
309 | .highlight pre,
310 | pre {
311 | padding: 0.8rem;
312 | overflow: auto;
313 | font-size: 0.9rem;
314 | line-height: 1.45;
315 | border-radius: 0.3rem;
316 | -webkit-overflow-scrolling: touch;
317 | }
318 |
319 | pre code,
320 | pre tt {
321 | display: inline;
322 | max-width: initial;
323 | padding: 0;
324 | margin: 0;
325 | overflow: initial;
326 | line-height: inherit;
327 | word-wrap: normal;
328 | background-color: transparent;
329 | border: 0;
330 |
331 | &:before,
332 | &:after {
333 | content: normal;
334 | }
335 | }
336 |
337 | ul,
338 | ol {
339 | margin-top: 0;
340 | }
341 |
342 | blockquote {
343 | padding: 0 1rem;
344 | margin-left: 0;
345 | color: $blockquote-text-color;
346 | border-left: 0.3rem solid $border-color;
347 |
348 | > :first-child {
349 | margin-top: 0;
350 | }
351 |
352 | > :last-child {
353 | margin-bottom: 0;
354 | }
355 | }
356 |
357 | table {
358 | display: block;
359 | width: 100%;
360 | overflow: auto;
361 | word-break: normal;
362 | word-break: keep-all; // For Firefox to horizontally scroll wider tables.
363 | -webkit-overflow-scrolling: touch;
364 |
365 | th {
366 | font-weight: bold;
367 | }
368 |
369 | th,
370 | td {
371 | padding: 0.5rem 1rem;
372 | border: 1px solid $table-border-color;
373 | }
374 | }
375 |
376 | dl {
377 | padding: 0;
378 |
379 | dt {
380 | padding: 0;
381 | margin-top: 1rem;
382 | font-size: 1rem;
383 | font-weight: bold;
384 | }
385 |
386 | dd {
387 | padding: 0;
388 | margin-bottom: 1rem;
389 | }
390 | }
391 |
392 | hr {
393 | height: 2px;
394 | padding: 0;
395 | margin: 1rem 0;
396 | background-color: $hr-border-color;
397 | border: 0;
398 | }
399 | }
400 |
401 | .site-footer {
402 | padding-top: 2rem;
403 | margin-top: 2rem;
404 | border-top: solid 1px $hr-border-color;
405 |
406 | @include large {
407 | font-size: 1rem;
408 | }
409 |
410 | @include medium {
411 | font-size: 1rem;
412 | }
413 |
414 | @include small {
415 | font-size: 0.9rem;
416 | }
417 | }
418 |
419 | .site-footer-owner {
420 | display: block;
421 | font-weight: bold;
422 | }
423 |
424 | .site-footer-credits {
425 | color: $blockquote-text-color;
426 | }
427 |
--------------------------------------------------------------------------------
/docs/_sass/rouge-github.scss:
--------------------------------------------------------------------------------
1 | .highlight table td { padding: 5px; }
2 | .highlight table pre { margin: 0; }
3 | .highlight .cm {
4 | color: #999988;
5 | font-style: italic;
6 | }
7 | .highlight .cp {
8 | color: #999999;
9 | font-weight: bold;
10 | }
11 | .highlight .c1 {
12 | color: #999988;
13 | font-style: italic;
14 | }
15 | .highlight .cs {
16 | color: #999999;
17 | font-weight: bold;
18 | font-style: italic;
19 | }
20 | .highlight .c, .highlight .cd {
21 | color: #999988;
22 | font-style: italic;
23 | }
24 | .highlight .err {
25 | color: #a61717;
26 | background-color: #e3d2d2;
27 | }
28 | .highlight .gd {
29 | color: #000000;
30 | background-color: #ffdddd;
31 | }
32 | .highlight .ge {
33 | color: #000000;
34 | font-style: italic;
35 | }
36 | .highlight .gr {
37 | color: #aa0000;
38 | }
39 | .highlight .gh {
40 | color: #999999;
41 | }
42 | .highlight .gi {
43 | color: #000000;
44 | background-color: #ddffdd;
45 | }
46 | .highlight .go {
47 | color: #888888;
48 | }
49 | .highlight .gp {
50 | color: #555555;
51 | }
52 | .highlight .gs {
53 | font-weight: bold;
54 | }
55 | .highlight .gu {
56 | color: #aaaaaa;
57 | }
58 | .highlight .gt {
59 | color: #aa0000;
60 | }
61 | .highlight .kc {
62 | color: #000000;
63 | font-weight: bold;
64 | }
65 | .highlight .kd {
66 | color: #000000;
67 | font-weight: bold;
68 | }
69 | .highlight .kn {
70 | color: #000000;
71 | font-weight: bold;
72 | }
73 | .highlight .kp {
74 | color: #000000;
75 | font-weight: bold;
76 | }
77 | .highlight .kr {
78 | color: #000000;
79 | font-weight: bold;
80 | }
81 | .highlight .kt {
82 | color: #445588;
83 | font-weight: bold;
84 | }
85 | .highlight .k, .highlight .kv {
86 | color: #000000;
87 | font-weight: bold;
88 | }
89 | .highlight .mf {
90 | color: #009999;
91 | }
92 | .highlight .mh {
93 | color: #009999;
94 | }
95 | .highlight .il {
96 | color: #009999;
97 | }
98 | .highlight .mi {
99 | color: #009999;
100 | }
101 | .highlight .mo {
102 | color: #009999;
103 | }
104 | .highlight .m, .highlight .mb, .highlight .mx {
105 | color: #009999;
106 | }
107 | .highlight .sb {
108 | color: #d14;
109 | }
110 | .highlight .sc {
111 | color: #d14;
112 | }
113 | .highlight .sd {
114 | color: #d14;
115 | }
116 | .highlight .s2 {
117 | color: #d14;
118 | }
119 | .highlight .se {
120 | color: #d14;
121 | }
122 | .highlight .sh {
123 | color: #d14;
124 | }
125 | .highlight .si {
126 | color: #d14;
127 | }
128 | .highlight .sx {
129 | color: #d14;
130 | }
131 | .highlight .sr {
132 | color: #009926;
133 | }
134 | .highlight .s1 {
135 | color: #d14;
136 | }
137 | .highlight .ss {
138 | color: #990073;
139 | }
140 | .highlight .s {
141 | color: #d14;
142 | }
143 | .highlight .na {
144 | color: #008080;
145 | }
146 | .highlight .bp {
147 | color: #999999;
148 | }
149 | .highlight .nb {
150 | color: #0086B3;
151 | }
152 | .highlight .nc {
153 | color: #445588;
154 | font-weight: bold;
155 | }
156 | .highlight .no {
157 | color: #008080;
158 | }
159 | .highlight .nd {
160 | color: #3c5d5d;
161 | font-weight: bold;
162 | }
163 | .highlight .ni {
164 | color: #800080;
165 | }
166 | .highlight .ne {
167 | color: #990000;
168 | font-weight: bold;
169 | }
170 | .highlight .nf {
171 | color: #990000;
172 | font-weight: bold;
173 | }
174 | .highlight .nl {
175 | color: #990000;
176 | font-weight: bold;
177 | }
178 | .highlight .nn {
179 | color: #555555;
180 | }
181 | .highlight .nt {
182 | color: #000080;
183 | }
184 | .highlight .vc {
185 | color: #008080;
186 | }
187 | .highlight .vg {
188 | color: #008080;
189 | }
190 | .highlight .vi {
191 | color: #008080;
192 | }
193 | .highlight .nv {
194 | color: #008080;
195 | }
196 | .highlight .ow {
197 | color: #000000;
198 | font-weight: bold;
199 | }
200 | .highlight .o {
201 | color: #000000;
202 | font-weight: bold;
203 | }
204 | .highlight .w {
205 | color: #bbbbbb;
206 | }
207 | .highlight {
208 | background-color: #f8f8f8;
209 | }
210 |
--------------------------------------------------------------------------------
/docs/_sass/variables.scss:
--------------------------------------------------------------------------------
1 | // Breakpoints
2 | $large-breakpoint: 64em !default;
3 | $medium-breakpoint: 42em !default;
4 |
5 | // Headers
6 | $header-heading-color: #fff !default;
7 | $header-bg-color: #159957 !default;
8 | $header-bg-color-secondary: #155799 !default;
9 |
10 | // Text
11 | $section-headings-color: #159957 !default;
12 | $body-text-color: #606c71 !default;
13 | $body-link-color: #1e6bb8 !default;
14 | $blockquote-text-color: #819198 !default;
15 |
16 | // Code
17 | $code-bg-color: #f3f6fa !default;
18 | $code-text-color: #567482 !default;
19 |
20 | // Borders
21 | $border-color: #dce6f0 !default;
22 | $table-border-color: #e9ebec !default;
23 | $hr-border-color: #eff0f1 !default;
24 |
--------------------------------------------------------------------------------
/docs/imgs/0/owl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/0/owl.png
--------------------------------------------------------------------------------
/docs/imgs/0/rust_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/0/rust_logo.png
--------------------------------------------------------------------------------
/docs/imgs/0/vulkan_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/0/vulkan_logo.png
--------------------------------------------------------------------------------
/docs/imgs/1/first_window.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/1/first_window.png
--------------------------------------------------------------------------------
/docs/imgs/1/updated_window.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/1/updated_window.png
--------------------------------------------------------------------------------
/docs/imgs/10/teapot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/10/teapot.png
--------------------------------------------------------------------------------
/docs/imgs/11/blank_window.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/11/blank_window.png
--------------------------------------------------------------------------------
/docs/imgs/11/swap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/11/swap.png
--------------------------------------------------------------------------------
/docs/imgs/11/teapot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/11/teapot.png
--------------------------------------------------------------------------------
/docs/imgs/11/three.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/11/three.png
--------------------------------------------------------------------------------
/docs/imgs/11_5/illuminated_teapot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/11_5/illuminated_teapot.png
--------------------------------------------------------------------------------
/docs/imgs/11_5/illuminated_teapot_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/11_5/illuminated_teapot_2.png
--------------------------------------------------------------------------------
/docs/imgs/11_5/sphere_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/11_5/sphere_1.png
--------------------------------------------------------------------------------
/docs/imgs/11_5/sphere_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/11_5/sphere_2.png
--------------------------------------------------------------------------------
/docs/imgs/12/directional.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/12/directional.png
--------------------------------------------------------------------------------
/docs/imgs/12/gold_and_rubber.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/12/gold_and_rubber.png
--------------------------------------------------------------------------------
/docs/imgs/12/lit_cube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/12/lit_cube.png
--------------------------------------------------------------------------------
/docs/imgs/12/specular.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/12/specular.png
--------------------------------------------------------------------------------
/docs/imgs/12/specular_only.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/12/specular_only.png
--------------------------------------------------------------------------------
/docs/imgs/12/suzanne_full.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/12/suzanne_full.png
--------------------------------------------------------------------------------
/docs/imgs/12/suzanne_specular_only.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/12/suzanne_specular_only.png
--------------------------------------------------------------------------------
/docs/imgs/12/two_cubes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/12/two_cubes.png
--------------------------------------------------------------------------------
/docs/imgs/12/two_cubes_full.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/12/two_cubes_full.png
--------------------------------------------------------------------------------
/docs/imgs/13/NormalMaps.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/13/NormalMaps.png
--------------------------------------------------------------------------------
/docs/imgs/13/diamond.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/13/diamond.png
--------------------------------------------------------------------------------
/docs/imgs/13/noise.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/13/noise.png
--------------------------------------------------------------------------------
/docs/imgs/13/textured.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/13/textured.png
--------------------------------------------------------------------------------
/docs/imgs/13/triangle1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/13/triangle1.png
--------------------------------------------------------------------------------
/docs/imgs/13/triangle2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/13/triangle2.png
--------------------------------------------------------------------------------
/docs/imgs/13/untextured.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/13/untextured.png
--------------------------------------------------------------------------------
/docs/imgs/13/uv.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/13/uv.png
--------------------------------------------------------------------------------
/docs/imgs/14/201.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/14/201.png
--------------------------------------------------------------------------------
/docs/imgs/14/compressed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/14/compressed.png
--------------------------------------------------------------------------------
/docs/imgs/14/count.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/14/count.png
--------------------------------------------------------------------------------
/docs/imgs/14/marked_texture.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/14/marked_texture.png
--------------------------------------------------------------------------------
/docs/imgs/14/spacing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/14/spacing.png
--------------------------------------------------------------------------------
/docs/imgs/14/texture_map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/14/texture_map.png
--------------------------------------------------------------------------------
/docs/imgs/14/texture_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/14/texture_small.png
--------------------------------------------------------------------------------
/docs/imgs/2/colorful_triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/2/colorful_triangle.png
--------------------------------------------------------------------------------
/docs/imgs/2/triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/2/triangle.png
--------------------------------------------------------------------------------
/docs/imgs/3/coordinates.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/3/coordinates.png
--------------------------------------------------------------------------------
/docs/imgs/3/projection_triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/3/projection_triangle.png
--------------------------------------------------------------------------------
/docs/imgs/3/required_trait.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/3/required_trait.png
--------------------------------------------------------------------------------
/docs/imgs/3/squished_triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/3/squished_triangle.png
--------------------------------------------------------------------------------
/docs/imgs/3/translated_triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/3/translated_triangle.png
--------------------------------------------------------------------------------
/docs/imgs/3/updated_triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/3/updated_triangle.png
--------------------------------------------------------------------------------
/docs/imgs/3/view_triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/3/view_triangle.png
--------------------------------------------------------------------------------
/docs/imgs/4/fixed_depth_triangles.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/4/fixed_depth_triangles.png
--------------------------------------------------------------------------------
/docs/imgs/4/triangles_with_no_depth.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/4/triangles_with_no_depth.png
--------------------------------------------------------------------------------
/docs/imgs/5/culled_triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/5/culled_triangle.png
--------------------------------------------------------------------------------
/docs/imgs/5/triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/5/triangle.png
--------------------------------------------------------------------------------
/docs/imgs/6/ambient_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/6/ambient_1.png
--------------------------------------------------------------------------------
/docs/imgs/6/ambient_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/6/ambient_2.png
--------------------------------------------------------------------------------
/docs/imgs/6/ambient_2b.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/6/ambient_2b.png
--------------------------------------------------------------------------------
/docs/imgs/6/ambient_3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/6/ambient_3.png
--------------------------------------------------------------------------------
/docs/imgs/6/error.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/6/error.png
--------------------------------------------------------------------------------
/docs/imgs/6/lit_cube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/6/lit_cube.png
--------------------------------------------------------------------------------
/docs/imgs/6/rotating_cube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/6/rotating_cube.png
--------------------------------------------------------------------------------
/docs/imgs/6/static_cube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/6/static_cube.png
--------------------------------------------------------------------------------
/docs/imgs/7/lit_cube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/7/lit_cube.png
--------------------------------------------------------------------------------
/docs/imgs/7/multi_pass_diagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/7/multi_pass_diagram.png
--------------------------------------------------------------------------------
/docs/imgs/7/normal_cube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/7/normal_cube.png
--------------------------------------------------------------------------------
/docs/imgs/7/review.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/7/review.png
--------------------------------------------------------------------------------
/docs/imgs/7/unlit_cube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/7/unlit_cube.png
--------------------------------------------------------------------------------
/docs/imgs/8/combined_images.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/8/combined_images.png
--------------------------------------------------------------------------------
/docs/imgs/8/cube_lights.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/8/cube_lights.png
--------------------------------------------------------------------------------
/docs/imgs/8/single_light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/8/single_light.png
--------------------------------------------------------------------------------
/docs/imgs/8/three_lights.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/8/three_lights.png
--------------------------------------------------------------------------------
/docs/imgs/9/cube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/9/cube.png
--------------------------------------------------------------------------------
/docs/imgs/9/export_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/9/export_1.png
--------------------------------------------------------------------------------
/docs/imgs/9/export_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/9/export_2.png
--------------------------------------------------------------------------------
/docs/imgs/9/suzanne_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/9/suzanne_1.png
--------------------------------------------------------------------------------
/docs/imgs/9/suzanne_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/9/suzanne_2.png
--------------------------------------------------------------------------------
/docs/imgs/9/suzanne_blender.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taidaesal/vulkano_tutorial/a2c4fe562b1acf8b56b6c0e56e2073ee129d279e/docs/imgs/9/suzanne_blender.png
--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | home: False
3 | ---
4 |
5 | # Vulkano Tutorial
6 |
7 | This site is intended to serve as a tutorial for using Vulkan in Rust via the Vulkano crate. This mostly documents my own experiments with learning graphical programming but I’m writing it down here in case others might find it useful. The Vulkano crate is in active development and so regularly experiences breaking changes. I will try to keep the examples updated but this is a hobby project.
8 |
9 | Note: All code is provided under the [MIT License](http://opensource.org/licenses/MIT) and includes samples taken from official Vulkano examples. All text and images are licensed under the [Creative Commons Attribution](https://creativecommons.org/licenses/by/4.0/) license (CC BY 4.0)
10 |
11 |
12 | ## Requirements
13 |
14 | The following needs to be present on your computer if you want to follow along:
15 |
16 | 1: [Rust](https://www.rust-lang.org/) version 1.56.1 or later
17 |
18 | 2: A computer that supports Vulkan. You can check your hardware at the vendor's website.
19 | - [NVIDIA](https://developer.nvidia.com/vulkan-driver), [AMD](https://www.amd.com/en/technologies/vulkan), [Intel](https://www.intel.com/content/www/us/en/support/articles/000005524/graphics.html)
20 |
21 | 3: A working install of a shader pipeline as outlined in the [main Vulkano documentation](https://github.com/vulkano-rs/vulkano)
22 |
23 | ## Running the Lessons
24 |
25 | This tutorial series uses Cargo's [Workspaces](https://doc.rust-lang.org/book/ch14-03-cargo-workspaces.html) feature to group multiple projects into a single repo. To run cargo on a single project you can pass in the `-p` flag followed by the name of the project.
26 |
27 | All the lessons in this series are independent projects and are named `lesson_{tutorial_number}`. For example, to run the first lesson navigate to the root `vulkano_tutorial` directory and run `cargo run -p lesson_1`.
28 |
29 | ## Contents
30 |
31 | ### 0. Introduction
32 | Provides a brief overview of some Vulkan considerations as well as a couple of notes on Rust.
33 |
34 | [Introduction to Vulkan](./section_0.md)
35 |
36 | ### 1. Our first window
37 |
38 | For our initial project, we will open a black window. This terminally-boring example is actually much longer and more important than you might expect. It will introduce most of the critical aspects shared by any Vulkan program.
39 |
40 | [First Window](./section_1.md)
41 |
42 | ### 2. Rendering a triangle
43 |
44 | With our first project we learned how to set up and use a Vulkan program. Now in this lesson we learn how to render things to the screen. This will involve writing our first shaders as well as passing information to them.
45 |
46 | [Triangle](./section_2.md)
47 |
48 | ### 3. Transformations
49 |
50 | After getting your first triangle on the screen the obvious question becomes "great, so how do I make it do things?" For that we will need to learn to apply *transformations* via `Uniform` data, which will be the other main way we feed data to our shaders in addition to the vertex data we learned about in the last lesson.
51 |
52 | [Transformations](./section_3.md)
53 |
54 | ### 4. Depth
55 |
56 | A shorter lesson that shows how to enable depth-testing in Vulkan. This is a necessity for the more complicated scenes we'll be creating in later lessons.
57 |
58 | [Depth](./section_4.md)
59 |
60 | ### 5. Winding order
61 |
62 | This lesson is a short one but it talks about a very important subject for rendering more complicated scenes: winding order and how you can use it to lower the amount of work your graphics hardware has to do.
63 |
64 | [Winding Order](./section_5.md)
65 |
66 | ### 6. Light I
67 |
68 | And in the sixth lesson the programmer said "let there be light" and lo, there was light!
69 |
70 | [Light](./section_6.md)
71 |
72 | ### 7. Multi-pass rendering
73 |
74 | Now that we're starting to get into more advanced features we're going to need to increase the power of our rendering system. We will accomplish this by introducing multiple rendering passes into the equation.
75 |
76 | [Multi-pass rendering](./section_7.md)
77 |
78 | ### 8. Light II
79 |
80 | Now that we've got our deferred rendering system set up, let's look at how you can use it to add more than one directional light to our scene.
81 |
82 | [Multiple Lights](./section_8.md)
83 |
84 | ### 9. Models
85 |
86 | Now that we've set up a working lighting system let's take a step back and look at something else that would be important to any graphics application: how to load models from a file.
87 |
88 | [Loading Models](./section_9.md)
89 |
90 | ### 10. New Uniforms
91 |
92 | After a couple of longer lessons, let's take a short break to refactor our normals code as well as set the stage for multiple models.
93 |
94 | [Normal Uniform](./section_10.md)
95 |
96 | ### 11. Render System I
97 |
98 | We're ready now to take our first stab at making a real rendering system. We won't introduce any new concepts in this lesson, just wrap up what we already know in a way that lets us input models to render as well as directional light sources. Think of this as a draft version of the more advanced system we'll make in a few lessons.
99 |
100 | [Render System](./section_11.md)
101 |
102 | #### 11.5 Light Objects
103 |
104 | Let's take a bit of a break from "big picture" topics and implement a small feature that will give us the option to visually display where our light sources are in our scene.
105 |
106 | [Light Objects](./section_11_5.md)
107 |
108 | ### 12. Light III
109 |
110 | We're almost ready to move on to "advanced" topics, but first we have to revisit light one more time to complete our lighting model. This time we'll be adding "shininess."
111 |
112 | [Specular Reflection](./section_12.md)
113 |
114 | ### 13. Textures
115 |
116 | A brief look at textures and a discussion of their uses.
117 |
118 | [Textures](./section_13.md)
119 |
120 | ### 14. Text
121 |
122 | A look at how to use textures to display a timer to the user.
123 |
124 | [Text](./section_14.md)
125 |
--------------------------------------------------------------------------------
/docs/section_4.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Depth
4 | back_link: "./section_3.html"
5 | next_link: "./section_5.html"
6 | ---
7 |
8 | # Depth
9 |
10 | We're four lessons into this thing but we've been cheating the whole time. We have been talking about models in 3-dimensional space and how to transform them and such. However, we have actually been silently ignoring the third dimension entirely. What do I mean by that? Let's look at an example.
11 |
12 | ## Example
13 |
14 | Let's change our code so we have two triangles with one being white, and the other black. For the sake of this example we'll get rid of the translation/rotation code from last time and replace the model matrix with the simple identity matrix.
15 |
16 | ```rust
17 | let vertices = [
18 | Vertex {
19 | position: [-0.5, 0.5, -0.5],
20 | color: [0.0, 0.0, 0.0],
21 | },
22 | Vertex {
23 | position: [0.5, 0.5, -0.5],
24 | color: [0.0, 0.0, 0.0],
25 | },
26 | Vertex {
27 | position: [0.0, -0.5, -0.5],
28 | color: [0.0, 0.0, 0.0],
29 | },
30 | Vertex {
31 | position: [-0.5, -0.5, -0.6],
32 | color: [1.0, 1.0, 1.0],
33 | },
34 | Vertex {
35 | position: [0.5, -0.5, -0.6],
36 | color: [1.0, 1.0, 1.0],
37 | },
38 | Vertex {
39 | position: [0.0, 0.5, -0.6],
40 | color: [1.0, 1.0, 1.0],
41 | },
42 | ];
43 | ```
44 |
45 | Pretty simple; we have two triangles, one behind the other. The one in front is black and the one in back is in white. Let's run the code and see what happens.
46 |
47 | 
48 |
49 | That...doesn't look right. The white triangle is supposed to be behind the black one but it's the other way around, what's going on? What we're lacking is *depth testing*, the mechanism where vulkan checks what depth each vertex is at. In other words, with depth testing enabled our graphics hardware will be able to draw back-to-front with the furthest away vertices being drawn first. Right now, the vertices are being drawn in the order they are received, which is why we currently have this problem.
50 |
51 | Luckily for us, Vulkan makes it very easy to turn on depth testing. Let's take a look at that now.
52 |
53 | #### Render Pass
54 |
55 | We do depth testing through something called a *depth_stencil*. The way this works is that it's another render attachment (data buffer) that we attach to the render pass we want depth testing for. It might sound like it might be a bit difficult but it's actually pretty simple. Let's look at what our new render pass declaration looks like.
56 |
57 | ```rust
58 | let render_pass = vulkano::single_pass_renderpass!(
59 | device.clone(),
60 | attachments: {
61 | color: {
62 | load: Clear,
63 | store: Store,
64 | format: swapchain.format(),
65 | samples: 1,
66 | },
67 | depth: {
68 | load: Clear,
69 | store: DontCare,
70 | format: Format::D16_UNORM,
71 | samples: 1,
72 | }
73 | },
74 | pass: {
75 | color: [color],
76 | depth_stencil: {depth}
77 | }
78 | ).unwrap();
79 | ```
80 |
81 | As you can see, our `depth` attachment looks a lot like our `color` attachment. There are, however, two things to take note of. First, our `store` value is `DontCare`. This means that our graphics driver can do what it wants with the data, including destroying it if it wishes. This is because this attachment is used within the rendering process by the driver and we're not interested in retrieving it later. The second thing is that our `format` is *not* the same format as our swapchain. This is because is serves as a *stencil* rather than a full-on render target. So we only need a format which can store the depth information.
82 |
83 | Also, just like `color` we could have called `depth` anything but it's most idiomatic to name our depth attachment after its function. It's not a big problem when you only have two attachments in a single render pass but more complicated workflows will have a lot more to keep track of. Giving everything sensible names will save yourself a lot of annoyance down the line.
84 |
85 | #### Graphics pipeline
86 |
87 | Our render pass tells Vulkan *what* is available but to tell Vulkan *how to use it* we need to update our pipeline declaration. Thankfully, this is even easier than updating our render pass.
88 |
89 | ```rust
90 | let pipeline = GraphicsPipeline::start()
91 | .vertex_input_state(BuffersDefinition::new().vertex::())
92 | .vertex_shader(vs.entry_point("main").unwrap(), ())
93 | .input_assembly_state(InputAssemblyState::new())
94 | .viewport_state(ViewportState::viewport_dynamic_scissor_irrelevant())
95 | .fragment_shader(fs.entry_point("main").unwrap(), ())
96 | .depth_stencil_state(DepthStencilState::simple_depth_test())
97 | .render_pass(Subpass::from(render_pass.clone(), 0).unwrap())
98 | .build(device.clone())
99 | .unwrap();
100 | ```
101 |
102 | our only new line is `.depth_stencil_state(DepthStencilState::simple_depth_test())` and it instructs Vulkan to use our attached depth stencil. Like with `input_assembly_state` there are more complex things we could do but for now the simplest option is all we need.
103 |
104 | #### Framebuffer
105 |
106 | We have a new framebuffer attachment declared in our renderpass so we need to make sure to add it to our framebuffer declarations as well.
107 |
108 | ```rust
109 | let dimensions = images[0].dimensions().width_height();
110 | viewport.dimensions = [dimensions[0] as f32, dimensions[1] as f32];
111 | let depth_buffer = ImageView::new_default(
112 | AttachmentImage::transient(allocator, dimensions, Format::D16_UNORM).unwrap(),
113 | )
114 | .unwrap();
115 |
116 | images
117 | .iter()
118 | .map(|image| {
119 | let view = ImageView::new_default(image.clone()).unwrap();
120 | Framebuffer::new(
121 | render_pass.clone(),
122 | FramebufferCreateInfo {
123 | attachments: vec![view, depth_buffer.clone()],
124 | ..Default::default()
125 | },
126 | )
127 | .unwrap()
128 | })
129 | .collect::>()
130 | ```
131 |
132 | Our call to `AttachmentImage::transient` is how we create the actual buffer that will be used in the framebuffer attachment. Since we don't care what happens to it once we're done, it can be a transient image.
133 |
134 | Also, since this is being taken care of in our `window_size_dependent_setup` helper function, we'll need to expand the parameter list to pass in a `StandardMemoryAllocator`, needed to create the attachment image.
135 |
136 | ```rust
137 | fn window_size_dependent_setup(
138 | allocator: &StandardMemoryAllocator,
139 | images: &[Arc],
140 | render_pass: Arc,
141 | viewport: &mut Viewport,
142 | ) -> Vec> {
143 | // ....
144 | }
145 | ```
146 |
147 | #### Clear colors
148 |
149 | The last thing we need to do is set the clear colors. This is an easy thing to miss but important. Each framebuffer attachment we use needs to have its own clear color.
150 |
151 | ```rust
152 | let clear_values = vec![Some([0.0, 0.68, 1.0, 1.0].into()), Some(1.0.into())];
153 | ```
154 |
155 | Two things to notice here:
156 | - because our depth buffer is in a format that takes a single value per vertex rather than an array we can get away with using `1.0` as the clear value rather than a color vector
157 | - the clear values **must** be listed in the same order as the buffer attachments. This is an easy thing to get wrong, so just keep it in mind.
158 |
159 | #### Running our new code
160 |
161 | Re-run our code and you should see that everything is now in the expected order with the black triangle in front of the white one.
162 |
163 | 
164 |
165 | Not the most exciting image, I know, but now that we have depth sorted out we are ready to start moving on to more complicated scenes.
166 |
167 | In this lesson you also got your first taste of using multiple attachments, something which will be very useful in future lessons.
168 |
169 | [lesson source code](https://github.com/taidaesal/vulkano_tutorial/tree/gh-pages/lessons/4.%20Depth)
170 |
--------------------------------------------------------------------------------
/docs/section_5.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Face-Culling
4 | back_link: "./section_4.html"
5 | next_link: "./section_6.html"
6 | ---
7 |
8 | # Winding Order and Face Culling
9 |
10 | Much like depth testing, up until now we've been overlooking a concept that's fundamental to getting complicated scenes to work: winding order. What's that you might ask? It's nothing more complicated than the order in which we specify a triangle's vertices. Consider the following diagram:
11 |
12 | 
13 |
14 | A triangle is defined by three vertices and, up until now, we've been listing them in whatever order we please; however, Vulkan would very much *like* to care about that order for reasons we'll touch on in a second.
15 |
16 | Winding order can be either clockwise or counter-clockwise. A clockwise winding for the triangle above would be `A -> B -> C` whereas a counter-clockwise winding would be `A -> C -> B`. Conceptually it isn't very difficult but it can easily trip you up if you don't pay attention to it.
17 |
18 | Okay, that's great and all but why should we care? What winding lets us do is figure out which triangles are facing away from us due to a neat math trick. If a triangle has clockwise winding when it's facing us, if we turn it around it will appear to us to have a counter-clockwise winding instead. This lets Vulkan silently cull (or drop) these vertices which aren't facing us. A complicated scene might have hundreds of thousands or even millions of triangles in its raw data, but around half of those will be facing away from us and invisible to the user at any given time. By using face winding we can halve the amount of rendering our graphics hardware needs to do. It's an inexpensive trick, but one which frees up *a lot* of graphics hardware capability to use for things we care about.
19 |
20 | ## Example
21 |
22 | Okay, a simple example is below. Let's use the same code as we did for our depth testing but modify it a little bit. Let's set it so that the black triangle uses counter-clockwise winding while the white triangle uses clockwise winding.
23 | ```rust
24 | let vertices = [
25 | Vertex {
26 | position: [-0.5, 0.5, -0.5],
27 | color: [0.0, 0.0, 0.0],
28 | },
29 | Vertex {
30 | position: [0.5, 0.5, -0.5],
31 | color: [0.0, 0.0, 0.0],
32 | },
33 | Vertex {
34 | position: [0.0, -0.5, -0.5],
35 | color: [0.0, 0.0, 0.0],
36 | },
37 | Vertex {
38 | position: [-0.5, -0.5, -0.6],
39 | color: [1.0, 1.0, 1.0],
40 | },
41 | Vertex {
42 | position: [0.5, -0.5, -0.6],
43 | color: [1.0, 1.0, 1.0],
44 | },
45 | Vertex {
46 | position: [0.0, 0.5, -0.6],
47 | color: [1.0, 1.0, 1.0],
48 | },
49 | ];
50 | ```
51 |
52 | If you run your code now you'll see that both triangles show up, exactly as in the last lesson. Let's change that now.
53 |
54 | #### Pipeline
55 |
56 | To tell Vulkan we want to enable face-culling we need to add some commands to our Pipeline.
57 |
58 | ```rust
59 | let pipeline = GraphicsPipeline::start()
60 | .vertex_input_state(BuffersDefinition::new().vertex::())
61 | .vertex_shader(vs.entry_point("main").unwrap(), ())
62 | .input_assembly_state(InputAssemblyState::new())
63 | .viewport_state(ViewportState::viewport_dynamic_scissor_irrelevant())
64 | .fragment_shader(fs.entry_point("main").unwrap(), ())
65 | .depth_stencil_state(DepthStencilState::simple_depth_test())
66 | .rasterization_state(RasterizationState::new().cull_mode(CullMode::Back))
67 | .render_pass(Subpass::from(render_pass.clone(), 0).unwrap())
68 | .build(device.clone())
69 | .unwrap();
70 | ```
71 |
72 | `.rasterization_state` lets us change a number of settings including depth clamping, whether we want to fill in our polygons, and, most importantly for us right now, if we want to use face-culling. By default, the `RasterizationState` does not have culling enabled, so we turn it on with `.cull_mode(CullMode::Back)`. We can cull everything in front as well if we wish, as well as change the winding order. The default winding order is counter-clockwise. You can change this by adding `.front_face(FrontFace::Clockwise)` after `.cull_mode(..)`
73 |
74 | Run the code and we should see the white triangle has disappeared, exactly as expected.
75 |
76 | 
77 |
78 | As with depth testing, we will be leaving this feature on for all future lessons.
79 |
80 | [lesson source code](https://github.com/taidaesal/vulkano_tutorial/tree/gh-pages/lessons/5.%20Face%20and%20Winding%20Order)
81 |
--------------------------------------------------------------------------------
/lessons/1. Initialization/Cargo.toml:
--------------------------------------------------------------------------------
1 | [package]
2 | name = "lesson_1"
3 | version = "0.32.0"
4 | authors = ["taidaesal"]
5 | edition = "2021"
6 |
7 | [dependencies]
8 | vulkano = "0.32.3"
9 | vulkano-shaders = "0.32.0"
10 | vulkano-win = "0.32.0"
11 | winit = "0.27.3"
12 |
--------------------------------------------------------------------------------
/lessons/10. Uniform Refactoring/Cargo.toml:
--------------------------------------------------------------------------------
1 | [package]
2 | name = "lesson_10"
3 | version = "0.32.0"
4 | authors = ["taidaesal"]
5 | edition = "2021"
6 |
7 | [dependencies]
8 | bytemuck = { version = "1.12.1", features = ["derive", "extern_crate_std", "min_const_generics"] }
9 | nalgebra-glm = "0.17.0"
10 | vulkano = "0.32.3"
11 | vulkano-shaders = "0.32.0"
12 | vulkano-win = "0.32.0"
13 | winit = "0.27.3"
14 |
--------------------------------------------------------------------------------
/lessons/10. Uniform Refactoring/src/model.rs:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2022 taidaesal
2 | // Licensed under the MIT license
3 | //
4 |
5 | #![allow(dead_code)]
6 | use super::obj_loader::{Loader, NormalVertex};
7 |
8 | use nalgebra_glm::{identity, inverse_transpose, rotate_normalized_axis, translate, TMat4, TVec3};
9 | use std::cell::Cell;
10 |
11 | /// Holds our data for a renderable model, including the model matrix data
12 | ///
13 | /// Note: When building an instance of `Model` the loader will assume that
14 | /// the input obj file is in clockwise winding order. If it is already in
15 | /// counter-clockwise winding order, call `.invert_winding_order(false)`
16 | /// when building the `Model`.
17 | pub struct Model {
18 | data: Vec,
19 | translation: TMat4,
20 | rotation: TMat4,
21 |
22 | // We might call multiple translation/rotation calls
23 | // in between asking for the model matrix. This lets us
24 | // only recreate the model matrices when needed.
25 | // Use a Cell with the interior mutability pattern,
26 | // so that it can be modified by methods that don't take &mut self
27 | cache: Cell