slides/ogn-52-fiducial-marker-detection
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Thin out the presentation and notes

Browse source 
It was a little too close to the time limit
This commit is contained in:
Jake Howard 2022-11-14 21:48:15 +00:00
parent 2d0c301dad
commit 44be5ab82a
Signed by: jake
GPG key ID: 57AFB45680EDD477
4 changed files with 41 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/img/not-hotdog.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 683 KiB

BIN
src/img/object-recognition.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 489 KiB

163
src/index.html
View file

@ -31,7 +31,7 @@
</section>
<section data-background-iframe="https://www.youtube-nocookie.com/embed/xiDS58Htuh4?autoplay=1&start=24">
<aside class="notes" data-markdown>
- Student Robotics
- I volunteer for Student Robotics
- Charity to help students get into STEM
- Autonomous robotics competition
- 16 - 19 year olds
@ -40,105 +40,24 @@
</section>
</section>
<section>
<section data-background-image="https://live.staticflickr.com/8718/17123916289_1cbc4c5210_k.jpg">
<h1 class="r-fit-text text-shadow">Environment</h1>
<section data-background-image="https://live.staticflickr.com/2827/32969459924_164c509e20_k.jpg">
<aside class="notes" data-markdown>
- Robots need to sense their environments
- As humans, we rely quite a lot on sight
- Competitors, as humans, also do the same
- Lots of these _things_ dotted around the arena
- What are they?
</aside>
</section>
<section data-background-image="https://live.staticflickr.com/2837/33771948196_3cf1b5e3e5_k.jpg">
<aside class="notes" data-markdown>
- Sight is a powerful sense
- Ultrasound sensors can't distinguish between objects
- Switches are dull
- Eyes can detect objects, get distances, colour etc
- Only if they know what they're doing
</aside>
</section>
</section>
<section data-background-image="https://images.unsplash.com/photo-1504639725590-34d0984388bd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80">
<h2 class="text-shadow">Computer Vision</h2>
<aside class="notes" data-markdown>
- Requires the world of computer Vision
- Been around since late 1960s
- Universities pioneering early AI
- Not machine learning, the old kind
- Lots of `if` statements
- Some techniques unchanged to this day
</aside>
</section>
<section>
<section data-background-image="./img/object-recognition.png">
<h2 class="text-shadow">Object Recognition</h2>
<h4 class="text-shadow">The <span class="has-text-success">hot new thing</span></h4>
<aside class="notes" data-markdown>
- More modern machine learning
- 2 stages
- First you train a model
- Use that model to detect things
- Not quite ideal for our use case...
</aside>
</section>
<section data-background-image="./img/not-hotdog.png">
<h2 class="text-shadow">Prone to errors</h2>
<aside class="notes" data-markdown>
- Prone to errors
- Different lighting / shadows can affect detection
- Black box
</aside>
</section>
<section data-background-image="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80">
<h2 class="text-shadow">Computationally intensive</h2>
<aside class="notes" data-markdown>
- Tonnes of computation
- However is done once upfront
- Fairly fast to detect
- Our robos are just Raspberry Pis
</aside>
</section>
<section>
<h2 class="r-fit-text">What else?</h2>
<aside class="notes" data-markdown>
- What other options do we have?
</aside>
</section>
</section>
<section>
<section data-background-image="https://april.eecs.umich.edu/media/apriltag/apriltagrobots_overlay.jpg">
<h2 class="text-shadow">Fiducial Markers</h2>
<aside class="notes" data-markdown>
- Enter fiducial markers!
- Fiducial markers!
- Look sorta like QR codes
- Just a single number
- Just a single number
- Simpler, so they're easier to detect
</aside>
</section>
<section data-background-image="https://docs.opencv.org/4.x/singlemarkersaxes.jpg">
<h2 class="text-shadow">Location</h2>
<aside class="notes" data-markdown>
- Accurately detect edges, see where in our FoV it is
- If we know how big it's meant to be, derive distance
- We know it's a square, derive angles
</aside>
</section>
<section data-background-image="https://live.staticflickr.com/2827/32969459924_164c509e20_k.jpg">
<h2 class="text-shadow r-fit-text">We put them <strong>everywhere</strong>!</h2>
<aside class="notes" data-markdown>
- Abundance of sources
- Arena walls
- Game props (tokens etc)
- Location of any of them
- If you know where the marker is, you know where you are
</aside>
</section>
<section>
<h2 class="r-fit-text">How do fiducial markers work?</h2>
<aside class="notes" data-markdown>
- All well and good knowing they exist
- Tools out there to help make it easier
- Not good enough
- How does it actually _work_?
</aside>
</section>
@ -158,24 +77,25 @@
- Images aren't black and white
- This slide is
- Markers _are_
- Discard the colour so the data we're working with is easier
- Grey is still more than enough data
- Black and white!
- Thresholding
- Naive thresholding based on a value
- Not greyscale
- Much less data to be working with
- Thresholding achieves this
- Naive thresholding based on the entire image
- Adaptive thresholding looks for hotspots and edges
- Useful in future
- Useful in future stages
</aside>
</section>
<section>
<section>
<h2 class="r-fit-text">3. Edge Detection</h2>
<aside class="notes" data-markdown>
- Basically "find the squares"
- Marker edges are straight lines
- Markers are squares
- Well, quadralaterals
- Filter to find hard edges
- Are neighbouring pixels sufficiently different from eachother?
- Markers are squares
- Well, quadralaterals
- Find collections with 4 sides
</aside>
</section>
@ -193,28 +113,28 @@
</section>
</section>
<section data-background-image="https://docs.opencv.org/4.x/singlemarkersoriginal.jpg">
<h2 class="r-fit-text text-shadow">4. <em>Distortion</em></h2>
<aside class="notes" data-markdown>
- Highly unlikely a marker is directly in front of you
- Want the simplest possible case when decoding
- Remove the need for special casing later
- Make our lives easier!
- Skew the image a bit
- Same process used for those paper scanning apps
- Markers are now always straight on
</aside>
<h2 class="r-fit-text text-shadow">4. <em>Distortion</em></h2>
<aside class="notes" data-markdown>
- Highly unlikely a marker is directly in front of you
- Want the simplest possible case when decoding
- Remove the need for special casing later
- Make our lives easier!
- Skew the image a bit
- Same process used for those paper scanning apps
- Markers are now always straight on
</aside>
</section>
<section data-background-image="https://docs.opencv.org/4.x/bitsextraction2.png" data-background-size="contain">
<h2 class="r-fit-text text-shadow">5. Bit extraction</h2>
<aside class="notes" data-markdown>
- Convert the image into some 1s and 0s
- Images we have are much higher resolution than the markers
- We know how many pixels are in a marker
- Divide it down into cells
- Add some margins in case we're slightly off
- Average the remaining pixels in each cell
- Convert into 2D list
</aside>
<h2 class="r-fit-text text-shadow">5. Bit extraction</h2>
<aside class="notes" data-markdown>
- Convert the image into some 1s and 0s
- Images we have are much higher resolution than the markers
- We know how many pixels are in a marker
- Divide it down into cells
- Add some margins in case we're slightly off
- Average the remaining pixels in each cell
- Convert into 2D list
</aside>
</section>
<section>
<h2 class="r-fit-text">6. Decoding</h2>
@ -235,18 +155,20 @@
<aside class="notes" data-markdown>
- And that's it
- We can now find markers in a given image
- ... Almost
- But what if we wanted to do a little more?
</aside>
</section>
<section data-background-image="https://docs.opencv.org/4.x/singlemarkersaxes.jpg">
<h2 class="r-fit-text text-shadow">7. Pose Estimation</h2>
<aside class="notes" data-markdown>
- Now know where there's a marker
- Which way is it facing?
- Now we know where there's a marker
- Which way is it facing?
- We know where the corners are
- With some calibration, if it knows what a known-size marker looks like, it can be used to determine how far away a marker is
- Camera lenses have some distortion (lenses aren't completely flat), so as the image moves around the camera, it skews.
- If we account for that, we can get accurate angles
- We can get the angle from that
- If we know the size of the marker, we can calculate its distance
- Some calibration per camera model is required
- Done once upfront
- Out the end, we get rotation and translations from the camera
- _complicated maths_
- `solvePnP` in OpenCV (entertaining name)
@ -296,9 +218,6 @@
- Working out what something is
</aside>
</section>
<section data-background-image="https://github.com/ju1ce/April-Tag-VR-FullBody-Tracker/raw/master/images/demo.gif"></section>
<section data-background-iframe="https://www.youtube-nocookie.com/embed/5iV_hB08Uns?autoplay=1"></section>
<section data-background-iframe="https://www.youtube-nocookie.com/embed/4sRnVUHdM4A?autoplay=1&start=17"></section>
</section>
<section>
<section>

13
src/index.js
View file

@ -9,16 +9,3 @@ let deck = new Reveal({
hash: true
})
deck.initialize();
// HACK: Manually transform parcel's hashed file paths for background images
const FILE_MAPPING = {
"./img/not-hotdog.png": new URL("./img/not-hotdog.png", import.meta.url).toString(),
"./img/object-recognition.png": new URL("./img/object-recognition.png", import.meta.url).toString(),
};
for (const src in FILE_MAPPING) {
const dest = FILE_MAPPING[src];
document.querySelectorAll(`[data-background-image='${src}']`).forEach(e => {
e.dataset.backgroundImage = dest;
})
}