/ Krestianstvo SDK

Virtual World Framework & A-Frame

In this post I want to share the details about the latest project being done on Krestianstvo SDK.
Virtual World Framework provides a robust decentralised architecture for building virtual world apps based on replicated computation model. It's JavaScript version is strongly based on ThreeJS library for programming apps with 3D visualisation and deep interaction support. So, for building such apps, the developer should be aware of ThreeJS internals, not to mention the knowing of the VWF component's architecture. But, actually VWF is working just with any programmable elements whatever simple they are. The A-Frame framework solves the problem of ThreeJS сomplexity for developing Web apps for Virtual Reality. It provides the component-based architecture for that. A-Frame incapsulates ThreeJS, hiding the internals, and providing high-level interface for describing web app declaratively.
So, I have developed a model and view drivers for VWF, that provides basic support for using A-Frame components in Virtual World Framework apps. That allows to build a VWF collaborative apps with 3D visualisation, WebVR, HMD, trackers and mobile devices support easily.


Source code at GitHub

Code for using in original VWF

Source code at GitHub

Here is a small video demonstration, that shows the interaction within collaborative Virtual World Framework app, which is composed by the A-Frame components.

In the video three Google Chrome web-browsers are directing to the same VWF app instance's URL. Every browser shows the replicated A-Frame scene with components in it. The users are represented with small cubes and are visible to each other. The cube on the right is holding the simulation, which is staying the same on all browsers.

Try online demo here: https://livecoding.space

Simple scenario for collaboration:

  • Open in Web-browser the given URL (http://demo.krestianstvo.org)
  • Copy the generated URL and open it in another browser window
    or direct Web-browser to http://demo.krestianstvo.org/app,
    where you could find all running VWF app instances to join to.
  • Open the generated URL at your phone or tablet.
  • Move in space with arrows or WASD and point objects with a cursor in the centre of the screen (this will generate Click event).
  • You could create any number of isolated VWF app instances, but for connecting to them you will need to know the generated URL.

So, how a simple VWF app with A-Frame is look like?
Here is a simple code of index.vwf.yaml:

extends: http://vwf.example.com/aframe/ascene.vwf
    extends: http://vwf.example.com/aframe/atext.vwf
      value: "Virtual World Framework & A-Frame"
      textColor: "#b74217"
      position: [-2, 2.5, -2]
    extends: http://vwf.example.com/aframe/asphere.vwf
      position: [1, 1.25, -4]
      color: "#e0e014"
      radius: 1
      wireframe: true
        extends: http://vwf.example.com/aframe/abox.vwf
          position: [2, -1.25, 0]
          color: "#2167a5"
          depth: 1
    extends: http://vwf.example.com/aframe/asky.vwf
      color: "#ECECEC"
    extends: http://vwf.example.com/aframe/aentity.vwf
      position: [0, 0, 0]
        extends: http://vwf.example.com/aframe/acamera.vwf
          look-controls-enabled: true
          forAvatar: true
            extends: http://vwf.example.com/aframe/acursor.vwf