Signalless static WebRTC VR chat
Feature proof of concept
Static VR content from the public IPFS gateway with ad hoc positional audio chat
Features
- Signal-less(url encoded) WebRTC enabled VR chat; allows nothing but a static reference on blockchain to enable P2P messaging, simply by visiting the same "post" with any modern browser.
Integration:
Salva De la Puente's shared space component, which is built on top of WebRTC-swarm, is built for A-Frame. Let's start by calling these in the <head>.
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-sharedspace-component.min.js"></script>
A-Frame will render (by direct interaction with WebGL, skipping DOM rendering) <a-scene> encapsulated A-frame components. These are the required components and how they work to deliver the experience:
<a-scene>
<a-entity sharedspace="audio: true" avatars></a-entity>
</a-scene>
<template>
<a-sphere radius="0.1" color="#ffffff"></a-sphere>
</template>
This is in fact all the necessary boilerplate to enable VR chat. It's just a very plain scene with little if any points of reference(movement might not be possible either); #allalone. However, everybody who goes to this post will arrive in the same room. If you want to create private rooms, or have rooms with max number of people... we can use javascript to manage roomnames, overflow to empty rooms after a certain number of connections, allow users to choose their language, etc..
Let's make the experience more of an experience and less of a hack:
First upgrading the avatar template so you can see the shared rotation(what they are looking at instead of just where they are)
<template>
<a-sphere radius="0.1" color="#ffffff">
<a-sphere position="0.05 0.03 -0.08" radius="0.02" segments-width="8" segments-height="8" color="#000000"></a-sphere>
<a-sphere position="-0.05 0.03 -0.08" radius="0.02" segments-width="8" segments-height="8" color="#000000"></a-sphere>
<a-sphere class="themable" position="0 -0.07 -0.1" scale="1 1 0.5" segments-width="4" segments-height="4" radius="0.02" color="#11fd3e"></a-sphere>
<a-cone class="themable" position="0.03 -0.07 -0.1" rotation="0 0 90" scale="1 1 0.5" segments-radial="8" segments-height="1" height="0.03" radius-bottom="0.03" color="#1cff3c"></a-cone>
<a-cone class="themable" position="-0.03 -0.07 -0.1" rotation="0 0 -90" scale="1 1 0.5" segments-radial="8" segments-height="1" height="0.03" radius-bottom="0.03" color="#1cff3c"></a-cone>
</a-sphere>
</template>
Next we'll hold connection to allow the scene to load, and give our asset manager a task:
<a-entity sharedspace="hold: true; audio: true" avatars="onmyself: user"></a-entity>
<a-assets>
<a-mixin id="user" visible="false" look-controls wasd-controls share="position, rotation"></a-mixin>
</a-assets>
Finally, we'll handle onLoaded to set the connection to true, also programmatically generate a room name that is then just a sharable(or post-able) url.
<script>
var scene = document.querySelector('a-scene');
(function start() {
if (!scene.hasLoaded) {
scene.addEventListener('loaded', start);
return;
}
var prefix = window.location.host.split('.')[0] + '-';
var currentUrl = new URL(window.location);
var roomName = currentUrl.search.substr(1);
if (!roomName) {
roomName = prefix + Date.now();
currentUrl.search = roomName;
history.pushState({}, '', currentUrl.href);
}
var room = document.querySelector('[sharedspace]');
room.setAttribute('sharedspace', { room: roomName, hold: false });
}());
</script>
dlux.io
The ability to interact P2P server-less is a major feature that many in the Steem community can use to enhance their D-Apps. Decentralized Limitless User eXperiences plans to integrate this in such a way that a user just needs to enable a check box on a Steem post for this "basic" functionality.
Please join me on discord to bring the features everybody wants to your favorite platform!
Posted on Utopian.io - Rewarding Open Source Contributors
HOLLY SHIT THIS IS COOL!!!!!!!!!
yeah man lets get this to $1000 and #1 on stem! Want to hsow @teamsteem @stellabelle @thejohalfiles @sweetsssj and so many other big whales like @neoxian @surfyogi @matt-a and others like @ned @steem @steemit @blocktrades to lkearn about this
look at the update @disregardfiat showed me today it has a EDITOR I can EDIT this vr world hooked up to steem, in IPFS inside my browser! Its like 3dstudio max!!!
One of these days one of my coins will moon and I can quit this shitty worry about money and write some wicked code ;)
I write code because everybody is worried about money. XD
Hey, just wanted to let you know I gave you an upvote because I appreciate your content! =D See you around
Upvoted and resteemed AMAZINg man and I just made a post ABOUT yo and how @surfyogi @artzone @rocksg and @artzanolino who all work with surfyogis artzone shouldbe USING this and will work with you to create the artzone viryual reality art gallery :D :D :D
My post about you is on my blog, latest one just now :D ill keep bringin you attention!
I am very interested to know about it. We at artzone really wanna make it big and will be doing this in 3D art making virtual gallery.
Congratulations @disregardfiat! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on any badge to view your own Board of Honor on SteemitBoard.
To support your work, I also upvoted your post!
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOPHi @disregardfiat, I see there aren't any commits showing the work you have done. If you have developed something and you want to make a contribution about it via Utopian.io, then please make sure that it's actually pushed to the linked repository. Currently it's impossible for us to judge your work, so there is unfortunately no way it can be accepted. Please keep this in mind for future contributions and good luck with the development of the project!
Need help? Write a ticket on https://support.utopian.io.
Chat with us on Discord.
[utopian-moderator]
The link on IPFS is non-minified and clearly readable. “Impossible” is a strong word though I understand the sentiment.