|
|
@@ -4,25 +4,7 @@ Now that the image is being tracked, the next step is to render a virtual scene
|
|
4
|
4
|
|
|
5
|
5
|
## Pick a 3D rendering technology
|
|
6
|
6
|
|
|
7
|
|
-MARTINS.js is not a 3D rendering technology. It is an Augmented Reality technology that provides the data you need in order to augment your physical scenes. There are free and open-source 3D rendering technologies for the web that you can find online and use with MARTINS.js. Popular solutions include:
|
|
8
|
|
-
|
|
9
|
|
-<div style="display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-end; text-align: center" markdown>
|
|
10
|
|
-<div markdown>
|
|
11
|
|
-{ width=200 }
|
|
12
|
|
-
|
|
13
|
|
-**A-Frame**
|
|
14
|
|
-</div><div markdown>
|
|
15
|
|
-{ width=200 }
|
|
16
|
|
-
|
|
17
|
|
-**Babylon.js**
|
|
18
|
|
-</div><div markdown>
|
|
19
|
|
-{ width=200 }
|
|
20
|
|
-
|
|
21
|
|
-**Three.js**
|
|
22
|
|
-</div>
|
|
23
|
|
-</div>
|
|
24
|
|
-
|
|
25
|
|
-You can also use other solutions. MARTINS.js lets you pick any 3D rendering technology.
|
|
|
7
|
+MARTINS.js is not a 3D rendering technology. It is an Augmented Reality technology that provides the data you need in order to augment your physical scenes. There are free and open-source 3D rendering technologies for the web that you can find online and use with MARTINS.js. Popular solutions include: A-Frame, Babylon.js and Three.js. You can also use other solutions. MARTINS.js lets you pick any 3D rendering technology.
|
|
26
|
8
|
|
|
27
|
9
|
Once you pick a 3D rendering technology, you need to integrate it with MARTINS.js. There is a code that is responsible for that integration. I call it a _glue code_. Among other things, a glue code transports the tracking results from MARTINS.js to the 3D rendering technology of your choice - it really is a "glue" connecting them.
|
|
28
|
10
|
|
|
|
@@ -46,14 +28,6 @@ Once you plug in the glue code, you'll be using the 3D rendering technology of y
|
|
46
|
28
|
<figcaption markdown>An augmented scene with a [3D model](../assets/my-3d-model.glb "A public domain 3D model from Kenney, converted to glTF format") from [Kenney](https://www.kenney.nl){ ._blank }</figcaption>
|
|
47
|
29
|
</figure>
|
|
48
|
30
|
|
|
49
|
|
-<figure markdown>
|
|
50
|
|
-<video poster="../../img/demo-cool.webp" style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
|
|
51
|
|
- <source src="../../img/demo-cool.webm" type="video/webm" />
|
|
52
|
|
- <source src="../../img/demo-cool.mp4" type="video/mp4" />
|
|
53
|
|
-</video>
|
|
54
|
|
-<figcaption markdown>A similar augmented scene viewed from a different perspective</figcaption>
|
|
55
|
|
-</figure>
|
|
56
|
|
-
|
|
57
|
31
|
Let me tell you a bit more about the 3D rendering technologies I just mentioned.
|
|
58
|
32
|
|
|
59
|
33
|
### A-Frame
|
|
|
@@ -64,17 +38,19 @@ A-Frame is built on top of [Three.js](#threejs) and extends it in powerful ways.
|
|
64
|
38
|
|
|
65
|
39
|
A-Frame is easy for beginners and pleasing for experts. A simple scene is declared like this:
|
|
66
|
40
|
|
|
67
|
|
-```html title="index.html" hl_lines="7 10 21-34"
|
|
|
41
|
+```html title="index.html" hl_lines="7-8 11-12 23-36"
|
|
68
|
42
|
<!doctype html>
|
|
69
|
43
|
<html>
|
|
70
|
44
|
<head>
|
|
71
|
45
|
<meta charset="utf-8">
|
|
72
|
46
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
73
|
47
|
<title>MARTINS.js WebAR demo</title>
|
|
|
48
|
+ <!-- include A-Frame -->
|
|
74
|
49
|
<script src="aframe-vX.Y.Z.min.js"></script>
|
|
75
|
50
|
<script src="martins.js"></script>
|
|
76
|
51
|
<script src="ar-demo.js"></script>
|
|
77
|
|
- <script src="plug in my glue code here"></script>
|
|
|
52
|
+ <!-- this is my glue code for A-Frame -->
|
|
|
53
|
+ <script src="aframe-with-martins.js"></script>
|
|
78
|
54
|
<style>body { background-color: #3d5afe; }</style>
|
|
79
|
55
|
</head>
|
|
80
|
56
|
<body>
|
alemart
1 rok temu