-
Notifications
You must be signed in to change notification settings - Fork 102
/
index.html
256 lines (251 loc) · 8.95 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../common-revealjs/css/reveal.css">
<link rel="stylesheet" href="../common-revealjs/css/theme/white.css">
<link rel="stylesheet" href="../common-revealjs/css/custom.css">
<script>
// This is needed when printing the slides to pdf
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? '../common-revealjs/css/print/pdf.css' : '../common-revealjs/css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<script>
// This is used to display the static images on each slide,
// See global-images in this html file and custom.css
(function() {
if(window.addEventListener) {
window.addEventListener('load', () => {
let slides = document.getElementsByClassName("slide-background");
if (slides.length === 0) {
slides = document.getElementsByClassName("pdf-page")
}
// Insert global images on each slide
for(let i = 0, max = slides.length; i < max; i++) {
let cln = document.getElementById("global-images").cloneNode(true);
cln.removeAttribute("id");
slides[i].appendChild(cln);
}
// Remove top level global images
let elem = document.getElementById("global-images");
elem.parentElement.removeChild(elem);
}, false);
}
})();
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<div id="global-images" class="global-images">
<img src="../common-revealjs/images/sycl_academy.png" />
<img src="../common-revealjs/images/sycl_logo.png" />
<img src="../common-revealjs/images/trademarks.png" />
<img src="../common-revealjs/images/codeplay.png" />
</div>
<!--Slide 1-->
<section class="hbox">
<div class="hbox" data-markdown>
## Image Convolution
</div>
</section>
<!--Slide 2-->
<section class="hbox" data-markdown>
## Learning Objectives
* Learn about image convolutions and what makes them a good problem for solving on a GPU
* Learn what a naive image convolution may look like
</section>
<!--Slide 3-->
<section>
<div class="hbox" data-markdown>
#### Image convolution
</div>
<div class="container" data-markdown>
Over the next few lectures we will be looking at some common GPU optimizations with an image convolution as the motivational example.
</div>
<div class="container" data-markdown>
* A good problem to solve on a GPU.
* Can take advantage of a number of common optimizations.
* Convolution is a very powerful algorithm with many applications.
* Deep neural networks.
* Image processing.
</div>
</section>
<!--Slide 3-->
<section>
<div class="hbox" data-markdown>
#### Why are image convolutions good on a GPU?
</div>
<div class="container" data-markdown>
* The algorithm is **embarrassingly parallel**.
* Each work-item in the computation can be calculated entirely independently.
* The algorithm is computation heavy.
* A large number of operations are performed for each work-item in the computation, particularly when using large filters.
* The algorithm requires a large bandwidth.
* A lot of data must be passed through the GPU to process an image, particularly if the image is very high resolution.
</div>
</section>
<!--Slide 4-->
<section>
<div class="hbox" data-markdown>
#### Image convolution definition
</div>
<div class="container" data-markdown>
</div>
</section>
<!--Slide 5-->
<section>
<div class="hbox" data-markdown>
#### Image convolution definition
</div>
<div class="container">
<div class="col" data-markdown>
</div>
<div class="col" data-markdown>
* A filter of a given size is applied as a stencil to the position of each pixel in the input image.
* Each pixel covered by the filter is then multiples with the corresponding element in the filter.
* The result of these multiplications is then summed to give the resulting output pixel.
* Here we have a 3x3 gaussian blur approximation as an example.
</div>
</div>
</section>
<!--Slide 6-->
<section>
<div class="hbox" data-markdown>
#### Image convolution example
</div>
<div class="container" data-markdown>
</div>
</section>
<!--Slide 7-->
<section>
<div class="hbox" data-markdown>
#### Image convolution data flow
</div>
<div class="container">
<div class="col" data-markdown>
</div>
<div class="col" data-markdown>
* We have a single kernel function.
* It must read from the input image data and writes to the output image data.
* It must also read from the filter.
* The input image data and the filter don't need to be copied back to the host.
* The output image data can be uninitialized.
</div>
</div>
</section>
<!--Slide 8-->
<section>
<div class="hbox" data-markdown>
#### Implementation
</div>
<div class="container" data-markdown>
* We provide a naive implementation of a SYCL application which implements the image convolution algorithm.
* This will be the basis for optimization in later lectures and exercises.
* The implementation uses the stb image library to allow us to visualize our results.
* The implementation also uses a benchmark function to allow us to measure the performance as we make optimizations.
</div>
</section>
<!--Slide 9-->
<section>
<div class="hbox" data-markdown>
#### Reference image
</div>
<div class="col" data-markdown>
</div>
<div class="container" data-markdown>
* We provide a reference image to use in the exercise.
* This is in Code_Exercises/Images
* This image is a 512x512 RGBA png.
* Feel free to use your own image but we recommend
keeping to this format.
</div>
</section>
<!--Slide 10-->
<section>
<div class="hbox" data-markdown>
#### Input/output image locations
</div>
<div class="container">
<code>
<pre>
auto inputImageFile = "../Code_Exercises/Images/dogs.png";
auto outputImageFile = ../Code_Exercises/Images/blurred_dogs.png";
</code></pre>
</div>
<div class="container" data-markdown>
* The reference code and the solutions to the remaining
exercises use these strings to refernce the location of
the input and output image.
* Before compiling these you will have to update this to
point to the image in the development environment.
</div>
</section>
<!--Slide 11-->
<section>
<div class="hbox" data-markdown>
#### Convolution filters
</div>
<div class="container">
<code>
<pre>
auto filter = util::generate_filter(util::filter_type filterType, int width);
</code></pre>
</div>
<div class="container" data-markdown>
* The utility for generating the filter data takes a
`filter_type` enum which can be either `identity` or
`blur` and a width.
* Feel free to experiment with different variations.
* Note that the filter width should always be an odd
value.
</div>
</section>
<!--Slide 12-->
<section>
<div class="hbox" data-markdown>
#### Naive image convolution performance
</div>
<div class="container" data-markdown>
</div>
</section>
<!--Slide 13-->
<section>
<div class="hbox" data-markdown>
## Questions
</div>
</section>
<!--Slide 14-->
<section>
<div class="hbox" data-markdown>
#### Exercise
</div>
<div class="container" data-markdown>
Code_Exercises/Image_Convolution/reference
</div>
<div class="container" data-markdown>
Take a look at the naive image convolution code provided
and familiarize yourself with it.
</div>
</section>
</div>
</div>
<script src="../common-revealjs/js/reveal.js"></script>
<script src="../common-revealjs/plugin/markdown/marked.js"></script>
<script src="../common-revealjs/plugin/markdown/markdown.js"></script>
<script src="../common-revealjs/plugin/notes/notes.js"></script>
<script>
Reveal.initialize({mouseWheel: true, defaultNotes: true});
Reveal.configure({ slideNumber: true });
</script>
</body>
</html>