From 844fb1e5431f7f134cff8201c65af7eec5e701f7 Mon Sep 17 00:00:00 2001
From: Jerome Etienne <jerome.etienne@gmail.com>
Date: Sun, 9 Apr 2017 12:46:56 +0100
Subject: [PATCH] more work

---
 README.md                                     |   5 +-
 TODO.md                                       |  14 +
 data/data/multi-marker-deleteme.dat           |  18 ++
 data/data/patt2.hiro                          | 196 +++++++++++++
 data/data/patt2.kanji                         | 196 +++++++++++++
 three.js/examples/area-learning.html          | 252 ++++++++++++++++
 three.js/examples/measure-it.html             | 276 ++++++++++++++++++
 three.js/examples/multimarker.html            |   5 +-
 three.js/threex-ararealearning.js             |  97 ++++++
 three.js/threex-armarkercontrols.js           |   7 +-
 three.js/threex-artoolkitcontext.js           |  11 +-
 .../vendor/jsartoolkit5/js/artoolkit.api.js   |   7 +-
 12 files changed, 1071 insertions(+), 13 deletions(-)
 create mode 100644 data/data/multi-marker-deleteme.dat
 create mode 100644 data/data/patt2.hiro
 create mode 100644 data/data/patt2.kanji
 create mode 100644 three.js/examples/area-learning.html
 create mode 100644 three.js/examples/measure-it.html
 create mode 100644 three.js/threex-ararealearning.js

diff --git a/README.md b/README.md
index 84b9549..dca8ea8 100644
--- a/README.md
+++ b/README.md
@@ -162,8 +162,11 @@ Three.js Examples:
   generator of AR-Code
   ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/arcode.html))
 - [magical-book](https://jeromeetienne.github.io/AR.js/three.js/examples/magical-book.html) :
-  a-frame example for magical-book
+  Experimentation around magical book to open a secret door in [upload.io office](http://upload.io)
   ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/magical-book.html))
+- [measure-it](https://jeromeetienne.github.io/AR.js/three.js/examples/measure-it.html) :
+  a-frame example for measure-it
+  ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/measure-it.html))
 - [parameters-tunning](https://jeromeetienne.github.io/AR.js/three.js/examples/parameters-tunning.html) :
   a-frame example for parameters-tunning
   ([source](https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/parameters-tunning.html))
diff --git a/TODO.md b/TODO.md
index 82325b6..3a58b6d 100644
--- a/TODO.md
+++ b/TODO.md
@@ -5,6 +5,20 @@
 
 
 # Multimarker
+- have a multimarker-learning.js
+  - you give it 2 markers
+  - and it outputs the multi marker file
+- to load the marker, make a global with translation table
+  - ARTOOLKIT_MULTIMARKER_FILENAME2URL = {
+          filename : url
+  }
+  - currently it is hardcoded
+- now how to generate the marker
+  - threex.ararealearning.js
+  - i give it the controls parameters for each marker
+  - it recognize the marker independantly
+  - when it see them together, it stores their relative position
+
 
 - hide part of the markers
 - i should be able to build my own markers
diff --git a/data/data/multi-marker-deleteme.dat b/data/data/multi-marker-deleteme.dat
new file mode 100644
index 0000000..dc32167
--- /dev/null
+++ b/data/data/multi-marker-deleteme.dat
@@ -0,0 +1,18 @@
+# ARToolKit multi marker file automatically generated by AR.js 1.0.1-dev
+
+# the number of patterns to be recognized
+2
+
+# Marker 0
+patt.hiro
+1
+1 -2.1896151558564725e-9 -6.256675177951365e-10 -2.9396214351606886e-9
+5.024940463727035e-10 1 -3.3250477926571875e-9 7.439453497681825e-8
+1.2219923961609425e-9 4.259602004452745e-9 1 -7.058834228246269e-8
+
+# Marker 1
+patt.kanji
+1
+0.9998157024383545 0.009555918164551258 -0.016668424010276794 1.2793433666229248
+-0.00993416178971529 0.999691367149353 -0.022760314866900444 -0.03397563844919205
+0.016445718705654144 0.02292201854288578 0.9996012449264526 -0.11399710923433304
diff --git a/data/data/patt2.hiro b/data/data/patt2.hiro
new file mode 100644
index 0000000..7f78e3c
--- /dev/null
+++ b/data/data/patt2.hiro
@@ -0,0 +1,196 @@
+ 234 235 240 233 240 234 240 235 240 237 240 238 240 240 240 232
+ 229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 228
+ 227 240 240 240 240 240 240 240 240 240 240 240 240 240 240 239
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 236 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 234 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 236 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 231 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 225 149 240 240 186 216 225 174 240 240 240 237 238 240 240 240
+ 150 107 238 231  75 208 115 147 238 228 223 226 237 180 226 240
+ 150  62 181 213  62 187 113 169 197  72  29 237 120  50  53 207
+ 149  63  47  78  53 184 113 101 142   5 150 150  45 217 186  83
+ 121  84 220 222  58 180 121  92 128 109 237 124 155 232 161  64
+ 149  71 240 240  76 210  98 109 122 108 240 129  51 119 161 155
+ 149 186 240 240  98 219 135 152 207 191 236 227 152  77 175 209
+ 235 235 240 233 240 234 240 235 240 236 240 238 240 240 240 240
+ 229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 227 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 236 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 234 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 236 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 232 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 225 156 240 240 186 216 225 186 240 240 240 240 240 240 240 240
+ 150 117 240 231  72 206 115 162 240 232 223 237 240 180 226 240
+ 150  74 187 213  51 184 103 168 197  78  29 237 120  50  53 216
+ 144  77  51  74  61 184 106 101 142   5 150 152  52 217 186  85
+ 117  89 219 219  65 184 121  92 128 100 236 125 156 240 170  73
+ 148  71 240 240  76 210 109 109 121  99 240 137  51 120 166 164
+ 140 186 240 240  98 220 150 156 207 192 236 230 152  77 176 212
+ 234 235 240 233 240 234 240 235 240 236 240 238 240 240 240 233
+ 229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 239
+ 227 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 234 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 232 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 235 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 232 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 228 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 225 156 240 240 182 212 225 180 240 240 240 240 240 240 240 240
+ 150 116 238 228  66 205 115 151 238 236 225 240 240 180 226 240
+ 156  84 186 211  47 184 109 170 200  92  30 240 120  50  53 216
+ 147  83  51  73  50 184 106 110 148  17 151 150  45 217 186  85
+ 127  98 219 219  58 179 109 101 128 107 237 125 155 240 163  72
+ 155  86 240 240  76 201  85 108 121  95 232 137  51 118 153 155
+ 149 189 240 240  98 220 141 154 206 178 235 230 152  77 175 209
+
+ 232 228 239 240 240 240 240 240 240 240 240 207  83  64 155 209
+ 240 240 240 240 240 240 240 240 240 240 226  53 186 161 161 175
+ 240 240 240 240 240 240 240 240 240 240 180  50 217 232 119  77
+ 240 240 240 240 240 240 240 240 240 238 237 120  45 155  51 152
+ 238 240 240 240 240 240 240 240 240 237 226 237 150 124 129 227
+ 240 240 240 240 240 240 240 240 240 240 223  29 150 237 240 236
+ 237 240 240 240 240 240 240 240 240 240 228  72   5 109 108 191
+ 240 240 240 240 240 240 240 240 240 240 238 197 142 128 122 207
+ 235 240 240 240 240 240 240 240 240 174 147 169 101  92 109 152
+ 240 240 240 240 240 240 240 240 240 225 115 113 113 121  98 135
+ 234 240 240 240 240 240 240 240 240 216 208 187 184 180 210 219
+ 240 240 240 240 240 240 240 240 240 186  75  62  53  58  76  98
+ 233 240 240 240 240 240 240 240 240 240 231 213  78 222 240 240
+ 240 240 240 240 240 240 240 240 240 240 238 181  47 220 240 240
+ 235 240 240 240 240 240 240 240 240 149 107  62  63  84  71 186
+ 234 229 227 240 236 234 236 231 229 225 150 150 149 121 149 149
+ 240 240 240 240 240 240 240 240 240 240 240 216  85  73 164 212
+ 240 240 240 240 240 240 240 240 240 240 226  53 186 170 166 176
+ 240 240 240 240 240 240 240 240 240 240 180  50 217 240 120  77
+ 240 240 240 240 240 240 240 240 240 240 240 120  52 156  51 152
+ 238 240 240 240 240 240 240 240 240 240 237 237 152 125 137 230
+ 240 240 240 240 240 240 240 240 240 240 223  29 150 236 240 236
+ 236 240 240 240 240 240 240 240 240 240 232  78   5 100  99 192
+ 240 240 240 240 240 240 240 240 240 240 240 197 142 128 121 207
+ 235 240 240 240 240 240 240 240 240 186 162 168 101  92 109 156
+ 240 240 240 240 240 240 240 240 240 225 115 103 106 121 109 150
+ 234 240 240 240 240 240 240 240 240 216 206 184 184 184 210 220
+ 240 240 240 240 240 240 240 240 240 186  72  51  61  65  76  98
+ 233 240 240 240 240 240 240 240 240 240 231 213  74 219 240 240
+ 240 240 240 240 240 240 240 240 240 240 240 187  51 219 240 240
+ 235 240 240 240 240 240 240 240 240 156 117  74  77  89  71 186
+ 235 229 227 240 236 234 236 232 229 225 150 150 144 117 148 140
+ 233 239 240 240 240 240 240 240 240 240 240 216  85  72 155 209
+ 240 240 240 240 240 240 240 240 240 240 226  53 186 163 153 175
+ 240 240 240 240 240 240 240 240 240 240 180  50 217 240 118  77
+ 240 240 240 240 240 240 240 240 240 240 240 120  45 155  51 152
+ 238 240 240 240 240 240 240 240 240 240 240 240 150 125 137 230
+ 240 240 240 240 240 240 240 240 240 240 225  30 151 237 232 235
+ 236 240 240 240 240 240 240 240 240 240 236  92  17 107  95 178
+ 240 240 240 240 240 240 240 240 240 240 238 200 148 128 121 206
+ 235 240 240 240 240 240 240 240 240 180 151 170 110 101 108 154
+ 240 240 240 240 240 240 240 240 240 225 115 109 106 109  85 141
+ 234 240 240 240 240 240 240 240 240 212 205 184 184 179 201 220
+ 240 240 240 240 240 240 240 240 240 182  66  47  50  58  76  98
+ 233 240 240 240 240 240 240 240 240 240 228 211  73 219 240 240
+ 240 240 240 240 240 240 240 240 240 240 238 186  51 219 240 240
+ 235 240 240 240 240 240 240 240 240 156 116  84  83  98  86 189
+ 234 229 227 240 234 232 235 232 228 225 150 156 147 127 155 149
+
+ 209 175  77 152 227 236 191 207 152 135 219  98 240 240 186 149
+ 155 161 119  51 129 240 108 122 109  98 210  76 240 240  71 149
+  64 161 232 155 124 237 109 128  92 121 180  58 222 220  84 121
+  83 186 217  45 150 150   5 142 101 113 184  53  78  47  63 149
+ 207  53  50 120 237  29  72 197 169 113 187  62 213 181  62 150
+ 240 226 180 237 226 223 228 238 147 115 208  75 231 238 107 150
+ 240 240 240 238 237 240 240 240 174 225 216 186 240 240 149 225
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 231
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 236
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 234
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 236
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 239 240 240 240 240 240 240 240 240 240 240 240 240 240 240 227
+ 228 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229
+ 232 240 240 240 238 240 237 240 235 240 234 240 233 240 235 234
+ 212 176  77 152 230 236 192 207 156 150 220  98 240 240 186 140
+ 164 166 120  51 137 240  99 121 109 109 210  76 240 240  71 148
+  73 170 240 156 125 236 100 128  92 121 184  65 219 219  89 117
+  85 186 217  52 152 150   5 142 101 106 184  61  74  51  77 144
+ 216  53  50 120 237  29  78 197 168 103 184  51 213 187  74 150
+ 240 226 180 240 237 223 232 240 162 115 206  72 231 240 117 150
+ 240 240 240 240 240 240 240 240 186 225 216 186 240 240 156 225
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 232
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 236
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 234
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 236
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 227
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229
+ 240 240 240 240 238 240 236 240 235 240 234 240 233 240 235 235
+ 209 175  77 152 230 235 178 206 154 141 220  98 240 240 189 149
+ 155 153 118  51 137 232  95 121 108  85 201  76 240 240  86 155
+  72 163 240 155 125 237 107 128 101 109 179  58 219 219  98 127
+  85 186 217  45 150 151  17 148 110 106 184  50  73  51  83 147
+ 216  53  50 120 240  30  92 200 170 109 184  47 211 186  84 156
+ 240 226 180 240 240 225 236 238 151 115 205  66 228 238 116 150
+ 240 240 240 240 240 240 240 240 180 225 212 182 240 240 156 225
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 228
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 232
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 235
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 232
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 234
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
+ 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 227
+ 239 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229
+ 233 240 240 240 238 240 236 240 235 240 234 240 233 240 235 234
+
+ 149 149 121 149 150 150 225 229 231 236 234 236 240 227 229 234
+ 186  71  84  63  62 107 149 240 240 240 240 240 240 240 240 235
+ 240 240 220  47 181 238 240 240 240 240 240 240 240 240 240 240
+ 240 240 222  78 213 231 240 240 240 240 240 240 240 240 240 233
+  98  76  58  53  62  75 186 240 240 240 240 240 240 240 240 240
+ 219 210 180 184 187 208 216 240 240 240 240 240 240 240 240 234
+ 135  98 121 113 113 115 225 240 240 240 240 240 240 240 240 240
+ 152 109  92 101 169 147 174 240 240 240 240 240 240 240 240 235
+ 207 122 128 142 197 238 240 240 240 240 240 240 240 240 240 240
+ 191 108 109   5  72 228 240 240 240 240 240 240 240 240 240 237
+ 236 240 237 150  29 223 240 240 240 240 240 240 240 240 240 240
+ 227 129 124 150 237 226 237 240 240 240 240 240 240 240 240 238
+ 152  51 155  45 120 237 238 240 240 240 240 240 240 240 240 240
+  77 119 232 217  50 180 240 240 240 240 240 240 240 240 240 240
+ 175 161 161 186  53 226 240 240 240 240 240 240 240 240 240 240
+ 209 155  64  83 207 240 240 240 240 240 240 240 240 239 228 232
+ 140 148 117 144 150 150 225 229 232 236 234 236 240 227 229 235
+ 186  71  89  77  74 117 156 240 240 240 240 240 240 240 240 235
+ 240 240 219  51 187 240 240 240 240 240 240 240 240 240 240 240
+ 240 240 219  74 213 231 240 240 240 240 240 240 240 240 240 233
+  98  76  65  61  51  72 186 240 240 240 240 240 240 240 240 240
+ 220 210 184 184 184 206 216 240 240 240 240 240 240 240 240 234
+ 150 109 121 106 103 115 225 240 240 240 240 240 240 240 240 240
+ 156 109  92 101 168 162 186 240 240 240 240 240 240 240 240 235
+ 207 121 128 142 197 240 240 240 240 240 240 240 240 240 240 240
+ 192  99 100   5  78 232 240 240 240 240 240 240 240 240 240 236
+ 236 240 236 150  29 223 240 240 240 240 240 240 240 240 240 240
+ 230 137 125 152 237 237 240 240 240 240 240 240 240 240 240 238
+ 152  51 156  52 120 240 240 240 240 240 240 240 240 240 240 240
+  77 120 240 217  50 180 240 240 240 240 240 240 240 240 240 240
+ 176 166 170 186  53 226 240 240 240 240 240 240 240 240 240 240
+ 212 164  73  85 216 240 240 240 240 240 240 240 240 240 240 240
+ 149 155 127 147 156 150 225 228 232 235 232 234 240 227 229 234
+ 189  86  98  83  84 116 156 240 240 240 240 240 240 240 240 235
+ 240 240 219  51 186 238 240 240 240 240 240 240 240 240 240 240
+ 240 240 219  73 211 228 240 240 240 240 240 240 240 240 240 233
+  98  76  58  50  47  66 182 240 240 240 240 240 240 240 240 240
+ 220 201 179 184 184 205 212 240 240 240 240 240 240 240 240 234
+ 141  85 109 106 109 115 225 240 240 240 240 240 240 240 240 240
+ 154 108 101 110 170 151 180 240 240 240 240 240 240 240 240 235
+ 206 121 128 148 200 238 240 240 240 240 240 240 240 240 240 240
+ 178  95 107  17  92 236 240 240 240 240 240 240 240 240 240 236
+ 235 232 237 151  30 225 240 240 240 240 240 240 240 240 240 240
+ 230 137 125 150 240 240 240 240 240 240 240 240 240 240 240 238
+ 152  51 155  45 120 240 240 240 240 240 240 240 240 240 240 240
+  77 118 240 217  50 180 240 240 240 240 240 240 240 240 240 240
+ 175 153 163 186  53 226 240 240 240 240 240 240 240 240 240 240
+ 209 155  72  85 216 240 240 240 240 240 240 240 240 240 239 233
+
diff --git a/data/data/patt2.kanji b/data/data/patt2.kanji
new file mode 100644
index 0000000..87d32bb
--- /dev/null
+++ b/data/data/patt2.kanji
@@ -0,0 +1,196 @@
+ 214 225 240 225 214 240 216 204 214 227 181 192 198 192 181 192
+ 240 240 240 240 240 240 225 232 240 240 240 240 240 240 240 236
+ 240 240 240 240 240 240  75 128 220 240 240 240 240 240 240 240
+ 240 240 240 240 240 240 106  53 240 240 240 240 240 240 240 237
+ 240 240 240 240 240 238 118  31 240 240 240 240 240 240 240 234
+ 240 240 240 240 240 240  74  49 207 240 240 240 240 240 240 240
+ 240 240 240 240 240 240  53  54 177 240 240 240 240 240 240 240
+ 240 240 240 240 240 240  64  31 130 240 240 240 240 240 240 219
+ 240 240 240 240 240 180  37  57  78 228 240 240 240 240 240 240
+ 240 240 240 240 240 118  62 157  36 185 240 240 240 240 240 231
+ 240 240 240 240 240  82  65 225  67  80 230 240 240 240 240 217
+ 240 240 240 225  53  76 225 240 156  62 158 240 240 240 240 226
+ 240 240 199  61   9 111 235 240 240 104  58 174 228 240 240 240
+ 240 142  64  26  92 227 240 240 240 229  93  64 170 226 238 216
+  90  26  12 156 240 240 240 240 240 240 204  95  30 117 192 200
+ 156  16 195 233 235 240 236 240 238 239 240 186  93  53 120 237
+ 214 226 240 225 212 240 216 204 212 226 181 192 198 192 185 194
+ 240 240 240 240 240 240 227 232 240 240 240 240 240 240 240 238
+ 240 240 240 240 240 240  95 138 225 240 240 240 240 240 240 240
+ 240 240 240 240 240 240 108  59 240 240 240 240 240 240 240 237
+ 240 240 240 240 240 238 118  31 240 240 240 240 240 240 240 234
+ 240 240 240 240 240 240  83  47 207 240 240 240 240 240 240 240
+ 240 240 240 240 240 240  56  49 177 240 240 240 240 240 240 240
+ 240 240 240 240 240 240  73  41 130 240 240 240 240 240 240 222
+ 240 240 240 240 240 185  46  49  86 230 240 240 240 240 240 240
+ 240 240 240 240 240 118  58 165  45 192 240 240 240 240 240 234
+ 240 240 240 240 240  91  63 222  74  82 240 240 240 240 240 222
+ 240 240 240 226  66  86 225 240 158  63 162 240 240 240 240 228
+ 240 240 202  76  11 103 235 240 234  91  49 174 228 240 240 240
+ 240 142  68  16  91 226 240 240 240 228  96  74 178 233 239 222
+  90  26   4 150 240 240 240 240 240 240 213 109  46 133 204 213
+ 156  14 195 234 236 240 237 240 239 240 240 192 106  57 125 238
+ 214 226 240 225 212 240 216 204 214 227 181 192 198 192 184 192
+ 240 240 240 240 240 240 226 232 240 240 240 240 240 240 240 236
+ 240 240 240 240 240 240  85 134 220 240 240 240 240 240 240 240
+ 240 240 240 240 240 240 107  58 240 240 240 240 240 240 240 237
+ 240 240 240 240 240 238 118  32 240 240 240 240 240 240 240 234
+ 240 240 240 240 240 240  87  60 210 240 240 240 240 240 240 240
+ 240 240 240 240 240 240  58  58 178 240 240 240 240 240 240 240
+ 240 240 240 240 240 240  73  31 130 240 240 240 240 240 240 219
+ 240 240 240 240 240 185  46  59  86 228 240 240 240 240 240 240
+ 240 240 240 240 240 118  62 168  41 186 240 240 240 240 240 231
+ 240 240 240 240 240  90  65 225  60  92 235 240 240 240 240 219
+ 240 240 240 225  53  82 225 240 146  63 163 240 240 240 240 228
+ 240 240 198  61   5 103 235 240 234 102  58 175 232 240 240 240
+ 240 134  54  13  91 226 240 240 240 229  96  68 188 238 239 222
+  90  15   3 150 240 240 240 240 240 240 213 105  48 134 204 213
+ 156  14 195 233 236 240 237 240 239 239 240 192 106  57 125 238
+
+ 192 236 240 237 234 240 240 219 240 231 217 226 240 216 200 237
+ 181 240 240 240 240 240 240 240 240 240 240 240 240 238 192 120
+ 192 240 240 240 240 240 240 240 240 240 240 240 240 226 117  53
+ 198 240 240 240 240 240 240 240 240 240 240 240 228 170  30  93
+ 192 240 240 240 240 240 240 240 240 240 240 240 174  64  95 186
+ 181 240 240 240 240 240 240 240 240 240 230 158  58  93 204 240
+ 227 240 240 240 240 240 240 240 228 185  80  62 104 229 240 239
+ 214 240 220 240 240 207 177 130  78  36  67 156 240 240 240 238
+ 204 232 128  53  31  49  54  31  57 157 225 240 240 240 240 240
+ 216 225  75 106 118  74  53  64  37  62  65 225 235 240 240 236
+ 240 240 240 240 238 240 240 240 180 118  82  76 111 227 240 240
+ 214 240 240 240 240 240 240 240 240 240 240  53   9  92 240 235
+ 225 240 240 240 240 240 240 240 240 240 240 225  61  26 156 233
+ 240 240 240 240 240 240 240 240 240 240 240 240 199  64  12 195
+ 225 240 240 240 240 240 240 240 240 240 240 240 240 142  26  16
+ 214 240 240 240 240 240 240 240 240 240 240 240 240 240  90 156
+ 194 238 240 237 234 240 240 222 240 234 222 228 240 222 213 238
+ 185 240 240 240 240 240 240 240 240 240 240 240 240 239 204 125
+ 192 240 240 240 240 240 240 240 240 240 240 240 240 233 133  57
+ 198 240 240 240 240 240 240 240 240 240 240 240 228 178  46 106
+ 192 240 240 240 240 240 240 240 240 240 240 240 174  74 109 192
+ 181 240 240 240 240 240 240 240 240 240 240 162  49  96 213 240
+ 226 240 240 240 240 240 240 240 230 192  82  63  91 228 240 240
+ 212 240 225 240 240 207 177 130  86  45  74 158 234 240 240 239
+ 204 232 138  59  31  47  49  41  49 165 222 240 240 240 240 240
+ 216 227  95 108 118  83  56  73  46  58  63 225 235 240 240 237
+ 240 240 240 240 238 240 240 240 185 118  91  86 103 226 240 240
+ 212 240 240 240 240 240 240 240 240 240 240  66  11  91 240 236
+ 225 240 240 240 240 240 240 240 240 240 240 226  76  16 150 234
+ 240 240 240 240 240 240 240 240 240 240 240 240 202  68   4 195
+ 226 240 240 240 240 240 240 240 240 240 240 240 240 142  26  14
+ 214 240 240 240 240 240 240 240 240 240 240 240 240 240  90 156
+ 192 236 240 237 234 240 240 219 240 231 219 228 240 222 213 238
+ 184 240 240 240 240 240 240 240 240 240 240 240 240 239 204 125
+ 192 240 240 240 240 240 240 240 240 240 240 240 240 238 134  57
+ 198 240 240 240 240 240 240 240 240 240 240 240 232 188  48 106
+ 192 240 240 240 240 240 240 240 240 240 240 240 175  68 105 192
+ 181 240 240 240 240 240 240 240 240 240 235 163  58  96 213 240
+ 227 240 240 240 240 240 240 240 228 186  92  63 102 229 240 239
+ 214 240 220 240 240 210 178 130  86  41  60 146 234 240 240 239
+ 204 232 134  58  32  60  58  31  59 168 225 240 240 240 240 240
+ 216 226  85 107 118  87  58  73  46  62  65 225 235 240 240 237
+ 240 240 240 240 238 240 240 240 185 118  90  82 103 226 240 240
+ 212 240 240 240 240 240 240 240 240 240 240  53   5  91 240 236
+ 225 240 240 240 240 240 240 240 240 240 240 225  61  13 150 233
+ 240 240 240 240 240 240 240 240 240 240 240 240 198  54   3 195
+ 226 240 240 240 240 240 240 240 240 240 240 240 240 134  15  14
+ 214 240 240 240 240 240 240 240 240 240 240 240 240 240  90 156
+
+ 237 120  53  93 186 240 239 238 240 236 240 235 233 195  16 156
+ 200 192 117  30  95 204 240 240 240 240 240 240 156  12  26  90
+ 216 238 226 170  64  93 229 240 240 240 227  92  26  64 142 240
+ 240 240 240 228 174  58 104 240 240 235 111   9  61 199 240 240
+ 226 240 240 240 240 158  62 156 240 225  76  53 225 240 240 240
+ 217 240 240 240 240 230  80  67 225  65  82 240 240 240 240 240
+ 231 240 240 240 240 240 185  36 157  62 118 240 240 240 240 240
+ 240 240 240 240 240 240 228  78  57  37 180 240 240 240 240 240
+ 219 240 240 240 240 240 240 130  31  64 240 240 240 240 240 240
+ 240 240 240 240 240 240 240 177  54  53 240 240 240 240 240 240
+ 240 240 240 240 240 240 240 207  49  74 240 240 240 240 240 240
+ 234 240 240 240 240 240 240 240  31 118 238 240 240 240 240 240
+ 237 240 240 240 240 240 240 240  53 106 240 240 240 240 240 240
+ 240 240 240 240 240 240 240 220 128  75 240 240 240 240 240 240
+ 236 240 240 240 240 240 240 240 232 225 240 240 240 240 240 240
+ 192 181 192 198 192 181 227 214 204 216 240 214 225 240 225 214
+ 238 125  57 106 192 240 240 239 240 237 240 236 234 195  14 156
+ 213 204 133  46 109 213 240 240 240 240 240 240 150   4  26  90
+ 222 239 233 178  74  96 228 240 240 240 226  91  16  68 142 240
+ 240 240 240 228 174  49  91 234 240 235 103  11  76 202 240 240
+ 228 240 240 240 240 162  63 158 240 225  86  66 226 240 240 240
+ 222 240 240 240 240 240  82  74 222  63  91 240 240 240 240 240
+ 234 240 240 240 240 240 192  45 165  58 118 240 240 240 240 240
+ 240 240 240 240 240 240 230  86  49  46 185 240 240 240 240 240
+ 222 240 240 240 240 240 240 130  41  73 240 240 240 240 240 240
+ 240 240 240 240 240 240 240 177  49  56 240 240 240 240 240 240
+ 240 240 240 240 240 240 240 207  47  83 240 240 240 240 240 240
+ 234 240 240 240 240 240 240 240  31 118 238 240 240 240 240 240
+ 237 240 240 240 240 240 240 240  59 108 240 240 240 240 240 240
+ 240 240 240 240 240 240 240 225 138  95 240 240 240 240 240 240
+ 238 240 240 240 240 240 240 240 232 227 240 240 240 240 240 240
+ 194 185 192 198 192 181 226 212 204 216 240 212 225 240 226 214
+ 238 125  57 106 192 240 239 239 240 237 240 236 233 195  14 156
+ 213 204 134  48 105 213 240 240 240 240 240 240 150   3  15  90
+ 222 239 238 188  68  96 229 240 240 240 226  91  13  54 134 240
+ 240 240 240 232 175  58 102 234 240 235 103   5  61 198 240 240
+ 228 240 240 240 240 163  63 146 240 225  82  53 225 240 240 240
+ 219 240 240 240 240 235  92  60 225  65  90 240 240 240 240 240
+ 231 240 240 240 240 240 186  41 168  62 118 240 240 240 240 240
+ 240 240 240 240 240 240 228  86  59  46 185 240 240 240 240 240
+ 219 240 240 240 240 240 240 130  31  73 240 240 240 240 240 240
+ 240 240 240 240 240 240 240 178  58  58 240 240 240 240 240 240
+ 240 240 240 240 240 240 240 210  60  87 240 240 240 240 240 240
+ 234 240 240 240 240 240 240 240  32 118 238 240 240 240 240 240
+ 237 240 240 240 240 240 240 240  58 107 240 240 240 240 240 240
+ 240 240 240 240 240 240 240 220 134  85 240 240 240 240 240 240
+ 236 240 240 240 240 240 240 240 232 226 240 240 240 240 240 240
+ 192 184 192 198 192 181 227 214 204 216 240 212 225 240 226 214
+
+ 156  90 240 240 240 240 240 240 240 240 240 240 240 240 240 214
+  16  26 142 240 240 240 240 240 240 240 240 240 240 240 240 225
+ 195  12  64 199 240 240 240 240 240 240 240 240 240 240 240 240
+ 233 156  26  61 225 240 240 240 240 240 240 240 240 240 240 225
+ 235 240  92   9  53 240 240 240 240 240 240 240 240 240 240 214
+ 240 240 227 111  76  82 118 180 240 240 240 238 240 240 240 240
+ 236 240 240 235 225  65  62  37  64  53  74 118 106  75 225 216
+ 240 240 240 240 240 225 157  57  31  54  49  31  53 128 232 204
+ 238 240 240 240 156  67  36  78 130 177 207 240 240 220 240 214
+ 239 240 229 104  62  80 185 228 240 240 240 240 240 240 240 227
+ 240 204  93  58 158 230 240 240 240 240 240 240 240 240 240 181
+ 186  95  64 174 240 240 240 240 240 240 240 240 240 240 240 192
+  93  30 170 228 240 240 240 240 240 240 240 240 240 240 240 198
+  53 117 226 240 240 240 240 240 240 240 240 240 240 240 240 192
+ 120 192 238 240 240 240 240 240 240 240 240 240 240 240 240 181
+ 237 200 216 240 226 217 231 240 219 240 240 234 237 240 236 192
+ 156  90 240 240 240 240 240 240 240 240 240 240 240 240 240 214
+  14  26 142 240 240 240 240 240 240 240 240 240 240 240 240 226
+ 195   4  68 202 240 240 240 240 240 240 240 240 240 240 240 240
+ 234 150  16  76 226 240 240 240 240 240 240 240 240 240 240 225
+ 236 240  91  11  66 240 240 240 240 240 240 240 240 240 240 212
+ 240 240 226 103  86  91 118 185 240 240 240 238 240 240 240 240
+ 237 240 240 235 225  63  58  46  73  56  83 118 108  95 227 216
+ 240 240 240 240 240 222 165  49  41  49  47  31  59 138 232 204
+ 239 240 240 234 158  74  45  86 130 177 207 240 240 225 240 212
+ 240 240 228  91  63  82 192 230 240 240 240 240 240 240 240 226
+ 240 213  96  49 162 240 240 240 240 240 240 240 240 240 240 181
+ 192 109  74 174 240 240 240 240 240 240 240 240 240 240 240 192
+ 106  46 178 228 240 240 240 240 240 240 240 240 240 240 240 198
+  57 133 233 240 240 240 240 240 240 240 240 240 240 240 240 192
+ 125 204 239 240 240 240 240 240 240 240 240 240 240 240 240 185
+ 238 213 222 240 228 222 234 240 222 240 240 234 237 240 238 194
+ 156  90 240 240 240 240 240 240 240 240 240 240 240 240 240 214
+  14  15 134 240 240 240 240 240 240 240 240 240 240 240 240 226
+ 195   3  54 198 240 240 240 240 240 240 240 240 240 240 240 240
+ 233 150  13  61 225 240 240 240 240 240 240 240 240 240 240 225
+ 236 240  91   5  53 240 240 240 240 240 240 240 240 240 240 212
+ 240 240 226 103  82  90 118 185 240 240 240 238 240 240 240 240
+ 237 240 240 235 225  65  62  46  73  58  87 118 107  85 226 216
+ 240 240 240 240 240 225 168  59  31  58  60  32  58 134 232 204
+ 239 240 240 234 146  60  41  86 130 178 210 240 240 220 240 214
+ 239 240 229 102  63  92 186 228 240 240 240 240 240 240 240 227
+ 240 213  96  58 163 235 240 240 240 240 240 240 240 240 240 181
+ 192 105  68 175 240 240 240 240 240 240 240 240 240 240 240 192
+ 106  48 188 232 240 240 240 240 240 240 240 240 240 240 240 198
+  57 134 238 240 240 240 240 240 240 240 240 240 240 240 240 192
+ 125 204 239 240 240 240 240 240 240 240 240 240 240 240 240 184
+ 238 213 222 240 228 219 231 240 219 240 240 234 237 240 236 192
+
diff --git a/three.js/examples/area-learning.html b/three.js/examples/area-learning.html
new file mode 100644
index 0000000..0d9e6a7
--- /dev/null
+++ b/three.js/examples/area-learning.html
@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+<!-- three.js library -->
+<script src='vendor/three.js/build/three.js'></script>
+<script src="vendor/three.js/examples/js/libs/stats.min.js"></script>
+<!-- jsartookit -->
+<script src="../vendor/jsartoolkit-symlink/build/artoolkit.min.js"></script>
+<script src="../vendor/jsartoolkit5/js/artoolkit.api.js"></script>
+<!-- include threex.artoolkit -->
+<script src="../threex-artoolkitsource.js"></script>
+<script src="../threex-artoolkitcontext.js"></script>
+<script src="../threex-artoolkitprofile.js"></script>
+<script src="../threex-armarkercontrols.js"></script>
+<script src="../threex-ararealearning.js"></script>
+<script>THREEx.ArToolkitContext.baseURL = '../'</script>
+
+<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: absolute; top: 10px; width:100%; text-align: center;z-index:1';>
+	<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - developement playground
+	<br/>
+	Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
+</div><script>
+	//////////////////////////////////////////////////////////////////////////////////
+	//		Init
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// init renderer
+	var renderer	= new THREE.WebGLRenderer({
+		// antialias	: true,
+		alpha: true
+	});
+	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
+	// renderer.setPixelRatio( 2 );
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	renderer.domElement.style.position = 'absolute'
+	renderer.domElement.style.top = '0px'
+	renderer.domElement.style.left = '0px'
+	document.body.appendChild( renderer.domElement );
+
+	// array of functions for the rendering loop
+	var onRenderFcts= [];
+
+	// init scene and camera
+	var scene	= new THREE.Scene();
+
+	var ambient = new THREE.AmbientLight( 0x666666 );
+	scene.add( ambient );
+
+	var directionalLight = new THREE.DirectionalLight( 0x887766 );
+	directionalLight.position.set( -1, 1, 1 ).normalize();
+	scene.add( directionalLight );
+	
+	//////////////////////////////////////////////////////////////////////////////////
+	//		Initialize a basic camera
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// Create a camera
+	var camera = new THREE.Camera();
+	scene.add(camera);
+
+	////////////////////////////////////////////////////////////////////////////////
+	//          handle arToolkitSource
+	////////////////////////////////////////////////////////////////////////////////
+
+	var arToolkitSource = new THREEx.ArToolkitSource({
+		// to read from the webcam 
+		sourceType : 'webcam',
+		
+		// // to read from an image
+		// sourceType : 'image',
+		// sourceUrl : '../../data/images/multimarker.jpg',		
+
+		// to read from a video
+		// sourceType : 'video',
+		// sourceUrl : '../../data/videos/headtracking.mp4',		
+	})
+
+	arToolkitSource.init(function onReady(){
+		// handle resize of renderer
+		arToolkitSource.onResize(renderer.domElement)		
+	})
+	
+	// handle resize
+	window.addEventListener('resize', function(){
+		// handle arToolkitSource resize
+		arToolkitSource.onResize(renderer.domElement)		
+	})
+
+	////////////////////////////////////////////////////////////////////////////////
+	//          initialize arToolkitContext
+	////////////////////////////////////////////////////////////////////////////////	
+
+	// create atToolkitContext
+	var arToolkitContext = new THREEx.ArToolkitContext({
+		cameraParametersUrl: '../../data/data/camera_para.dat',
+	})
+	// initialize it
+	arToolkitContext.init(function onCompleted(){
+		// copy projection matrix to camera
+		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
+	})
+
+	// update artoolkit on every frame
+	onRenderFcts.push(function(){
+		if( arToolkitSource.ready === false )	return
+
+		arToolkitContext.update( arToolkitSource.domElement )
+	})
+	
+	
+	////////////////////////////////////////////////////////////////////////////////
+	//          Create a ArMarkerControls
+	////////////////////////////////////////////////////////////////////////////////
+
+
+	function learningInit(){
+		var markersControlsParameters = []
+		markersControlsParameters.push({
+			type : 'pattern',
+			patternUrl : '../../data/data/patt2.hiro',
+		})
+		markersControlsParameters.push({
+			type : 'pattern',
+			patternUrl : '../../data/data/patt2.kanji',
+		})
+		var areaLearning = new THREEx.ArAreaLearning(arToolkitContext, markersControlsParameters)
+		areaLearning.markersRoot.forEach(function(markerRoot){
+			scene.add(markerRoot)
+		})
+		
+	}
+	
+	learningInit()
+	
+	function learningDone(){
+
+var multiMarkerFile = `
+# ARToolKit multi marker file automatically generated by AR.js 1.0.1-dev
+
+# the number of patterns to be recognized
+2
+
+# Marker 0
+patt.hiro
+1
+1 -2.1896151558564725e-9 -6.256675177951365e-10 -2.9396214351606886e-9
+5.024940463727035e-10 1 -3.3250477926571875e-9 7.439453497681825e-8
+1.2219923961609425e-9 4.259602004452745e-9 1 -7.058834228246269e-8
+
+# Marker 1
+patt.kanji
+1
+0.9998157024383545 0.009555918164551258 -0.016668424010276794 1.2793433666229248
+-0.00993416178971529 0.999691367149353 -0.022760314866900444 -0.03397563844919205
+0.016445718705654144 0.02292201854288578 0.9996012449264526 -0.11399710923433304
+`
+
+		// var multiMarkerFile = areaLearning.generateMultiMarkerFile()
+		var blob = new Blob([multiMarkerFile], {type: 'text/plain'});
+	
+		var blobUrl = URL.createObjectURL(blob);
+	
+		var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
+			type : 'multiMarker',
+			patternUrl : blobUrl,
+		})
+		markerRoot.visible = true
+		markerControls.addEventListener('markerFound', function(){
+			console.log('markerFound')
+		})
+	}
+
+	// var request = new XMLHttpRequest();
+	// request.addEventListener("load", function(){
+	// 	var blob = new Blob([this.responseText], {type: 'text/plain'});
+	// 
+	// 	var blobUrl = URL.createObjectURL(blob);
+	// 
+	// 	var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
+	// 		type : 'pattern',
+	// 		patternUrl : '../../data/data/patt.hiro',
+	// 		// patternUrl : '../../data/data/patt.kanji',
+	// 
+	// 		type : 'multiMarker',
+	// 		// patternUrl : '../../data/multimarkers/multi-abcdef/marker-small.dat',
+	// 		// patternUrl : '../../data/data/multi-marker-hirokanji.dat',
+	// 		patternUrl : blobUrl,
+	// 		// patternUrl : '../../data/multi-barcode-4x3.dat',
+	// 	})
+	// });
+	// request.open("GET", '../../data/data/multi-marker-hirokanji.dat');
+	// request.send();
+	
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		add an object in the scene
+	//////////////////////////////////////////////////////////////////////////////////
+
+	var markerRoot = new THREE.Group
+	markerRoot.visible = false
+	scene.add(markerRoot)
+
+
+	var mesh = new THREE.AxisHelper()
+	markerRoot.add(mesh)
+	
+	// add a torus knot	
+	var geometry	= new THREE.CubeGeometry(1,1,1);
+	var material	= new THREE.MeshNormalMaterial({
+		transparent : true,
+		opacity: 0.5,
+		side: THREE.DoubleSide
+	}); 
+	var mesh	= new THREE.Mesh( geometry, material );
+	mesh.position.y	= geometry.parameters.height/2
+	markerRoot.add( mesh );
+	
+	var geometry	= new THREE.TorusKnotGeometry(0.3,0.1,32,32);
+	var material	= new THREE.MeshNormalMaterial(); 
+	var mesh	= new THREE.Mesh( geometry, material );
+	mesh.position.y	= 0.5
+	markerRoot.add( mesh );
+	
+	onRenderFcts.push(function(delta){
+		mesh.rotation.x += delta * Math.PI
+	})
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		render the whole thing on the page
+	//////////////////////////////////////////////////////////////////////////////////
+	var stats = new Stats();
+	document.body.appendChild( stats.dom );
+	// render the scene
+	onRenderFcts.push(function(){
+		renderer.render( scene, camera );
+		stats.update();
+	})
+
+	// run the rendering loop
+	var lastTimeMsec= null
+	requestAnimationFrame(function animate(nowMsec){
+		// keep looping
+		requestAnimationFrame( animate );
+		// measure time
+		lastTimeMsec	= lastTimeMsec || nowMsec-1000/60
+		var deltaMsec	= Math.min(200, nowMsec - lastTimeMsec)
+		lastTimeMsec	= nowMsec
+		// call each update function
+		onRenderFcts.forEach(function(onRenderFct){
+			onRenderFct(deltaMsec/1000, nowMsec/1000)
+		})
+	})
+</script></body>
diff --git a/three.js/examples/measure-it.html b/three.js/examples/measure-it.html
new file mode 100644
index 0000000..fdd3996
--- /dev/null
+++ b/three.js/examples/measure-it.html
@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+<!-- three.js library -->
+<script src='vendor/three.js/build/three.js'></script>
+<!-- jsartookit -->
+<script src="../vendor/jsartoolkit5/build/artoolkit.min.js"></script>
+<script src="../vendor/jsartoolkit5/js/artoolkit.api.js"></script>
+<!-- include threex.artoolkit -->
+<script src="../threex-artoolkitsource.js"></script>
+<script src="../threex-artoolkitcontext.js"></script>
+<script src="../threex-armarkercontrols.js"></script>
+<script>THREEx.ArToolkitContext.baseURL = '../'</script>
+
+<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: absolute; top: 10px; width:100%; text-align: center; z-index: 1;'>
+	<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - three.js marker root
+	<br/>
+	Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
+</div><script>
+	//////////////////////////////////////////////////////////////////////////////////
+	//		Init
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// init renderer
+	var renderer	= new THREE.WebGLRenderer({
+		antialias	: true,
+		alpha: true
+	});
+	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
+	renderer.setSize( 640, 480 );
+	renderer.domElement.style.position = 'absolute'
+	renderer.domElement.style.top = '0px'
+	renderer.domElement.style.left = '0px'
+	document.body.appendChild( renderer.domElement );
+
+	// array of functions for the rendering loop
+	var onRenderFcts= [];
+
+	// init scene and camera
+	var scene	= new THREE.Scene();
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		Initialize a basic camera
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// Create a camera
+	var camera = new THREE.Camera();
+	scene.add(camera);
+
+	////////////////////////////////////////////////////////////////////////////////
+	//          handle arToolkitSource
+	////////////////////////////////////////////////////////////////////////////////
+
+	var arToolkitSource = new THREEx.ArToolkitSource({
+		// to read from the webcam 
+		sourceType : 'webcam',
+		
+		// to read from an image
+		// sourceType : 'image',
+		// sourceUrl : '../../data/images/img.jpg',		
+
+		// to read from a video
+		// sourceType : 'video',
+		// sourceUrl : '../../data/videos/headtracking.mp4',		
+	})
+
+	arToolkitSource.init(function onReady(){
+		console.log('source is ready')
+		// handle resize of renderer
+		arToolkitSource.onResize(renderer.domElement)		
+	})
+	
+	// handle resize
+	window.addEventListener('resize', function(){
+		// handle arToolkitSource resize
+		arToolkitSource.onResize(renderer.domElement)		
+	})
+
+	////////////////////////////////////////////////////////////////////////////////
+	//          initialize arToolkitContext
+	////////////////////////////////////////////////////////////////////////////////	
+
+	// create atToolkitContext
+	var arToolkitContext = new THREEx.ArToolkitContext({
+		cameraParametersUrl: '../../data/data/camera_para.dat',
+		detectionMode: 'mono',
+	})
+	// initialize it
+	arToolkitContext.init(function onCompleted(){
+		// copy projection matrix to camera
+		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
+	})
+
+	// update artoolkit on every frame
+	onRenderFcts.push(function(){
+		if( arToolkitSource.ready === false )	return
+
+		arToolkitContext.update( arToolkitSource.domElement )
+	})
+	
+	
+	////////////////////////////////////////////////////////////////////////////////
+	//          Create a ArMarkerControls
+	////////////////////////////////////////////////////////////////////////////////
+;(function(){
+	var markerRoot = new THREE.Group
+	markerRoot.name = 'marker1'
+	scene.add(markerRoot)
+	var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
+		type : 'pattern',
+		patternUrl : '../../data/data/patt.hiro',
+		// patternUrl : '../../data/data/patt.kanji',
+	})
+// debugger
+	//////////////////////////////////////////////////////////////////////////////////
+	//		add an object in the scene
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// add a torus knot	
+	var geometry	= new THREE.CubeGeometry(1,1,1);
+	var material	= new THREE.MeshBasicMaterial({
+		color: 'red',
+		transparent : true,
+		opacity: 0.5,
+		side: THREE.DoubleSide
+	}); 
+	var mesh	= new THREE.Mesh( geometry, material );
+	mesh.position.y	= geometry.parameters.height/2
+	// markerRoot.add( mesh );
+	
+	var geometry	= new THREE.TorusKnotGeometry(0.3,0.1,32,32);
+	var material	= new THREE.MeshNormalMaterial(); 
+	var mesh	= new THREE.Mesh( geometry, material );
+	mesh.position.y	= 0.5
+	markerRoot.add( mesh );
+	
+	onRenderFcts.push(function(){
+		mesh.rotation.x += 0.1
+	})	
+})()
+
+
+;(function(){
+	var markerRoot = new THREE.Group
+	markerRoot.name = 'marker2'
+	scene.add(markerRoot)
+	var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
+		type : 'pattern',
+		// patternUrl : '../../data/data/patt.hiro',
+		patternUrl : '../../data/data/patt.kanji',
+	})
+
+	//////////////////////////////////////////////////////////////////////////////////
+	//		add an object in the scene
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// add a torus knot	
+	var geometry	= new THREE.CubeGeometry(1,1,1);
+	var material	= new THREE.MeshBasicMaterial({
+		color: 'blue',
+		transparent : true,
+		opacity: 0.5,
+		side: THREE.DoubleSide
+	}); 
+	var mesh	= new THREE.Mesh( geometry, material );
+	mesh.position.y	= geometry.parameters.height/2
+	// markerRoot.add( mesh );
+	
+	var geometry	= new THREE.TorusKnotGeometry(0.3,0.1,32,32);
+	var material	= new THREE.MeshNormalMaterial(); 
+	var mesh	= new THREE.Mesh( geometry, material );
+	mesh.position.y	= 0.5
+	markerRoot.add( mesh );
+	
+	onRenderFcts.push(function(){
+		mesh.rotation.x += 0.1
+	})	
+})()
+/**
+ * do a line between them
+ * - graduation on the line ?
+ * - cylinder maybe, thus it got thickness
+ * - and a text in a texture, with a sprite
+ */
+;(function(){
+	var markerRoot1 = scene.getObjectByName('marker1')
+	var markerRoot2 = scene.getObjectByName('marker2')
+	
+	
+	var material = new THREE.LineBasicMaterial({ color: 0x0000ff });
+	var geometry = new THREE.Geometry();
+	geometry.vertices.push(new THREE.Vector3(1, 0, -3));
+	geometry.vertices.push(new THREE.Vector3(-1, 0, -3));
+	var line = new THREE.Line(geometry, material);
+	scene.add(line)
+	onRenderFcts.push(function(){
+		// console.log('markerRoot2', markerRoot2.position)
+		
+		geometry.vertices[0].copy(markerRoot1.position)
+		geometry.vertices[1].copy(markerRoot2.position)
+		geometry.verticesNeedUpdate = true
+
+		geometry.computeBoundingSphere();
+	})
+	// 
+	// var arrowHelper = new THREE.ArrowHelper(direction, markerRoot1.position, )
+
+	var material = new THREE.LineBasicMaterial({ color: 0x0000ff });
+	var geometry = new THREE.Geometry();
+	geometry.vertices.push(new THREE.Vector3(1, 0, -3));
+	geometry.vertices.push(new THREE.Vector3(-1, 0, -3));
+	var line = new THREE.Line(geometry, material);
+	scene.add(line)
+	onRenderFcts.push(function(){
+		// console.log('markerRoot2', markerRoot2.position)
+		
+		geometry.vertices[0].copy(markerRoot1.position)
+		geometry.vertices[1].copy(markerRoot2.position)
+		geometry.verticesNeedUpdate = true
+
+		geometry.computeBoundingSphere();
+	})
+
+	var canvas = document.createElement( 'canvas' );
+	canvas.width = 256;
+	canvas.height = 64;
+
+	var context = canvas.getContext( '2d' );
+	var texture = new THREE.CanvasTexture( canvas );
+	var material = new THREE.SpriteMaterial({
+		map: texture, 
+		color: 0xffffff, 
+	});
+	var sprite = new THREE.Sprite( material );
+	scene.add(sprite)
+window.sprite = sprite
+
+	onRenderFcts.push(function(){
+		sprite.position.addVectors(markerRoot1.position, markerRoot2.position).multiplyScalar(1/2)
+
+		// get the text to display
+		var length = markerRoot1.position.distanceTo(markerRoot2.position)
+		var text = length.toFixed(2)
+		
+		// put the text in the sprite
+		context.font = '48px monospace';
+		context.clearRect( 0, 0, canvas.width, canvas.height );
+		context.fillStyle = '#fff';
+		context.fillText(text, canvas.width/2, canvas.height/2 )
+		sprite.material.map.needsUpdate = true
+	})
+	
+})()
+	//////////////////////////////////////////////////////////////////////////////////
+	//		render the whole thing on the page
+	//////////////////////////////////////////////////////////////////////////////////
+
+	// render the scene
+	onRenderFcts.push(function(){
+		renderer.render( scene, camera );
+	})
+
+	// run the rendering loop
+	var lastTimeMsec= null
+	requestAnimationFrame(function animate(nowMsec){
+		// keep looping
+		requestAnimationFrame( animate );
+		// measure time
+		lastTimeMsec	= lastTimeMsec || nowMsec-1000/60
+		var deltaMsec	= Math.min(200, nowMsec - lastTimeMsec)
+		lastTimeMsec	= nowMsec
+		// call each update function
+		onRenderFcts.forEach(function(onRenderFct){
+			onRenderFct(deltaMsec/1000, nowMsec/1000)
+		})
+	})
+</script></body>
diff --git a/three.js/examples/multimarker.html b/three.js/examples/multimarker.html
index a3a7be7..d71abc9 100644
--- a/three.js/examples/multimarker.html
+++ b/three.js/examples/multimarker.html
@@ -126,9 +126,10 @@
 			// patternUrl : '../../data/data/patt.kanji',
 
 			type : 'multiMarker',
-			patternUrl : '../../data/multimarkers/multi-abcdef/marker-small.dat',
+			// patternUrl : '../../data/multimarkers/multi-abcdef/marker-small.dat',
 			// patternUrl : '../../data/data/multi-marker-hirokanji.dat',
-			patternUrl : blobUrl,
+			patternUrl : '../../data/data/multi-marker-deleteme.dat',
+			// patternUrl : blobUrl,
 			// patternUrl : '../../data/multi-barcode-4x3.dat',
 		})
 	});
diff --git a/three.js/threex-ararealearning.js b/three.js/threex-ararealearning.js
new file mode 100644
index 0000000..beeac01
--- /dev/null
+++ b/three.js/threex-ararealearning.js
@@ -0,0 +1,97 @@
+var THREEx = THREEx || {}
+
+THREEx.ArAreaLearning = function(arToolkitContext, markersControlsParameters){
+	var _this = this
+	this.markersRoot = []
+	this.markersControls = []
+
+	markersControlsParameters.forEach(function(markerControlsParameters, index){
+		var markerRoot = new THREE.Group()
+		_this.markersRoot.push(markerRoot)
+		
+		var mesh = buildObject(index)
+		markerRoot.add( mesh )
+
+		var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, markerControlsParameters)		
+		_this.markersControls.push(markerControls)
+	})
+	
+	arToolkitContext.addEventListener('sourceProcessed', function(event){
+		_this._onSourceProcessed()
+	})
+
+	return
+	
+	function buildObject(text){
+		var canvas = document.createElement( 'canvas' );
+		canvas.width =  64;
+		canvas.height = 64;
+
+		var context = canvas.getContext( '2d' );
+		var texture = new THREE.CanvasTexture( canvas );
+
+		// put the text in the sprite
+		context.font = '48px monospace';
+		context.clearRect( 0, 0, canvas.width, canvas.height );
+		context.fillStyle = 'darkblue';
+		context.fillText(text, canvas.width/4, 3*canvas.height/4 )
+		texture.needsUpdate = true
+
+		// var geometry = new THREE.CubeGeometry(1, 1, 1)
+		var geometry = new THREE.PlaneGeometry(1, 1)
+		var material = new THREE.MeshBasicMaterial({
+			map: texture, 
+		});
+		var mesh = new THREE.Mesh(geometry, material)
+		mesh.rotation.x = -Math.PI/2
+		return mesh
+	}
+}
+
+
+/**
+ * called when ArToolkitContext have processed the ArToolkitSource
+ */
+THREEx.ArAreaLearning.prototype._onSourceProcessed = function(){
+	// - store the relative position of one with the other
+	// - the first marker is always the 0, 0, 0
+	
+}
+
+/**
+ * called when ArToolkitContext have processed the ArToolkitSource
+ */
+THREEx.ArAreaLearning.prototype.generateMultiMarkerFile = function(){
+	var _this = this
+	
+	var content = ""
+	content += '# ARToolKit multi marker file automatically generated by AR.js '+THREEx.ArToolkitContext.REVISION+'\n'
+	content += '\n'
+	content += '# the number of patterns to be recognized\n'
+	content += this.markersRoot.length + '\n'
+	
+	console.assert(_this.markersRoot.length !== 0)
+	var baseMatrix = new THREE.Matrix4().getInverse( _this.markersRoot[0].matrix )
+	
+	this.markersControls.forEach(function(markerControls, index){
+		content += '\n'
+		content += '# Marker '+index+'\n'
+
+		var markerRoot = _this.markersRoot[index]
+		content += markerControls.parameters.patternUrl.split('/').pop() + '\n'
+		content += markerControls.parameters.size + '\n'
+		
+		
+		var matrix = markerRoot.matrix.clone()
+		
+		matrix.multiply(baseMatrix)
+		for(var line = 0; line < 3; line++){
+			content += matrix.elements[line + 0] + ' '
+			content += matrix.elements[line + 4] + ' '
+			content += matrix.elements[line + 8] + ' '
+			content += matrix.elements[line + 12] + '\n'
+		}
+	})
+	
+	return content
+}
diff --git a/three.js/threex-armarkercontrols.js b/three.js/threex-armarkercontrols.js
index 6bbadef..22aa3c0 100644
--- a/three.js/threex-armarkercontrols.js
+++ b/three.js/threex-armarkercontrols.js
@@ -27,7 +27,6 @@ THREEx.ArMarkerControls = function(context, object3d, parameters){
 
         // create the marker Root
 	this.object3d = object3d
-	this.object3d.name = 'Marker Root'
 	this.object3d.matrixAutoUpdate = false;
 	this.object3d.visible = false
 
@@ -73,6 +72,7 @@ THREEx.ArMarkerControls.prototype._postInit = function(){
                         // arController.trackPatternMarkerId(_this.markerId, _this.parameters.size);
                 });
 		arController.addEventListener('getMultiMarker', function(event) {
+			console.log('getMultiMarker')
 			if( event.data.multiMarkerId === _this.markerId ){
 				onMarkerFound(event)
 			} 
@@ -103,7 +103,7 @@ THREEx.ArMarkerControls.prototype._postInit = function(){
 	function onMarkerFound(event){
 		// mark object as visible
 		markerObject3D.visible = true
-// console.log('onMarkerFound')
+
 		// data.matrix is the model view matrix
 		var modelViewMatrix = new THREE.Matrix4().fromArray(event.data.matrix)
 
@@ -123,8 +123,7 @@ THREEx.ArMarkerControls.prototype._postInit = function(){
 		if( _this.parameters.changeMatrixMode === 'modelViewMatrix' ){
 			markerObject3D.matrix.copy(modelViewMatrix)
 		}else if( _this.parameters.changeMatrixMode === 'cameraTransformMatrix' ){
-			var cameraTransformMatrix = new THREE.Matrix4().getInverse( modelViewMatrix )
-			markerObject3D.matrix.copy(cameraTransformMatrix)
+			markerObject3D.matrix.getInverse( modelViewMatrix )
 		}else {
 			console.assert(false)
 		}
diff --git a/three.js/threex-artoolkitcontext.js b/three.js/threex-artoolkitcontext.js
index a09f3eb..f3445a9 100644
--- a/three.js/threex-artoolkitcontext.js
+++ b/three.js/threex-artoolkitcontext.js
@@ -28,8 +28,6 @@ THREEx.ArToolkitContext = function(parameters){
 		imageSmoothingEnabled : parameters.imageSmoothingEnabled !== undefined ? parameters.imageSmoothingEnabled : false,
 	}
 	
-// debugger	
-	
 	// set this._projectionAxisTransformMatrix to change artoolkit projection matrix axis to match usual webgl one
 	this._projectionAxisTransformMatrix = new THREE.Matrix4()
 	this._projectionAxisTransformMatrix.multiply(new THREE.Matrix4().makeRotationY(Math.PI))
@@ -41,6 +39,8 @@ THREEx.ArToolkitContext = function(parameters){
 	this._arMarkersControls = []
 }
 
+Object.assign( THREEx.ArToolkitContext.prototype, THREE.EventDispatcher.prototype );
+
 THREEx.ArToolkitContext.baseURL = '../'
 THREEx.ArToolkitContext.REVISION = '1.0.1-dev'
 
@@ -162,10 +162,17 @@ THREEx.ArToolkitContext.prototype.update = function(srcElement){
 	// process this frame
 	arController.process(srcElement)
 
+	// dispatch event
+	this.dispatchEvent({
+		type: 'sourceProcessed'
+	});
+
+
 	// return true as we processed the frame
 	return true;
 }
 
+
 ////////////////////////////////////////////////////////////////////////////////
 //          Code Separator
 ////////////////////////////////////////////////////////////////////////////////
diff --git a/three.js/vendor/jsartoolkit5/js/artoolkit.api.js b/three.js/vendor/jsartoolkit5/js/artoolkit.api.js
index ed8ef19..7d51d82 100644
--- a/three.js/vendor/jsartoolkit5/js/artoolkit.api.js
+++ b/three.js/vendor/jsartoolkit5/js/artoolkit.api.js
@@ -182,7 +182,6 @@
 
 			artoolkit.getTransMatMultiSquareRobust(this.id, i);
 			this.transMatToGLMat(this.marker_transform_mat, this.transform_mat);
-
 			for (var j=0; j<subMarkerCount; j++) {
 				var multiEachMarkerInfo = this.getMultiEachMarker(i, j);
 				if (multiEachMarkerInfo.visible >= 0) {
@@ -1504,14 +1503,14 @@
 
 			var path = url.split('/').slice(0, -1).join('/')
 			files = files.map(function(file) {
-				// debugger
-				if( file === 'patt.hiro' || file === 'patt.kanji' ){
+				// FIXME super kludge - remove it
+				// console.assert(file !== '')
+				if( file === 'patt.hiro' || file === 'patt.kanji' || file === 'patt2.hiro' || file === 'patt2.kanji' ){
 					// debugger
 					return ['http://127.0.0.1:8080/data/data/' + file, file]
 				}
 				return [path + '/' + file, file]
 			})
-console.log(files)
 			ajaxDependencies(files, ok);
 		});
 	}
-- 
GitLab