A-Frame VS Konva

... I remember inventing signals circa 2005 for a knowledge graph editor I worked on in GWT back when I didn't care about knowledge graphs. Not long after that I was using similar concepts to develop a complex Silverlight decision support application for sales territories.

I'm still a little appalled that people have forgotten how to make HTML form applications like we made in 1999 and frequently use React for things that don't really need it. React has, I think, one of the most elegant methods of implementing a widget set ever invented (sure beats XAML, FXML, Visual Basic, etc.) but it doesn't support a real answer to maintaining application state that would be adequate for applications as complex as RIAs made by early adopters in 2005.

My favorite use for React is

https://aframe.io/

which works like a cross between VRML and Unity Framework. Here you can easily build a virtual world that people can experience with desktop, mobile and VR headsets. Something you can't do with HTML forms!

I have a few side projects based on HTMX but I am pretty sure we will see something like it but better soon. In particular back end frameworks need to be updated for the new reality. Often you have a "component" like a dropdown box which can either be drawn as part of a bigger page or updated on its own and you really need some way you can reuse the HTML template for those purposes and hopefully also reuse associated code that does database lookups and such.

A lot depends on what kind of app you want to build.

For my current side projects I am interested in two kinds of technology.

(1) ML-enhanced apps that involve sorting and classifying content. Here I am drawing everything in the back end and using HTMX to partially update the screen to, for instance, create modal dialog boxes. The point here is that I want to quickly add new UI tasks and it will not be so quick if a front end build process is involved. (Notably in my system you can roll out a new task on the back end without reloading the front end)

My back end is Python which I am souring on. The basic problem is that it does not have threads. So if I have a 1GB ML model and a celery with 32 processes I could waste memory with 32 copies of the model. There are ways of working around all this but if I was just using Java, one copy of the model could be shared by any number of threads. Java doesn’t have the ML libraries though.

The general principle here is that the vast majority of React apps are just ordinary form processing apps that could be developed using the methods we used back in 1999 and seem to have either forgot or never learned (if we are young.). You could make the case that DX and UX were better then.

(2) Virtual reality applications using

https://aframe.io/

here there is no back end. With these tools you can make a world that is browsable with an ordinary web browser but put on a VR headset and you are there. This is another counter to the boring React app because it is something you could never do with an frontendless site.

Meta Quest also has full support for WebXR which lets you bypass all the app store BS. You can use this framework to make worlds visible on most XR headsets as well as desktop and mobile

https://aframe.io/

My understanding is that Apple is making excuses about being slow to support WebXR.

Meta Quest. It even runs on Android. For that matter, so does Magic Leap 2. If they deign to do so all the "usual suspects" who make Android phones could make Android-based VR headsets.

As much as the media has been obsessed with the train wreck that is Horizon Worlds, it's a well kept secret that Meta Quest has an app store that works like the app store on a game console. You can even sideload phone, tablet and TV apps and they "just work" most of the time.

There is no working "metaverse" and even meaningful multiplayer games are thin on the ground, but no shortage of good single-player games and what I'd call game-adjacent apps.

It's little recognized that XR apps are highly portable because they are almost always based on portable frameworks like Unity. In fact, just about every XR headset supports WebXR which makes it outright easy to make web-based virtual worlds

https://aframe.io/

these work with desktop, phones and tablets as well as most of the AR and VR headsets. All it takes is that you "think different" and choose to live life outside the app store.

WebXR is pretty amazing. You can make a site with

https://aframe.io/

which can be navigated with a browser on desktop and mobile. Using a VR headset you can give permission and… you’re in the world! It’s like one of those kids TV shows where people can jump into the world of a book.

With WebXR you can make applications that run on Meta Quest, Magic Leap 2, Hololens 2, PCVR and other platforms. It kinda drives me up the wall that so many people are hung up on Apple because AVP competes with quite a few different platforms that are all pretty similar and if this kind of thing catches on you’d better believe people will be porting applications between them…

To Facebook's credit, Facebook really is investing in developing a new platform, which is more than you can say about Google, Apple, Amazon, etc.

The reality is that Horizon Worlds is a joke (maximum 20 players in a world and you trade players for geometry, a 20 player world is much smaller than an 8 player world.) Horizon Worlds doesn't let you import images, video or sound.

A VR world has to fit everything you can see in a headset. A really big game like Asgard's Wrath 2 (absolutely amazing) is like an open world game which is full of hidden loading screens and it's quite expensive to develop if you want it to feel open.

By not letting you load those kind of resources HW keeps the size of the world under control, plus it disappears pornography, copyright violations and a whole lot of trouble. It kills HW for me because I want to make content based on photography and visual art, and kills it for commercial users because McDonald's just has to put a Coca-Cola logo on the side of the cup.

The MQ3 is basically an Android phone you wear on your face and the mainstream way to deliver apps for it is the same as a mobile phone. Unlike Apple, you can sideload, in fact you can sideload many ordinary phone apps, such as the Tailscale client or the Denon HEOS client and they usually work. It's not less any open an environment than mobile.

On top of that you can create webpages with WebXR that appear in VR at the touch of the button and this framework

https://aframe.io/

you can make worlds that are browsable on phone, tablet and desktop but that you can enter with a VR headset. (Makes me think of a few kids TV shows where the characters can jump into books) These are compatible across a range of devices such as the Hololens 2, PCVR headsets, and even the Apple Vision Pro.

Google and Microsoft provide plenty of models for half-baked efforts that end in failure (every time a B2B startup gets bought by Google the competitors have a meeting of their salespeople the next day and say... "YOU'RE ON COMMISSION, YOU'RE GOING TO GET RICH!) Facebook is the one big tech company that is seriously investing in a new platform and they deserve some credit for it, whereas all the rest of them are so wrapped up in "business theater" and "technology theater" that nobody realizes Google hasn't made anything since they bought YouTube.

Traditionally, VR and AR development involved complex frameworks and languages, but Node.js brings a fresh approach to the table. Its familiarity with JavaScript allows developers to write code for VR and AR applications with ease. By utilizing libraries like A-Frame for VR and AR.js for AR, developers can create immersive experiences directly in the browser using Node.js. This seamless integration opens up opportunities for a wider range of developers to enter the VR and AR landscape.

if there is none, how could it work? I'm not a dev, i work in design, UX, art. however this seems excellent system https://aframe.io yet I'm sure are others. runs in the browser, super fast, the code is just simple human readable, text, so works with HTML, JavaScript.

Well, that was a rabbit hole I didn't expect to jump down. I've never used these programs, but it looks like graphviz has a vrml output option. Vrml, now there's a blast from the past. It never really saw much adoption and has been superseded by other formats. You might be able to find some simple converter utility to convert it to gltf, which isn't a file format from the last century. There are lots of things that can view gltf files. I'm not sure if you can load them into the Quest web browser directly or if you need to wrap them into a simple A-Frame site first. You could also use sketchfab to view them, but you seem more like an A-Frame kind of guy. Oh, hey, it looks like someone built a vrml loader for A-Frame. If graphviz really can output to vrml and the loader works, that should make things super simple for you. Not really sure how well any of this stuff will work. Good luck.

Based on this, I found that some of the libraries are dead and no longer have any support. Only two libraries are still alive and have significant amount of stars on GitHub and downloads on NPM. They are Fabric.js and Konva.js.

I have been assigned a task to create a sort of a canva clone which will have almost same features as canva with authentication, access control and rating system(not in this phase). I need help in finding libraries similar to https://konvajs.org/ which has updated docs and great support for Nextjs.

I'm currently using konva (& react-konva) package, to utilize it in Node.js enviroment I also need canvas package installed in. However, when running the code encountering this error:

used goJS in one project and konva in another

All the UI part would make sense to do in React. The actual drawing board you likely would need to implement in canvas or SVG. It still could be a React component, but for actual drawing, you'd probably use something like Konva (https://konvajs.org/).

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.

During the development of a complex interactive UI for the configuration of a digital laboratory ecosystem, we were utilizing the Konva.js library. Konva is a wrapper around the HTML canvas that simplifies working with shapes and interacting with the canvas a lot. Everybody dealing with the plain canvas API knows how much code certain tasks require, especially when user interaction with the drawn shapes is required. The most important features Konva offers to me are

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...