Konva VS A-Frame

used goJS in one project and konva in another

Konvajs - is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

Konva.js - example

Have a go at petswitch.com if you wish... I made the original Petswitch almost ten years ago, and it's had mild success since then, including CNET writing an article about it and it receiving the prestigious honour of 'most useless website' in week 41 of 2018, as determined by theuselesswebindex.com. Aside from the obvious question of why I even made this, it was getting pretty creaky – I originally built it with PHP and ImageMagick, with the facial features being manually selected via jQuery UI. So I decided to rebuild the whole thing with a full face-to-pet ML pipeline, on static hosting. To get the human face features, the app renders the upload to a temporary img element. This is a handy way to orient the image correctly via the browser, and saves having to deal with EXIF data. It's then resized, rendered to a canvas element, converted to a base64 string, then sent via fetch to Google's Cloud Vision API, which returns landmark coordinates of the face. I use these coordinates to correct any tilt on the face, mask the eyes and mouth via a mask image, then store each masked element as an additional canvas. Detecting pet faces was trickier. Google, Amazon and Microsoft all offer object detection APIs via transfer learning, and the approach is largely the same: you supply a series of images with bounding boxes around the objects you want to detect, either added via a web interface or uploaded via their API. You train a model online from these supplied images, then the service will return the estimated coordinates of any detected objects in an uploaded image. I found a dataset of both cats and dogs that had been labelled with landmarks on their faces, then wrote a script to convert the landmarks into bounding boxes around their eyes and nose, the dimensions based on a simple formula around the distance between the eyes in each image. All in all it's been trained on about 17,000 images of cats and dogs, and the accuracy seems to be pretty good. I was pleased to discover it actually works pretty well on other pets too. I've also added some friendly pets to the Petswitch family for those that don't have a pet on hand. I decided not to use a framework for this, it's written from scratch using a series of ES6 modules – although I did use Konva to handle the manual selection of facial features if the API can't detect a face. I used ParcelJS as my task runner, and my detection APIs are hosted on Firebase Cloud Functions. Let me know if you have any questions, although I can offer no good explanation for why I created this monstrosity...

Next I tried with pure Konva (we use a modified version), because I found this: https://github.com/konvajs/konva/issues/1247

Konva or React Konva

Both Fabric.js and Konva should be able to help you with this requirement, if you're happy with a canvas-based solution. If you prefer SVG then you could use something like SVG.js

Konva,

Easel, Fabric, Konva, Mesh, P5, Paper, Pencil, Pixi, Pts, Scrawl-canvas, Three, Two.

When we would be able to use WebXR and A-Frame? You answered in short in the last video, but can you give a clue? :) At least that what is the earliest possible day. Asking because this can make me to wait more for a more polished device if I would not be able to use WebXR for months...

I'd recommend the official docs. Aframe is also worthwhile, it uses threejs under the hood. It has great docs and a focus on AR/VR. Going through all chapters of the docs should give you a great introduction. https://aframe.io/docs/1.3.0/introduction/

It uses A-Frame which is a web framework for building virtual reality experiences.

Good example!

I was trying to use A-frame a bit back, another contender. https://aframe.io/ Somewhat ashamed to admit, I fell on my face a couple times trying to get the legacy cjs modules building with a couple toolchains & put my 3d web projects back in deep-freeze. https://github.com/aframevr/aframe/issues/3732

Maybe https://aframe.io and AR.js is all that you would need?

I think the easiest framework to start with is A-Frame