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 ibrary 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
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: http://demo.krestianstvo.org
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
properties:
children:
spaceText:
extends: http://vwf.example.com/aframe/atext.vwf
properties:
value: "Virtual World Framework & A-Frame"
textColor: "#b74217"
position: [-2, 2.5, -2]
sphere:
extends: http://vwf.example.com/aframe/asphere.vwf
properties:
position: [1, 1.25, -4]
color: "#e0e014"
radius: 1
wireframe: true
children:
box2:
extends: http://vwf.example.com/aframe/abox.vwf
properties:
position: [2, -1.25, 0]
color: "#2167a5"
depth: 1
sky:
extends: http://vwf.example.com/aframe/asky.vwf
properties:
color: "#ECECEC"
camentity:
extends: http://vwf.example.com/aframe/aentity.vwf
properties:
position: [0, 0, 0]
children:
camera:
extends: http://vwf.example.com/aframe/acamera.vwf
properties:
look-controls-enabled: true
forAvatar: true
children:
cursor:
extends: http://vwf.example.com/aframe/acursor.vwf
