mind-ar - npm Package Compare versions

Comparing version 1.1.4 to 1.1.5

package.json

 {
   "name": "mind-ar",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "web augmented reality framework",
@@ -41,3 +41,3 @@ "main": "index.js",
     "html-loader": "^2.1.1",
-    "node-sass": "^5.0.0",
+    "sass": "^1.51.0",
     "sass-loader": "^11.0.1",
@@ -44,0 +44,0 @@ "style-loader": "^2.0.0",

README.md

 # MindAR
 
-For location-based AR and marker-based AR, checkout AR.js https://github.com/AR-js-org/AR.js
+<img src="https://hiukim.github.io/mind-ar-js-doc/assets/images/multi-targets-demo-8b5fc868f6b0847a9818e8bf0ba2c1c3.gif" height="250"><img src="https://hiukim.github.io/mind-ar-js-doc/assets/images/interactive-demo-1ab348a381cbd808f4d52c8750524d11.gif" height="250"><img src="https://hiukim.github.io/mind-ar-js-doc/assets/images/face-tryon-demo-369c4ba701f1df2099ecf05c27f0c944.gif" height="250">
 
-<img src="https://hiukim.github.io/mind-ar-js-doc/assets/images/multi-targets-demo-8b5fc868f6b0847a9818e8bf0ba2c1c3.gif" height="250"><img src="https://hiukim.github.io/mind-ar-js-doc/assets/images/interactive-demo-1ab348a381cbd808f4d52c8750524d11.gif" height="250"><img src="https://hiukim.github.io/mind-ar-js-doc/assets/images/face-tryon-demo-1e3433ff1dd89795d5c1b385778a9da8.gif" height="250">
 
-MindAR is a lightweight library for web augmented reality. Highlighted features include:
+MindAR is a web augmented reality library. Highlighted features include:
 
-:star: Support Image tracking and Face tracking
+:star: Support Image tracking and Face tracking. For Location or Fiducial-Markers Tracking, checkout [AR.js](https://github.com/AR-js-org/AR.js)
 
@@ -15,20 +14,47 @@ :star: Written in pure javascript, end-to-end from the underlying computer vision engine to frontend
 
-:star: Developer friendly. Easy to setup. With AFRAME extension, you can get your app starts with only 10 lines of codes
+:star: Developer friendly. Easy to setup. With AFRAME extension, you can create an app with only 10 lines of codes
 
-# Web AR Development Course - Fund Raising
+# Fund Raising
 
-To raise fund for the continuous development and support of the MindAR Library, I've created a WebAR development course. It's a very comprehensive guide to Web AR development, not limited to MindAR. Check it out if you are interested:
+MindAR is the only actively maintained web AR SDK which offer comparable features to commercial alternatives. This library is currently maintained by me as an individual developer. To raise fund for continuous development and to provide timely supports and responses to issues, here is a list of related projects/ services that you can support.
 
-https://www.udemy.com/course/introduction-to-web-ar-development/?referralCode=D2565F4CA6D767F30D61
+<table>
+  <tbody>
+    <tr>
+      <td valign="top">
+        <h2>Web AR Development Course</h2>
+        <p>I'm offering a WebAR development course in Udemy. It's a very comprehensive guide to Web AR development, not limited to MindAR.</p>
+        <p>Check it out if you are interested: <a target="_blank" href="https://www.udemy.com/course/introduction-to-web-ar-development/?referralCode=D2565F4CA6D767F30D61">https://www.udemy.com/course/introduction-to-web-ar-development/?referralCode=D2565F4CA6D767F30D61</a></p>
+      </td>
+      <td width="50%">
+        <img src="https://user-images.githubusercontent.com/459126/141425015-f5fe2912-b26d-4366-8952-5866a072fb34.jpg"/>
+      </td>
+    </tr>
+    <tr>
+      <td valign="top">
+        <h2>MindAR Studio</h2>
+        <p>
+          MindAR Studio allows you to build Face Tracking AR without coding. You can build AR effects through a drag-n-drop editor and export static webpages for self-host. Free to use!
+        </p>
+        <p>
+          Check it out if you are interested! <a href="https://studio.mindar.org" target="_blank">https://studio.mindar.org</a>
+        </p>
+      </td>
+      <td><img src="https://www.mindar.org/content/images/2022/07/screenshot.png" border="10"/></td>
+    </tr>
+    <tr>
+      <td valign="top">
+        <h2>Pictarize</h2>
+        <p>
+          Pictarize is a hosted platform for creating and publishing Image Tracking AR applications. Free to use!
+        </p>
+        <p>
+          Check it out if you are interested! <a href="https://pictarize.com" target="_blank">https://pictarize.com</a>
+        </p>
+      </td>
+      <td><img src="https://hiukim.github.io/mind-ar-js-doc/assets/images/pictarize-studio-98ea8d35d963ebcd7d31ca7695c3f984.png" border="10"/></td>
+    </tr>
+  </tbody>
+</table>
 
-![course-banner](https://user-images.githubusercontent.com/459126/141425015-f5fe2912-b26d-4366-8952-5866a072fb34.jpg)
-
-# Managed Solution - Pictarize
-
-This opensource project is under MIT, so you are free to use however you want. There is also a hosted platform built on top of this library called Pictarize, which allows you to build and publish apps directly online. Check it out if you are interested!
-
-https://pictarize.com
-
-<img src="https://drive.google.com/uc?export=view&id=1ygYyPpyvnxyofrIsRQP5oU-iFLu_xABa" border="10"/>
-
 # Documentation
@@ -40,27 +66,56 @@
 
-### Image Tracking - Basic Example
-<img src="https://hiukim.github.io/mind-ar-js-doc/assets/images/basic-demo-fde07aa7567bf213e61b37dbaa192fec.gif" width="300">
+<table>
+  <tbody>
+    <tr>
+      <td valign="top" width="50%">
+        <h2>Image Tracking - Basic Example</h2>
+        <p>Demo video: https://youtu.be/hgVB9HpQpqY </p>
+        <p>Try it yourself: https://hiukim.github.io/mind-ar-js-doc/examples/basic/</p>
+      </td>
+      <td>
+        <img src="https://hiukim.github.io/mind-ar-js-doc/assets/images/basic-demo-fde07aa7567bf213e61b37dbaa192fec.gif" width="300px">
+      </td>
+    </tr>
+    <tr>
+      <td valign="top">
+        <h2>Image Tracking - Multiple Targets Example</h2>
+        <p>Try it yourself: https://hiukim.github.io/mind-ar-js-doc/examples/multi-tracks</p>
+      </td>
+      <td>
+        <img src="https://hiukim.github.io/mind-ar-js-doc/assets/images/multi-targets-demo-8b5fc868f6b0847a9818e8bf0ba2c1c3.gif" width="300px">
+      </td>
+    </tr>
+    <tr>
+      <td valign="top">
+        <h2>Image Tracking - Interactive Example</h2>
+        <p>Demo video: https://youtu.be/gm57gL1NGoQ</p>
+        <p>Try it yourself: https://hiukim.github.io/mind-ar-js-doc/examples/interative</p>
+      </td>
+      <td>
+        <img src="https://hiukim.github.io/mind-ar-js-doc/assets/images/interactive-demo-1ab348a381cbd808f4d52c8750524d11.gif" width="300px"/>
+      </td>
+    </tr>
+    <tr>
+      <td valign="top">
+        <h2>Face Tracking - Virtual Try-On Example</h2>
+        <p>Try it yourself: https://hiukim.github.io/mind-ar-js-doc/face-tracking-examples/tryon</p>
+      </td>
+      <td>
+        <img src="https://hiukim.github.io/mind-ar-js-doc/assets/images/face-tryon-demo-369c4ba701f1df2099ecf05c27f0c944.gif"  width="300px"/>
+      </td>
+    </tr>
+    <tr>
+      <td valign="top">
+        <h2>Face Tracking - Face Mesh Effect</h2>
+        <p>Try it yourself: https://hiukim.github.io/mind-ar-js-doc/more-examples/threejs-face-facemesh</p>
+      </td>
+      <td>
+        <img src="https://hiukim.github.io/mind-ar-js-doc/assets/images/face-mesh-demo-8f5bd8d1bcbffbdb76896b58171ecc8a.gif"  width="300px"/>
+      </td>
+    </tr>
+  </tbody>
+</table>
 
-Demo video: https://youtu.be/hgVB9HpQpqY, 
+### More examples
 
-Try it yourself: https://hiukim.github.io/mind-ar-js-doc/examples/basic/
-
-### Image Tracking - Multiple Targets Example
-<img src="https://hiukim.github.io/mind-ar-js-doc/assets/images/multi-targets-demo-8b5fc868f6b0847a9818e8bf0ba2c1c3.gif" width="300">
-
-Try it yourself: https://hiukim.github.io/mind-ar-js-doc/examples/multi-tracks
-
-### Image Tracking - Interactive Example
-<img src="https://hiukim.github.io/mind-ar-js-doc/assets/images/interactive-demo-1ab348a381cbd808f4d52c8750524d11.gif" width="300"/>
-
-Demo video: https://youtu.be/gm57gL1NGoQ
-
-Try it yourself: https://hiukim.github.io/mind-ar-js-doc/examples/interative
-
-### Face Tracking - Virtual Try-On Example
-<img src="https://hiukim.github.io/mind-ar-js-doc/assets/images/face-tryon-demo-1e3433ff1dd89795d5c1b385778a9da8.gif" width="300"/>
-
-Try it yourself: https://hiukim.github.io/mind-ar-js-doc/face-tracking-examples/tryon
-
-### More examples
 More examples can be found here: https://hiukim.github.io/mind-ar-js-doc/examples/summary
@@ -80,16 +135,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-image.prod.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image.prod.js"></script>
     <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-image.aframe.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image-aframe.prod.js"></script>
   </head>
   <body>
-    <a-scene mindar-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/examples/image-tracking/assets/card-example/card.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
+    <a-scene mindar-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/card.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
       <a-assets>
-        <img id="card" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/examples/image-tracking/assets/card-example/card.png" />
-        <a-asset-item id="avatarModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/examples/image-tracking/assets/card-example/softmind/scene.gltf"></a-asset-item>
+        <img id="card" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/card.png" />
+        <a-asset-item id="avatarModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/softmind/scene.gltf"></a-asset-item>
       </a-assets>
 
       <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
-
       <a-entity mindar-image-target="targetIndex: 0">
@@ -112,3 +165,3 @@ <a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
 # Roadmaps
-1. Supports more augmented reality features, like Plane Tracking
+1. Supports more augmented reality features, like Hand Tracking, Body Tracking and Plane Tracking
 
@@ -158,3 +211,3 @@ 2. Research on different state-of-the-arts algorithms to improve tracking accuracy and performance
 
-Face Tracking is based on tensorflowjs face landmark detection mode (i.e. https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection). It also utilize this face geometry library: https://github.com/spite/FaceMeshFaceGeometry
+Face Tracking is based on mediapipe face mesh model (i.e. https://google.github.io/mediapipe/solutions/face_mesh.html)
 

src/face-target/three.js

@@ -206,4 +206,4 @@ const THREE = require("three");
     canvas.style.position = 'absolute';
+    canvas.style.top = video.style.top;
     canvas.style.left = video.style.left;
-    canvas.style.right = video.style.right;
     canvas.style.width = video.style.width;
@@ -213,4 +213,4 @@ canvas.style.height = video.style.height;
     cssCanvas.style.position = 'absolute';
+    cssCanvas.style.top = video.style.top;
     cssCanvas.style.left = video.style.left;
-    cssCanvas.style.right = video.style.right;
     // cannot set style width for cssCanvas, because that is also used as renderer size
@@ -217,0 +217,0 @@ //cssCanvas.style.width = video.style.width;

No alert changes

Improved metrics

Total package byte prevSize

48497812

increased by0.59%

Number of package files

161

increased by1.26%

Number of lines in readme file

209

increased by33.97%

No dependency changes