DemiSel
/
encantar-js
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Update demos

customisations
alemart 1 year ago
parent
98aa3c6674
commit
4c193eb247
40 changed files with 6683 additions and 164 deletions
Unified View Show Diff Stats
  1. BIN
      demos/assets/facebook.png
  2. BIN
      demos/assets/telegram.png
  3. BIN
      demos/assets/twitter.png
  4. BIN
      demos/assets/whatsapp.png
  5. 0
    0
      demos/assets/wing-man.png
  6. 1266
    0
      demos/hello-aframe/NOTICE.html
  7. 54
    0
      demos/hello-aframe/README.html
  8. 50
    0
      demos/hello-aframe/demo.css
  9. 6
    23
      demos/hello-aframe/demo.js
  10. 3
    7
      demos/hello-aframe/index.html
  11. BIN
      demos/hello-aframe/qr-code.gif
  12. 62
    0
      demos/hello-aframe/video.html
  13. 1248
    0
      demos/hello-three/NOTICE.html
  14. 54
    0
      demos/hello-three/README.html
  15. 50
    0
      demos/hello-three/demo.css
  16. 6
    23
      demos/hello-three/demo.js
  17. 3
    7
      demos/hello-three/index.html
  18. BIN
      demos/hello-three/qr-code.gif
  19. 27
    0
      demos/hello-three/video.html
  20. 1216
    0
      demos/hello-webgl/NOTICE.html
  21. 54
    0
      demos/hello-webgl/README.html
  22. 50
    0
      demos/hello-webgl/demo.css
  23. 14
    38
      demos/hello-webgl/demo.js
  24. 4
    8
      demos/hello-webgl/index.html
  25. BIN
      demos/hello-webgl/qr-code.gif
  26. 26
    0
      demos/hello-webgl/video.html
  27. 1089
    0
      demos/hello-world/NOTICE.html
  28. 54
    0
      demos/hello-world/README.html
  29. 50
    0
      demos/hello-world/demo.css
  30. 6
    25
      demos/hello-world/demo.js
  31. 3
    7
      demos/hello-world/index.html
  32. BIN
      demos/hello-world/qr-code.gif
  33. 24
    0
      demos/hello-world/video.html
  34. 1127
    0
      demos/touch-three/NOTICE.html
  35. 54
    0
      demos/touch-three/README.html
  36. 50
    0
      demos/touch-three/demo.css
  37. 6
    23
      demos/touch-three/demo.js
  38. 24
    0
      demos/touch-three/index.html
  39. BIN
      demos/touch-three/qr-code.gif
  40. 3
    3
      demos/touch-three/video.html

BIN
demos/assets/facebook.png View File


BIN
demos/assets/telegram.png View File


BIN
demos/assets/twitter.png View File


BIN
demos/assets/whatsapp.png View File


demos/assets/bird.png → demos/assets/wing-man.png View File


+ 1266
- 0
demos/hello-aframe/NOTICE.html
File diff suppressed because it is too large
View File


+ 54
- 0
demos/hello-aframe/README.html View File

1 
+<!doctype html>
2 
+<html>
3 
+    <head>
4 
+        <meta charset="utf-8">
5 
+        <title>MARTINS.js WebAR demo with A-Frame</title>
6 
+        <style>
7 
+        li + li {
8 
+            margin-top: 1em;
9 
+        }
10 
+
11 
+        ul {
12 
+            list-style-type: none;
13 
+            padding-left: 1em;
14 
+        }
15 
+
16 
+        img.qr-code {
17 
+            display: block;
18 
+            width: 256px;
19 
+            image-rendering: pixelated;
20 
+        }
21 
+
22 
+        a.button img {
23 
+            width: 6em;
24 
+            height: 6em;
25 
+            border-radius: 8px;
26 
+        }
27 
+        </style>
28 
+    </head>
29 
+    <body>
30 
+        <h1>WebAR with A-Frame</h1>
31 
+        <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
32 
+
33 
+        <h2>Menu</h2>
34 
+        <ul>
35 
+            <li><a href="index.html">Launch the WebAR experience</a></li>
36 
+            <li><a href="video.html">Test with a pre-recorded video</a></li>
37 
+            <li><a href="NOTICE.html">See the attribution notices</a></li>
38 
+            <li><a href="https://alemart.github.io/martins-js/gallery" target="_blank">See other WebAR demos</a></li>
39 
+        </ul>
40 
+
41 
+        <h2>QR code</h2>
42 
+        <img src="qr-code.gif" alt="QR code" class="qr-code">
43 
+
44 
+        <h2>Share</h2>
45 
+        <p>This application is powered by <a href="https://alemart.github.io/martins-js" target="_blank">MARTINS.js: GPU-accelerated Augmented Reality for the web</a>.</p>
46 
+        <div>
47 
+            <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Falemart.github.io/martins-js&quote=%23martins-js" target="_blank" rel="external" class="button"><img src="../assets/facebook.png" alt="Share on Facebook"></a>
48 
+            <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/martins-js&hashtags=martins-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
49 
+            <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/martins-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
50 
+            <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/martins-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
51 
+        </div>
52 
+    </body>
53 
+</html>
54 
+

+ 50
- 0
demos/hello-aframe/demo.css View File

1 
+body {
2 
+    background-color: black;
3 
+}
4 
+
5 
+#scan {
6 
+    width: 100%;
7 
+    height: 100%;
8 
+    object-fit: contain;
9 
+    opacity: 0.75;
10 
+}
11 
+
12 
+#about {
13 
+    position: absolute;
14 
+    right: 0;
15 
+    top: 0;
16 
+
17 
+    display: inline-block;
18 
+    margin: 0;
19 
+    padding: 0 0.25em;
20 
+
21 
+    color: #fff;
22 
+    font-size: 48px;
23 
+    font-weight: bold;
24 
+    font-family: monospace;
25 
+    text-decoration: none;
26 
+    text-align: center;
27 
+
28 
+    border-bottom: 4px solid;
29 
+    border-color: #5c3ba3;
30 
+    background: linear-gradient(0deg, #7b5ec4 0%, #bb7aff 100%);
31 
+    -webkit-tap-highlight-color: transparent;
32 
+}
33 
+
34 
+#about:hover {
35 
+    border-color: #6742b8;
36 
+    background: linear-gradient(0deg, #8b72cb 0%, #c894ff 100%);
37 
+}
38 
+
39 
+#about:active {
40 
+    border-color: #a5a500;
41 
+    background: linear-gradient(0deg, #cccc00 0%, #ffff00 100%);
42 
+}
43 
+
44 
+#about::before {
45 
+    content: '\24D8';
46 
+}
47 
+
48 
+#about:focus {
49 
+    outline: none;
50 
+}

+ 6
- 23
demos/hello-aframe/demo.js View File

1 
 /**
 1 
 /**
2 
- * @file MARTINS.js WebAR demo using A-Frame
3 
- * @version 1.0.2
2 
+ * @file MARTINS.js WebAR demo with A-Frame
3 
+ * @version 1.1.0
4 
  * @author Alexandre Martins (https://github.com/alemart)
 4 
  * @author Alexandre Martins (https://github.com/alemart)
5 
  * @license LGPL-3.0-or-later
 5 
  * @license LGPL-3.0-or-later
6 
  */
 6 
  */
31 
         hudContainer: document.getElementById('ar-hud')
 31 
         hudContainer: document.getElementById('ar-hud')
32 
     });
 32 
     });
33
33
34 
-    //const useWebcam = true;
35 
-    const useWebcam = (location.search.substr(1) == 'webcam');
36 
     const video = document.getElementById('my-video');
 34 
     const video = document.getElementById('my-video');
37 
-    const source = !useWebcam ? Martins.Source.Video(video) : Martins.Source.Camera();
35 
+    const useWebcam = (video === null);
36 
+    const source = useWebcam ?
37 
+        Martins.Source.Camera({ resolution: 'md' }) :
38 
+        Martins.Source.Video(video);
38
39
39 
     const session = await Martins.startSession({
 40 
     const session = await Martins.startSession({
40 
         mode: 'immersive',
 41 
         mode: 'immersive',
61
62
62 
     return session;
 63 
     return session;
63 
 }
 64 
 }
64 
-
65 
-// Toggle webcam
66 
-window.addEventListener('load', () => {
67 
-    const page = location.href.replace(/\?.*$/, '');
68 
-    const usingWebcam = (location.search.substr(1) == 'webcam');
69 
-    const button = document.getElementById('toggle-webcam');
70 
-
71 
-    if(!button)
72 
-        return;
73 
-
74 
-    button.innerHTML = usingWebcam ? '&#x1F39E' : '&#x1F3A5';
75 
-    button.addEventListener('click', () => {
76 
-        if(usingWebcam)
77 
-            location.href = page;
78 
-        else
79 
-            location.href = page + '?webcam';
80 
-    });
81 
-});

+ 3
- 7
demos/hello-aframe/index.html View File

3 
     <head>
 3 
     <head>
4 
         <meta charset="utf-8">
 4 
         <meta charset="utf-8">
5 
         <meta name="viewport" content="width=device-width,initial-scale=1">
 5 
         <meta name="viewport" content="width=device-width,initial-scale=1">
6 
-        <title>MARTINS.js WebAR demo using A-Frame</title>
7 
-        <link href="../assets/demo.css" rel="stylesheet">
6 
+        <title>MARTINS.js WebAR demo with A-Frame</title>
7 
+        <link href="demo.css" rel="stylesheet">
8 
         <script src="../../dist/martins.js"></script>
 8 
         <script src="../../dist/martins.js"></script>
9 
         <script src="https://cdn.jsdelivr.net/npm/aframe@1.3.0/dist/aframe-v1.3.0.min.js"></script>
 9 
         <script src="https://cdn.jsdelivr.net/npm/aframe@1.3.0/dist/aframe-v1.3.0.min.js"></script>
10 
         <script src="../assets/aframe-particle-system-component.min.js"></script>
 10 
         <script src="../assets/aframe-particle-system-component.min.js"></script>
15 
         <div id="ar-viewport">
 15 
         <div id="ar-viewport">
16 
             <div id="ar-hud" hidden>
 16 
             <div id="ar-hud" hidden>
17 
                 <img id="scan" src="../assets/scan.png">
 17 
                 <img id="scan" src="../assets/scan.png">
18 
-                <button id="toggle-webcam"></button>
18 
+                <a id="about" href="NOTICE.html"></a>
19 
             </div>
 19 
             </div>
20 
         </div>
 20 
         </div>
21 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
 21 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
22 
-        <video id="my-video" hidden muted loop playsinline autoplay>
23 
-            <source src="../assets/my-video.webm" type="video/webm" />
24 
-            <source src="../assets/my-video.mp4" type="video/mp4" />
25 
-        </video>
26
22
27 
         <!-- This is a scene -->
 23 
         <!-- This is a scene -->
28 
         <a-scene ar-scene>
 24 
         <a-scene ar-scene>

BIN
demos/hello-aframe/qr-code.gif View File


+ 62
- 0
demos/hello-aframe/video.html View File

1 
+<!doctype html>
2 
+<html>
3 
+    <head>
4 
+        <meta charset="utf-8">
5 
+        <meta name="viewport" content="width=device-width,initial-scale=1">
6 
+        <title>MARTINS.js WebAR demo with A-Frame</title>
7 
+        <link href="demo.css" rel="stylesheet">
8 
+        <script src="../../dist/martins.js"></script>
9 
+        <script src="https://cdn.jsdelivr.net/npm/aframe@1.3.0/dist/aframe-v1.3.0.min.js"></script>
10 
+        <script src="../assets/aframe-particle-system-component.min.js"></script>
11 
+        <script src="demo.js"></script>
12 
+        <script src="../assets/aframe-with-martins.js"></script>
13 
+    </head>
14 
+    <body>
15 
+        <div id="ar-viewport">
16 
+            <div id="ar-hud" hidden>
17 
+                <img id="scan" src="../assets/scan.png">
18 
+                <a id="about" href="NOTICE.html"></a>
19 
+            </div>
20 
+        </div>
21 
+        <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
22 
+        <video id="my-video" hidden muted loop playsinline autoplay>
23 
+            <source src="../assets/my-video.webm" type="video/webm" />
24 
+            <source src="../assets/my-video.mp4" type="video/mp4" />
25 
+        </video>
26 
+
27 
+        <!-- This is a scene -->
28 
+        <a-scene ar-scene>
29 
+            <a-camera ar-camera></a-camera>
30 
+
31 
+            <!-- Whatever you add to <ar-root> will appear in AR -->
32 
+            <ar-root>
33 
+
34 
+                <!-- Ground plane -->
35 
+                <a-plane position="0 -0.5 -0.5" rotation="-90 0 0" width="2" height="1" color="indigo">
36 
+
37 
+                    <!-- 3D model -->
38 
+                    <a-entity gltf-model="#my-3d-model"></a-entity>
39 
+
40 
+                    <!-- Particles -->
41 
+                    <a-entity rotation="90 0 0">
42 
+                        <a-entity position="0.75 0 0" particle-system="texture: ../assets/particle.png; color: #03f; opacity: 0.33; size: 20; maxAge: 0.64; velocityValue: 0 6.5 0; velocitySpread: 0 0 0; accelerationSpread: 2 0 2; particleCount: 2000"></a-entity>
43 
+                        <a-entity position="-0.75 0 0" particle-system="texture: ../assets/particle.png; color: #f70; opacity: 0.33; size: 20; maxAge: 0.64; velocityValue: 0 6.5 0; velocitySpread: 0 0 0; accelerationSpread: 2 0 2; particleCount: 2000"></a-entity>
44 
+                    </a-entity>
45 
+
46 
+                    <!-- Rotating text -->
47 
+                    <a-entity animation="property: rotation.z; from: 0; to: 360; dur: 2000; loop: true; easing: linear">
48 
+                        <a-text value="It works!" font="mozillavr" color="#fe3" scale="-1 -1 1" rotation="-90 0 0" position="0 0.40 1" align="center"></a-text>
49 
+                        <a-text value="Cool!" font="mozillavr" color="#8ef" scale="1 1 1" rotation="90 0 0" position="0 -0.40 1" align="center"></a-text>
50 
+                    </a-entity>
51 
+
52 
+                </a-plane>
53 
+
54 
+            </ar-root>
55 
+
56 
+            <!-- Declare external media files here -->
57 
+            <a-assets>
58 
+                <a-asset-item id="my-3d-model" src="../assets/my-3d-model.glb"></a-asset-item>
59 
+            </a-assets>
60 
+        </a-scene>
61 
+    </body>
62 
+</html>

+ 1248
- 0
demos/hello-three/NOTICE.html
File diff suppressed because it is too large
View File


+ 54
- 0
demos/hello-three/README.html View File

1 
+<!doctype html>
2 
+<html>
3 
+    <head>
4 
+        <meta charset="utf-8">
5 
+        <title>MARTINS.js WebAR demo with three.js</title>
6 
+        <style>
7 
+        li + li {
8 
+            margin-top: 1em;
9 
+        }
10 
+
11 
+        ul {
12 
+            list-style-type: none;
13 
+            padding-left: 1em;
14 
+        }
15 
+
16 
+        img.qr-code {
17 
+            display: block;
18 
+            width: 256px;
19 
+            image-rendering: pixelated;
20 
+        }
21 
+
22 
+        a.button img {
23 
+            width: 6em;
24 
+            height: 6em;
25 
+            border-radius: 8px;
26 
+        }
27 
+        </style>
28 
+    </head>
29 
+    <body>
30 
+        <h1>WebAR with three.js</h1>
31 
+        <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
32 
+
33 
+        <h2>Menu</h2>
34 
+        <ul>
35 
+            <li><a href="index.html">Launch the WebAR experience</a></li>
36 
+            <li><a href="video.html">Test with a pre-recorded video</a></li>
37 
+            <li><a href="NOTICE.html">See the attribution notices</a></li>
38 
+            <li><a href="https://alemart.github.io/martins-js/gallery" target="_blank">See other WebAR demos</a></li>
39 
+        </ul>
40 
+
41 
+        <h2>QR code</h2>
42 
+        <img src="qr-code.gif" alt="QR code" class="qr-code">
43 
+
44 
+        <h2>Share</h2>
45 
+        <p>This application is powered by <a href="https://alemart.github.io/martins-js" target="_blank">MARTINS.js: GPU-accelerated Augmented Reality for the web</a>.</p>
46 
+        <div>
47 
+            <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Falemart.github.io/martins-js&quote=%23martins-js" target="_blank" rel="external" class="button"><img src="../assets/facebook.png" alt="Share on Facebook"></a>
48 
+            <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/martins-js&hashtags=martins-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
49 
+            <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/martins-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
50 
+            <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/martins-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
51 
+        </div>
52 
+    </body>
53 
+</html>
54 
+

+ 50
- 0
demos/hello-three/demo.css View File

1 
+body {
2 
+    background-color: black;
3 
+}
4 
+
5 
+#scan {
6 
+    width: 100%;
7 
+    height: 100%;
8 
+    object-fit: contain;
9 
+    opacity: 0.75;
10 
+}
11 
+
12 
+#about {
13 
+    position: absolute;
14 
+    right: 0;
15 
+    top: 0;
16 
+
17 
+    display: inline-block;
18 
+    margin: 0;
19 
+    padding: 0 0.25em;
20 
+
21 
+    color: #fff;
22 
+    font-size: 48px;
23 
+    font-weight: bold;
24 
+    font-family: monospace;
25 
+    text-decoration: none;
26 
+    text-align: center;
27 
+
28 
+    border-bottom: 4px solid;
29 
+    border-color: #5c3ba3;
30 
+    background: linear-gradient(0deg, #7b5ec4 0%, #bb7aff 100%);
31 
+    -webkit-tap-highlight-color: transparent;
32 
+}
33 
+
34 
+#about:hover {
35 
+    border-color: #6742b8;
36 
+    background: linear-gradient(0deg, #8b72cb 0%, #c894ff 100%);
37 
+}
38 
+
39 
+#about:active {
40 
+    border-color: #a5a500;
41 
+    background: linear-gradient(0deg, #cccc00 0%, #ffff00 100%);
42 
+}
43 
+
44 
+#about::before {
45 
+    content: '\24D8';
46 
+}
47 
+
48 
+#about:focus {
49 
+    outline: none;
50 
+}

+ 6
- 23
demos/hello-three/demo.js View File

1 
 /**
 1 
 /**
2 
- * @file MARTINS.js WebAR demo using THREE.js
3 
- * @version 1.0.2
2 
+ * @file MARTINS.js WebAR demo with three.js
3 
+ * @version 1.1.0
4 
  * @author Alexandre Martins (https://github.com/alemart)
 4 
  * @author Alexandre Martins (https://github.com/alemart)
5 
  * @license LGPL-3.0-or-later
 5 
  * @license LGPL-3.0-or-later
6 
  */
 6 
  */
126 
             hudContainer: document.getElementById('ar-hud')
 126 
             hudContainer: document.getElementById('ar-hud')
127 
         });
 127 
         });
128
128
129 
-        //const useWebcam = true;
130 
-        const useWebcam = (location.search.substr(1) == 'webcam');
131 
         const video = document.getElementById('my-video');
 129 
         const video = document.getElementById('my-video');
132 
-        const source = !useWebcam ? Martins.Source.Video(video) : Martins.Source.Camera();
130 
+        const useWebcam = (video === null);
131 
+        const source = useWebcam ?
132 
+            Martins.Source.Camera({ resolution: 'md' }) :
133 
+            Martins.Source.Video(video);
133
134
134 
         const session = await Martins.startSession({
 135 
         const session = await Martins.startSession({
135 
             mode: 'immersive',
 136 
             mode: 'immersive',
161 
     linkMartinsToTHREE(startARSession, animate, initialize);
 162 
     linkMartinsToTHREE(startARSession, animate, initialize);
162
163
163 
 });
 164 
 });
164 
-
165 
-// Toggle webcam
166 
-window.addEventListener('load', () => {
167 
-    const page = location.href.replace(/\?.*$/, '');
168 
-    const usingWebcam = (location.search.substr(1) == 'webcam');
169 
-    const button = document.getElementById('toggle-webcam');
170 
-
171 
-    if(!button)
172 
-        return;
173 
-
174 
-    button.innerHTML = usingWebcam ? '&#x1F39E' : '&#x1F3A5';
175 
-    button.addEventListener('click', () => {
176 
-        if(usingWebcam)
177 
-            location.href = page;
178 
-        else
179 
-            location.href = page + '?webcam';
180 
-    });
181 
-});

+ 3
- 7
demos/hello-three/index.html View File

3 
     <head>
 3 
     <head>
4 
         <meta charset="utf-8">
 4 
         <meta charset="utf-8">
5 
         <meta name="viewport" content="width=device-width,initial-scale=1">
 5 
         <meta name="viewport" content="width=device-width,initial-scale=1">
6 
-        <title>MARTINS.js WebAR demo using THREE.js</title>
7 
-        <link href="../assets/demo.css" rel="stylesheet">
6 
+        <title>MARTINS.js WebAR demo with three.js</title>
7 
+        <link href="demo.css" rel="stylesheet">
8 
         <script src="../../dist/martins.js"></script>
 8 
         <script src="../../dist/martins.js"></script>
9 
         <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js"></script>
 9 
         <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js"></script>
10 
         <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/loaders/GLTFLoader.js"></script>
 10 
         <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/loaders/GLTFLoader.js"></script>
15 
         <div id="ar-viewport">
 15 
         <div id="ar-viewport">
16 
             <div id="ar-hud" hidden>
 16 
             <div id="ar-hud" hidden>
17 
                 <img id="scan" src="../assets/scan.png">
 17 
                 <img id="scan" src="../assets/scan.png">
18 
-                <button id="toggle-webcam"></button>
18 
+                <a id="about" href="NOTICE.html"></a>
19 
             </div>
 19 
             </div>
20 
         </div>
 20 
         </div>
21 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
 21 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
22 
-        <video id="my-video" hidden muted loop playsinline autoplay>
23 
-            <source src="../assets/my-video.webm" type="video/webm" />
24 
-            <source src="../assets/my-video.mp4" type="video/mp4" />
25 
-        </video>
26 
     </body>
 22 
     </body>
27 
 </html>
 23 
 </html>

BIN
demos/hello-three/qr-code.gif View File


+ 27
- 0
demos/hello-three/video.html View File

1 
+<!doctype html>
2 
+<html>
3 
+    <head>
4 
+        <meta charset="utf-8">
5 
+        <meta name="viewport" content="width=device-width,initial-scale=1">
6 
+        <title>MARTINS.js WebAR demo with three.js</title>
7 
+        <link href="demo.css" rel="stylesheet">
8 
+        <script src="../../dist/martins.js"></script>
9 
+        <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js"></script>
10 
+        <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/loaders/GLTFLoader.js"></script>
11 
+        <script src="../assets/three-with-martins.js"></script>
12 
+        <script src="demo.js"></script>
13 
+    </head>
14 
+    <body>
15 
+        <div id="ar-viewport">
16 
+            <div id="ar-hud" hidden>
17 
+                <img id="scan" src="../assets/scan.png">
18 
+                <a id="about" href="NOTICE.html"></a>
19 
+            </div>
20 
+        </div>
21 
+        <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
22 
+        <video id="my-video" hidden muted loop playsinline autoplay>
23 
+            <source src="../assets/my-video.webm" type="video/webm" />
24 
+            <source src="../assets/my-video.mp4" type="video/mp4" />
25 
+        </video>
26 
+    </body>
27 
+</html>

+ 1216
- 0
demos/hello-webgl/NOTICE.html
File diff suppressed because it is too large
View File


+ 54
- 0
demos/hello-webgl/README.html View File

1 
+<!doctype html>
2 
+<html>
3 
+    <head>
4 
+        <meta charset="utf-8">
5 
+        <title>MARTINS.js WebAR demo with WebGL</title>
6 
+        <style>
7 
+        li + li {
8 
+            margin-top: 1em;
9 
+        }
10 
+
11 
+        ul {
12 
+            list-style-type: none;
13 
+            padding-left: 1em;
14 
+        }
15 
+
16 
+        img.qr-code {
17 
+            display: block;
18 
+            width: 256px;
19 
+            image-rendering: pixelated;
20 
+        }
21 
+
22 
+        a.button img {
23 
+            width: 6em;
24 
+            height: 6em;
25 
+            border-radius: 8px;
26 
+        }
27 
+        </style>
28 
+    </head>
29 
+    <body>
30 
+        <h1>WebAR with WebGL</h1>
31 
+        <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
32 
+
33 
+        <h2>Menu</h2>
34 
+        <ul>
35 
+            <li><a href="index.html">Launch the WebAR experience</a></li>
36 
+            <li><a href="video.html">Test with a pre-recorded video</a></li>
37 
+            <li><a href="NOTICE.html">See the attribution notices</a></li>
38 
+            <li><a href="https://alemart.github.io/martins-js/gallery" target="_blank">See other WebAR demos</a></li>
39 
+        </ul>
40 
+
41 
+        <h2>QR code</h2>
42 
+        <img src="qr-code.gif" alt="QR code" class="qr-code">
43 
+
44 
+        <h2>Share</h2>
45 
+        <p>This application is powered by <a href="https://alemart.github.io/martins-js" target="_blank">MARTINS.js: GPU-accelerated Augmented Reality for the web</a>.</p>
46 
+        <div>
47 
+            <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Falemart.github.io/martins-js&quote=%23martins-js" target="_blank" rel="external" class="button"><img src="../assets/facebook.png" alt="Share on Facebook"></a>
48 
+            <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/martins-js&hashtags=martins-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
49 
+            <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/martins-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
50 
+            <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/martins-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
51 
+        </div>
52 
+    </body>
53 
+</html>
54 
+

+ 50
- 0
demos/hello-webgl/demo.css View File

1 
+body {
2 
+    background-color: black;
3 
+}
4 
+
5 
+#scan {
6 
+    width: 100%;
7 
+    height: 100%;
8 
+    object-fit: contain;
9 
+    opacity: 0.75;
10 
+}
11 
+
12 
+#about {
13 
+    position: absolute;
14 
+    right: 0;
15 
+    top: 0;
16 
+
17 
+    display: inline-block;
18 
+    margin: 0;
19 
+    padding: 0 0.25em;
20 
+
21 
+    color: #fff;
22 
+    font-size: 48px;
23 
+    font-weight: bold;
24 
+    font-family: monospace;
25 
+    text-decoration: none;
26 
+    text-align: center;
27 
+
28 
+    border-bottom: 4px solid;
29 
+    border-color: #5c3ba3;
30 
+    background: linear-gradient(0deg, #7b5ec4 0%, #bb7aff 100%);
31 
+    -webkit-tap-highlight-color: transparent;
32 
+}
33 
+
34 
+#about:hover {
35 
+    border-color: #6742b8;
36 
+    background: linear-gradient(0deg, #8b72cb 0%, #c894ff 100%);
37 
+}
38 
+
39 
+#about:active {
40 
+    border-color: #a5a500;
41 
+    background: linear-gradient(0deg, #cccc00 0%, #ffff00 100%);
42 
+}
43 
+
44 
+#about::before {
45 
+    content: '\24D8';
46 
+}
47 
+
48 
+#about:focus {
49 
+    outline: none;
50 
+}

+ 14
- 38
demos/hello-webgl/demo.js View File

1 
 /**
 1 
 /**
2 
- * @file MARTINS.js WebAR demo using pure WebGL
3 
- * @version 1.0.2
2 
+ * @file MARTINS.js WebAR demo with WebGL
3 
+ * @version 1.1.0
4 
  * @author Alexandre Martins (https://github.com/alemart)
 4 
  * @author Alexandre Martins (https://github.com/alemart)
5 
  * @license LGPL-3.0-or-later
 5 
  * @license LGPL-3.0-or-later
6 
  */
 6 
  */
7
7
8 
-
9 
-
10 
 /*
 8 
 /*
11
9
12 
 WebGL low-level code:
 10 
 WebGL low-level code:
787 
     }
 785 
     }
788 
 }
 786 
 }
789
787
790 
-class Bird extends Sprite
788 
+class WingMan extends Sprite
791 
 {
 789 
 {
792 
     constructor(gl)
 790 
     constructor(gl)
793 
     {
 791 
     {
794 
-        Bird._count = Bird._count || 0;
795 
-        ++Bird._count;
792 
+        WingMan._count = WingMan._count || 0;
793 
+        ++WingMan._count;
796
794
797 
         super(gl);
 795 
         super(gl);
798
796
799 
-        this._image = document.getElementById('bird');
797 
+        this._image = document.getElementById('wing-man');
800 
         this.upload(this._image);
 798 
         this.upload(this._image);
801 
     }
 799 
     }
802
800
813 
     get _initialFrame()
 811 
     get _initialFrame()
814 
     {
 812 
     {
815 
         const n = 2;
 813 
         const n = 2;
816 
-        return (Bird._count % n) * Math.floor(this._numberOfFrames / n);
814 
+        return (WingMan._count % n) * Math.floor(this._numberOfFrames / n);
817 
     }
 815 
     }
818
816
819 
     get _transform()
 817 
     get _transform()
820 
     {
 818 
     {
821 
         return `
 819 
         return `
822 
         const float PI = float(${Math.PI});
 820 
         const float PI = float(${Math.PI});
823 
-        const float INITIAL_PHASE = PI * float(${Bird._count});
821 
+        const float INITIAL_PHASE = PI * float(${WingMan._count});
824 
         const vec3 INITIAL_POSITION = vec3(1.25 * cos(INITIAL_PHASE), -0.25, 2.0);
 822 
         const vec3 INITIAL_POSITION = vec3(1.25 * cos(INITIAL_PHASE), -0.25, 2.0);
825 
         const vec3 SCALE = vec3(0.7);
 823 
         const vec3 SCALE = vec3(0.7);
826
824
836 
     }
 834 
     }
837 
 }
 835 
 }
838
836
839 
-
840 
-
841 
-
842 
 /*
 837 
 /*
843
838
844 
 MARTINS.js + WebGL code:
 839 
 MARTINS.js + WebGL code:
853 
             new AnimatedPyramid(gl),
 848 
             new AnimatedPyramid(gl),
854 
             new AnimatedCube(gl),
 849 
             new AnimatedCube(gl),
855 
             new ItWorks(gl),
 850 
             new ItWorks(gl),
856 
-            new Bird(gl),
857 
-            new Bird(gl),
851 
+            new WingMan(gl),
852 
+            new WingMan(gl),
858 
         ];
 853 
         ];
859
854
860 
         function initGL(canvas)
 855 
         function initGL(canvas)
936 
             hudContainer: document.getElementById('ar-hud')
 931 
             hudContainer: document.getElementById('ar-hud')
937 
         });
 932 
         });
938
933
939 
-        //const useWebcam = true;
940 
-        const useWebcam = (location.search.substr(1) == 'webcam');
941 
         const video = document.getElementById('my-video');
 934 
         const video = document.getElementById('my-video');
942 
-        const source = !useWebcam ? Martins.Source.Video(video) : Martins.Source.Camera({
943 
-            resolution: 'md'
944 
-        });
935 
+        const useWebcam = (video === null);
936 
+        const source = useWebcam ?
937 
+            Martins.Source.Camera({ resolution: 'md' }) :
938 
+            Martins.Source.Video(video);
945
939
946 
         const session = await Martins.startSession({
 940 
         const session = await Martins.startSession({
947 
             mode: 'immersive',
 941 
             mode: 'immersive',
969 
         return session;
 963 
         return session;
970 
     }
 964 
     }
971 
 });
 965 
 });
972 
-
973 
-// Toggle webcam
974 
-window.addEventListener('load', () => {
975 
-    const page = location.href.replace(/\?.*$/, '');
976 
-    const usingWebcam = (location.search.substr(1) == 'webcam');
977 
-    const button = document.getElementById('toggle-webcam');
978 
-
979 
-    if(!button)
980 
-        return;
981 
-
982 
-    button.innerHTML = usingWebcam ? '&#x1F39E' : '&#x1F3A5';
983 
-    button.addEventListener('click', () => {
984 
-        if(usingWebcam)
985 
-            location.href = page;
986 
-        else
987 
-            location.href = page + '?webcam';
988 
-    });
989 
-});

+ 4
- 8
demos/hello-webgl/index.html View File

3 
     <head>
 3 
     <head>
4 
         <meta charset="utf-8">
 4 
         <meta charset="utf-8">
5 
         <meta name="viewport" content="width=device-width,initial-scale=1">
 5 
         <meta name="viewport" content="width=device-width,initial-scale=1">
6 
-        <title>MARTINS.js WebAR demo using pure WebGL</title>
7 
-        <link href="../assets/demo.css" rel="stylesheet">
6 
+        <title>MARTINS.js WebAR demo with WebGL</title>
7 
+        <link href="demo.css" rel="stylesheet">
8 
         <script src="../../dist/martins.js"></script>
 8 
         <script src="../../dist/martins.js"></script>
9 
         <script src="demo.js"></script>
 9 
         <script src="demo.js"></script>
10 
     </head>
 10 
     </head>
12 
         <div id="ar-viewport">
 12 
         <div id="ar-viewport">
13 
             <div id="ar-hud" hidden>
 13 
             <div id="ar-hud" hidden>
14 
                 <img id="scan" src="../assets/scan.png">
 14 
                 <img id="scan" src="../assets/scan.png">
15 
-                <button id="toggle-webcam"></button>
15 
+                <a id="about" href="NOTICE.html"></a>
16 
             </div>
 16 
             </div>
17 
         </div>
 17 
         </div>
18 
         <img id="it-works" src="../assets/it-works.png" hidden>
 18 
         <img id="it-works" src="../assets/it-works.png" hidden>
19 
-        <img id="bird" src="../assets/bird.png" hidden>
19 
+        <img id="wing-man" src="../assets/wing-man.png" hidden>
20 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
 20 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
21 
-        <video id="my-video" hidden muted loop playsinline autoplay>
22 
-            <source src="../assets/my-video.webm" type="video/webm" />
23 
-            <source src="../assets/my-video.mp4" type="video/mp4" />
24 
-        </video>
25 
     </body>
 21 
     </body>
26 
 </html>
 22 
 </html>

BIN
demos/hello-webgl/qr-code.gif View File


+ 26
- 0
demos/hello-webgl/video.html View File

1 
+<!doctype html>
2 
+<html>
3 
+    <head>
4 
+        <meta charset="utf-8">
5 
+        <meta name="viewport" content="width=device-width,initial-scale=1">
6 
+        <title>MARTINS.js WebAR demo with WebGL</title>
7 
+        <link href="demo.css" rel="stylesheet">
8 
+        <script src="../../dist/martins.js"></script>
9 
+        <script src="demo.js"></script>
10 
+    </head>
11 
+    <body>
12 
+        <div id="ar-viewport">
13 
+            <div id="ar-hud" hidden>
14 
+                <img id="scan" src="../assets/scan.png">
15 
+                <a id="about" href="NOTICE.html"></a>
16 
+            </div>
17 
+        </div>
18 
+        <img id="it-works" src="../assets/it-works.png" hidden>
19 
+        <img id="wing-man" src="../assets/wing-man.png" hidden>
20 
+        <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
21 
+        <video id="my-video" hidden muted loop playsinline autoplay>
22 
+            <source src="../assets/my-video.webm" type="video/webm" />
23 
+            <source src="../assets/my-video.mp4" type="video/mp4" />
24 
+        </video>
25 
+    </body>
26 
+</html>

+ 1089
- 0
demos/hello-world/NOTICE.html
File diff suppressed because it is too large
View File


+ 54
- 0
demos/hello-world/README.html View File

1 
+<!doctype html>
2 
+<html>
3 
+    <head>
4 
+        <meta charset="utf-8">
5 
+        <title>MARTINS.js WebAR template</title>
6 
+        <style>
7 
+        li + li {
8 
+            margin-top: 1em;
9 
+        }
10 
+
11 
+        ul {
12 
+            list-style-type: none;
13 
+            padding-left: 1em;
14 
+        }
15 
+
16 
+        img.qr-code {
17 
+            display: block;
18 
+            width: 256px;
19 
+            image-rendering: pixelated;
20 
+        }
21 
+
22 
+        a.button img {
23 
+            width: 6em;
24 
+            height: 6em;
25 
+            border-radius: 8px;
26 
+        }
27 
+        </style>
28 
+    </head>
29 
+    <body>
30 
+        <h1>WebAR template: Hello, world!</h1>
31 
+        <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
32 
+
33 
+        <h2>Menu</h2>
34 
+        <ul>
35 
+            <li><a href="index.html">Launch the WebAR experience</a></li>
36 
+            <li><a href="video.html">Test with a pre-recorded video</a></li>
37 
+            <li><a href="NOTICE.html">See the attribution notices</a></li>
38 
+            <li><a href="https://alemart.github.io/martins-js/gallery" target="_blank">See other WebAR demos</a></li>
39 
+        </ul>
40 
+
41 
+        <h2>QR code</h2>
42 
+        <img src="qr-code.gif" alt="QR code" class="qr-code">
43 
+
44 
+        <h2>Share</h2>
45 
+        <p>This application is powered by <a href="https://alemart.github.io/martins-js" target="_blank">MARTINS.js: GPU-accelerated Augmented Reality for the web</a>.</p>
46 
+        <div>
47 
+            <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Falemart.github.io/martins-js&quote=%23martins-js" target="_blank" rel="external" class="button"><img src="../assets/facebook.png" alt="Share on Facebook"></a>
48 
+            <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/martins-js&hashtags=martins-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
49 
+            <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/martins-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
50 
+            <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/martins-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
51 
+        </div>
52 
+    </body>
53 
+</html>
54 
+

+ 50
- 0
demos/hello-world/demo.css View File

1 
+body {
2 
+    background-color: black;
3 
+}
4 
+
5 
+#scan {
6 
+    width: 100%;
7 
+    height: 100%;
8 
+    object-fit: contain;
9 
+    opacity: 0.75;
10 
+}
11 
+
12 
+#about {
13 
+    position: absolute;
14 
+    right: 0;
15 
+    top: 0;
16 
+
17 
+    display: inline-block;
18 
+    margin: 0;
19 
+    padding: 0 0.25em;
20 
+
21 
+    color: #fff;
22 
+    font-size: 48px;
23 
+    font-weight: bold;
24 
+    font-family: monospace;
25 
+    text-decoration: none;
26 
+    text-align: center;
27 
+
28 
+    border-bottom: 4px solid;
29 
+    border-color: #5c3ba3;
30 
+    background: linear-gradient(0deg, #7b5ec4 0%, #bb7aff 100%);
31 
+    -webkit-tap-highlight-color: transparent;
32 
+}
33 
+
34 
+#about:hover {
35 
+    border-color: #6742b8;
36 
+    background: linear-gradient(0deg, #8b72cb 0%, #c894ff 100%);
37 
+}
38 
+
39 
+#about:active {
40 
+    border-color: #a5a500;
41 
+    background: linear-gradient(0deg, #cccc00 0%, #ffff00 100%);
42 
+}
43 
+
44 
+#about::before {
45 
+    content: '\24D8';
46 
+}
47 
+
48 
+#about:focus {
49 
+    outline: none;
50 
+}

+ 6
- 25
demos/hello-world/demo.js View File

1 
 /**
 1 
 /**
2 
- * @file MARTINS.js WebAR: Hello World demo
3 
- * @version 1.0.2
2 
+ * @file MARTINS.js WebAR template: Hello, world!
3 
+ * @version 1.1.0
4 
  * @author Alexandre Martins (https://github.com/alemart)
 4 
  * @author Alexandre Martins (https://github.com/alemart)
5 
  * @license LGPL-3.0-or-later
 5 
  * @license LGPL-3.0-or-later
6 
  */
 6 
  */
42 
             hudContainer: document.getElementById('ar-hud')
 42 
             hudContainer: document.getElementById('ar-hud')
43 
         });
 43 
         });
44
44
45 
-        //const useWebcam = true;
46 
-        const useWebcam = (location.search.substr(1) == 'webcam');
47 
         const video = document.getElementById('my-video');
 45 
         const video = document.getElementById('my-video');
48 
-        const source = !useWebcam ? Martins.Source.Video(video) : Martins.Source.Camera({
49 
-            resolution: 'md'
50 
-        });
46 
+        const useWebcam = (video === null);
47 
+        const source = useWebcam ?
48 
+            Martins.Source.Camera({ resolution: 'md' }) :
49 
+            Martins.Source.Video(video);
51
50
52 
         const session = await Martins.startSession({
 51 
         const session = await Martins.startSession({
53 
             mode: 'immersive',
 52 
             mode: 'immersive',
73 
         return session;
 72 
         return session;
74 
     }
 73 
     }
75 
 });
 74 
 });
76 
-
77 
-// Toggle webcam
78 
-window.addEventListener('load', () => {
79 
-    const page = location.href.replace(/\?.*$/, '');
80 
-    const usingWebcam = (location.search.substr(1) == 'webcam');
81 
-    const button = document.getElementById('toggle-webcam');
82 
-
83 
-    if(!button)
84 
-        return;
85 
-
86 
-    button.innerHTML = usingWebcam ? '&#x1F39E' : '&#x1F3A5';
87 
-    button.addEventListener('click', () => {
88 
-        if(usingWebcam)
89 
-            location.href = page;
90 
-        else
91 
-            location.href = page + '?webcam';
92 
-    });
93 
-});

+ 3
- 7
demos/hello-world/index.html View File

3 
     <head>
 3 
     <head>
4 
         <meta charset="utf-8">
 4 
         <meta charset="utf-8">
5 
         <meta name="viewport" content="width=device-width,initial-scale=1">
 5 
         <meta name="viewport" content="width=device-width,initial-scale=1">
6 
-        <title>MARTINS.js WebAR: Hello World demo</title>
7 
-        <link href="../assets/demo.css" rel="stylesheet">
6 
+        <title>MARTINS.js WebAR template</title>
7 
+        <link href="demo.css" rel="stylesheet">
8 
         <script src="../../dist/martins.js"></script>
 8 
         <script src="../../dist/martins.js"></script>
9 
         <script src="demo.js"></script>
 9 
         <script src="demo.js"></script>
10 
     </head>
 10 
     </head>
12 
         <div id="ar-viewport">
 12 
         <div id="ar-viewport">
13 
             <div id="ar-hud" hidden>
 13 
             <div id="ar-hud" hidden>
14 
                 <img id="scan" src="../assets/scan.png">
 14 
                 <img id="scan" src="../assets/scan.png">
15 
-                <button id="toggle-webcam"></button>
15 
+                <a id="about" href="NOTICE.html"></a>
16 
             </div>
 16 
             </div>
17 
         </div>
 17 
         </div>
18 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
 18 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
19 
-        <video id="my-video" hidden muted loop playsinline autoplay>
20 
-            <source src="../assets/my-video.webm" type="video/webm" />
21 
-            <source src="../assets/my-video.mp4" type="video/mp4" />
22 
-        </video>
23 
     </body>
 19 
     </body>
24 
 </html>
 20 
 </html>

BIN
demos/hello-world/qr-code.gif View File


+ 24
- 0
demos/hello-world/video.html View File

1 
+<!doctype html>
2 
+<html>
3 
+    <head>
4 
+        <meta charset="utf-8">
5 
+        <meta name="viewport" content="width=device-width,initial-scale=1">
6 
+        <title>MARTINS.js WebAR template</title>
7 
+        <link href="demo.css" rel="stylesheet">
8 
+        <script src="../../dist/martins.js"></script>
9 
+        <script src="demo.js"></script>
10 
+    </head>
11 
+    <body>
12 
+        <div id="ar-viewport">
13 
+            <div id="ar-hud" hidden>
14 
+                <img id="scan" src="../assets/scan.png">
15 
+                <a id="about" href="NOTICE.html"></a>
16 
+            </div>
17 
+        </div>
18 
+        <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
19 
+        <video id="my-video" hidden muted loop playsinline autoplay>
20 
+            <source src="../assets/my-video.webm" type="video/webm" />
21 
+            <source src="../assets/my-video.mp4" type="video/mp4" />
22 
+        </video>
23 
+    </body>
24 
+</html>

+ 1127
- 0
demos/touch-three/NOTICE.html
File diff suppressed because it is too large
View File


+ 54
- 0
demos/touch-three/README.html View File

1 
+<!doctype html>
2 
+<html>
3 
+    <head>
4 
+        <meta charset="utf-8">
5 
+        <title>MARTINS.js WebAR demo with three.js and touch interaction</title>
6 
+        <style>
7 
+        li + li {
8 
+            margin-top: 1em;
9 
+        }
10 
+
11 
+        ul {
12 
+            list-style-type: none;
13 
+            padding-left: 1em;
14 
+        }
15 
+
16 
+        img.qr-code {
17 
+            display: block;
18 
+            width: 256px;
19 
+            image-rendering: pixelated;
20 
+        }
21 
+
22 
+        a.button img {
23 
+            width: 6em;
24 
+            height: 6em;
25 
+            border-radius: 8px;
26 
+        }
27 
+        </style>
28 
+    </head>
29 
+    <body>
30 
+        <h1>WebAR with three.js and touch interaction</h1>
31 
+        <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
32 
+
33 
+        <h2>Menu</h2>
34 
+        <ul>
35 
+            <li><a href="index.html">Launch the WebAR experience</a></li>
36 
+            <li><a href="video.html">Test with a pre-recorded video</a></li>
37 
+            <li><a href="NOTICE.html">See the attribution notices</a></li>
38 
+            <li><a href="https://alemart.github.io/martins-js/gallery" target="_blank">See other WebAR demos</a></li>
39 
+        </ul>
40 
+
41 
+        <h2>QR code</h2>
42 
+        <img src="qr-code.gif" alt="QR code" class="qr-code">
43 
+
44 
+        <h2>Share</h2>
45 
+        <p>This application is powered by <a href="https://alemart.github.io/martins-js" target="_blank">MARTINS.js: GPU-accelerated Augmented Reality for the web</a>.</p>
46 
+        <div>
47 
+            <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Falemart.github.io/martins-js&quote=%23martins-js" target="_blank" rel="external" class="button"><img src="../assets/facebook.png" alt="Share on Facebook"></a>
48 
+            <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/martins-js&hashtags=martins-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
49 
+            <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/martins-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
50 
+            <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/martins-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
51 
+        </div>
52 
+    </body>
53 
+</html>
54 
+

+ 50
- 0
demos/touch-three/demo.css View File

1 
+body {
2 
+    background-color: black;
3 
+}
4 
+
5 
+#scan {
6 
+    width: 100%;
7 
+    height: 100%;
8 
+    object-fit: contain;
9 
+    opacity: 0.75;
10 
+}
11 
+
12 
+#about {
13 
+    position: absolute;
14 
+    right: 0;
15 
+    top: 0;
16 
+
17 
+    display: inline-block;
18 
+    margin: 0;
19 
+    padding: 0 0.25em;
20 
+
21 
+    color: #fff;
22 
+    font-size: 48px;
23 
+    font-weight: bold;
24 
+    font-family: monospace;
25 
+    text-decoration: none;
26 
+    text-align: center;
27 
+
28 
+    border-bottom: 4px solid;
29 
+    border-color: #5c3ba3;
30 
+    background: linear-gradient(0deg, #7b5ec4 0%, #bb7aff 100%);
31 
+    -webkit-tap-highlight-color: transparent;
32 
+}
33 
+
34 
+#about:hover {
35 
+    border-color: #6742b8;
36 
+    background: linear-gradient(0deg, #8b72cb 0%, #c894ff 100%);
37 
+}
38 
+
39 
+#about:active {
40 
+    border-color: #a5a500;
41 
+    background: linear-gradient(0deg, #cccc00 0%, #ffff00 100%);
42 
+}
43 
+
44 
+#about::before {
45 
+    content: '\24D8';
46 
+}
47 
+
48 
+#about:focus {
49 
+    outline: none;
50 
+}

demos/touch-interaction/demo.js → demos/touch-three/demo.js View File

1 
 /**
 1 
 /**
2 
- * @file MARTINS.js WebAR demo with touch interaction using THREE.js
3 
- * @version 1.0.2
2 
+ * @file MARTINS.js WebAR demo with three.js and touch interaction
3 
+ * @version 1.1.0
4 
  * @author Alexandre Martins (https://github.com/alemart)
 4 
  * @author Alexandre Martins (https://github.com/alemart)
5 
  * @license LGPL-3.0-or-later
 5 
  * @license LGPL-3.0-or-later
6 
  */
 6 
  */
156 
             hudContainer: document.getElementById('ar-hud')
 156 
             hudContainer: document.getElementById('ar-hud')
157 
         });
 157 
         });
158
158
159 
-        //const useWebcam = true;
160 
-        const useWebcam = (location.search.substr(1) == 'webcam');
161 
         const video = document.getElementById('my-video');
 159 
         const video = document.getElementById('my-video');
162 
-        const source = !useWebcam ? Martins.Source.Video(video) : Martins.Source.Camera();
160 
+        const useWebcam = (video === null);
161 
+        const source = useWebcam ?
162 
+            Martins.Source.Camera({ resolution: 'md' }) :
163 
+            Martins.Source.Video(video);
163
164
164 
         const session = await Martins.startSession({
 165 
         const session = await Martins.startSession({
165 
             mode: 'immersive',
 166 
             mode: 'immersive',
191 
     linkMartinsToTHREE(startARSession, animate, initialize);
 192 
     linkMartinsToTHREE(startARSession, animate, initialize);
192
193
193 
 });
 194 
 });
194 
-
195 
-// Toggle webcam
196 
-window.addEventListener('load', () => {
197 
-    const page = location.href.replace(/\?.*$/, '');
198 
-    const usingWebcam = (location.search.substr(1) == 'webcam');
199 
-    const button = document.getElementById('toggle-webcam');
200 
-
201 
-    if(!button)
202 
-        return;
203 
-
204 
-    button.innerHTML = usingWebcam ? '&#x1F39E' : '&#x1F3A5';
205 
-    button.addEventListener('click', () => {
206 
-        if(usingWebcam)
207 
-            location.href = page;
208 
-        else
209 
-            location.href = page + '?webcam';
210 
-    });
211 
-});

+ 24
- 0
demos/touch-three/index.html View File

1 
+<!doctype html>
2 
+<html>
3 
+    <head>
4 
+        <meta charset="utf-8">
5 
+        <meta name="viewport" content="width=device-width,initial-scale=1">
6 
+        <title>MARTINS.js WebAR demo with three.js and touch interaction</title>
7 
+        <link href="demo.css" rel="stylesheet">
8 
+        <script src="../../dist/martins.js"></script>
9 
+        <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js"></script>
10 
+        <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/loaders/FontLoader.js"></script>
11 
+        <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/geometries/TextGeometry.js"></script>
12 
+        <script src="../assets/three-with-martins.js"></script>
13 
+        <script src="demo.js"></script>
14 
+    </head>
15 
+    <body>
16 
+        <div id="ar-viewport">
17 
+            <div id="ar-hud" hidden>
18 
+                <img id="scan" src="../assets/scan.png">
19 
+                <a id="about" href="NOTICE.html"></a>
20 
+            </div>
21 
+        </div>
22 
+        <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
23 
+    </body>
24 
+</html>

BIN
demos/touch-three/qr-code.gif View File


demos/touch-interaction/index.html → demos/touch-three/video.html View File

3 
     <head>
 3 
     <head>
4 
         <meta charset="utf-8">
 4 
         <meta charset="utf-8">
5 
         <meta name="viewport" content="width=device-width,initial-scale=1">
 5 
         <meta name="viewport" content="width=device-width,initial-scale=1">
6 
-        <title>MARTINS.js WebAR demo with touch interaction using THREE.js</title>
7 
-        <link href="../assets/demo.css" rel="stylesheet">
6 
+        <title>MARTINS.js WebAR demo with three.js and touch interaction</title>
7 
+        <link href="demo.css" rel="stylesheet">
8 
         <script src="../../dist/martins.js"></script>
 8 
         <script src="../../dist/martins.js"></script>
9 
         <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js"></script>
 9 
         <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js"></script>
10 
         <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/loaders/FontLoader.js"></script>
 10 
         <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/loaders/FontLoader.js"></script>
16 
         <div id="ar-viewport">
 16 
         <div id="ar-viewport">
17 
             <div id="ar-hud" hidden>
 17 
             <div id="ar-hud" hidden>
18 
                 <img id="scan" src="../assets/scan.png">
 18 
                 <img id="scan" src="../assets/scan.png">
19 
-                <button id="toggle-webcam"></button>
19 
+                <a id="about" href="NOTICE.html"></a>
20 
             </div>
 20 
             </div>
21 
         </div>
 21 
         </div>
22 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
 22 
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>

Write Preview
Loading…
Cancel
Save