dlux | decentralized user experiences
dlux
Concept: dlux.io
It is now possible to build virtual reality straight in a web browser. Aframe is a library built on top of three.js that brings object oriented concepts to webGL. Aframe websites have a built in inspector/editor that allows anyone on a desktop to build a 3D scene. Which means a simple recursive query can serialize all the objects in the scene and save them to JSON, format as a post, and store on the block chain. While exploring posts through existing api.steemit.com we can pull hot and new posts, and when loaded reconstruct the 3D scene from posted JSON. Comments can be audio encoded to base64, loaded with positional data, so you know what somebody is referencing in a post. The concept is simple, allow people to share 3d content(load media as textures as well)... provide for free/ad-free creation/storage/exploration, with steem incentive throughout. Limit users only by their imagination.
GLTF files are internally referable, allowing you to down load a larger asset and refer to sub-assets. Building a static library of 3D content is a goal of this project.
Aframe.io - try some experiences
Technology Stack:
For the broadest possible audience we will be delivering to a web browser. Borrowing a lot from how D.Tube has structured their d-app.
- Framework: express
- Data storage: 64kb on blockchain -> IPFS stored .gltf
- node packages: aframe aframe-extras steemjs sc2-sdk
Roadmap:
- Design metadata scheme for posts
- Branched aframe-inspector to build in specific functionality, to include steem integration.
- Improve IPFS uploader(integrated with aframe-inspector branch)
- Design all VR UI
- Utilize steem for broadcast nodes, allowing P2P live and social VR experiences
- Catalog referable sub content in the gltf stores, keep track of license and SMT integration.
How to contribute:
Clone dluxio/dluxio.
$ npm install
$ npm start
localhost:3000 is now serving dlux... "Create VR" takes you to a scene, Crtl+Alt+i opens the inspector.
Currently implementing IPFS storage, designing a post structure, and building the re-constructor.
If you feel like contributing feel free, I intend on delegating all steem rewards not used for overhead from this project to utopian.io to benefit those willing to work on it... including myself.
Unfamiliar Concepts
How user's interact with virtual environments will be different based on their control schemes. Some users have a keyboard and mouse, some a head mounted display(HMD), but most will have nothing more than a mobile phone with a magic window(or placed in Google Cardboard). Unfortunately this means for ease of development we will give all our users a single ray-caster for interaction.
A-frame only has two classes, Scene and Entity. You can only have one scene, all entities are appended to it, or to other entities. By adding properties to entities as you build them out.
To start we define our scene in the body(this is explained as standalone code):
<html>
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
</a-scene>
</body>
</html>
From here on we will be working exclusively in the <a-scene> tag; declaring all entities to be the child of the scene. Let's throw some things in the scene to look at, give us a point of reference.
<a-scene>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
Now when you load this page you'd be presented with a static scene, the camera is defined for you but no control mechanism exists.
<a-entity camera position="0 1.6 0 " universal-controls mouse-controls>
Now you should be able to move around with wasd and look around with the mouse.
<a-entity camera position="0 1.6 0 " universal-controls mouse-controls>
<a-entity cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.02"
material="color: blue; shader: flat">
</a-entity>
</a-entity>
Now to give us our ray-caster! We will use the built in cursor tag with it's attributes. Notice here we attached the cursor as a child of the camera, and placed it in front of the camera on it's Z axis. The cursor will now be able to trigger events.
Our final issue to tackle is a method to bring back the menu after exploring our scene.
<a-scene>
<a-entity camera position="0 1.6 0 " universal-controls mouse-controls>
<a-entity cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.02"
material="color: blue; shader: flat">
</a-entity>
</a-entity>
<a-sphere cursor-listener position="0 0 0" scale="0.5 0.5 0.5" transparent=true opacity=0 universal-controls mouse-controls></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
Here I put an appropriately sized sphere at 0,0,0. The camera is at 0 1.6 0. Both of them have control schemes attached to them, and now the invisible sphere will follow the camera around.
AFRAME.registerComponent('cursor-listener', {
init: function () {
this.el.addEventListener('click', function (evt) {
this.setAttribute('material', 'opacity', 1.0);
});
}
});
Finally, we register our sphere so that on click it becomes visible. Giving us an entry point for further development.
Reference A-Frame further at aframe.io
Posted on Utopian.io - Rewarding Open Source Contributors
It is a nice project, I shall give it a try
Hey @disregardfiat I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]