jsartoolkit5
Version:
Emscripten port of ARToolKit to JavaScript
115 lines (94 loc) • 3.22 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JSARToolKit5 examples</title>
<style>
html, body {
background: #fff;
color: #000;
font-family: sans-serif;
}
.example {
display: inline-block;
width: 260px;
min-height: 120px;
padding: 20px;
border: 1px solid #ccc;
vertical-align: top;
margin: 10px;
}
</style>
</head>
<body>
<h2>Canvas debug examples</h2>
<div class="example">
<a href="simple_image.html">
Image debug marker detection
</a>
<p>Runs AR marker detection on images.
<p>Not interactive.
</div>
<div class="example">
<a href="simple_video.html">
Video debug marker detection
</a>
<p>Uses pre-recorded video.
<p>Not interactive.
</div>
<div class="example">
<a href="simple_rtc.html">
Camera debug marker detection
</a>
<p>Uses device camera.
<p>Displays detected potential marker squares in debug output.
</div>
<h2>Three.js examples</h2>
<div class="example">
<a href="barcode_threejs.html">
Barcode tracking
</a>
<p>Uses device camera.
<p>Use <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/20.png">3x3 marker id 20</a>
</div>
<div class="example">
<a href="pattern_threejs.html">
Pattern marker tracking
</a>
<p>Uses device camera.
<p>Use <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Hiro%20pattern.pdf">Hiro pattern</a> and <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Kanji%20pattern.pdf">Kanji pattern</a>
</div>
<div class="example">
<a href="pattern_and_barcode_threejs.html">
Mixed pattern and barcode marker tracking
</a>
<p>Uses device camera.
<p>Use
<a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/5.png">3x3 marker id 5</a>,
<a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/20.png">3x3 marker id 20</a>,
<a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Hiro%20pattern.pdf">Hiro pattern</a> and <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Kanji%20pattern.pdf">Kanji pattern</a>
</div>
<div class="example">
<a href="multimarker_barcode_threejs.html">
Barcode multimarker tracking
</a>
<p>Uses device camera.
<p>Use <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Multi%20pattern%204x3%20(A4).pdf">Multi pattern 4x3</a>
</div>
<div class="example">
<a href="multimarker_pattern_threejs.html">
Pattern multimarker tracking
</a>
<p>Uses device camera.
<p>Use <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Multi%20pattern%20(template%2C%20A4).pdf">Multi pattern (template)</a>
</div>
<div class="example">
<a href="threejs_from_scratch.html">
Three.js example without helper API
</a>
<p>Uses pre-recorded video.
<p>Not interactive. Draws a cube on top of last detected marker square.
</div>
</body>
</html>