The goal of this project is to incentivize XR adoption in the best possible way we can imagine: open-source and on-chain.
The economics of this are possible. By combining WebVR, AR.js, and HIVE, we buildd a platform free for everyone to use that rewards good content with real cryptocurrency you can spend or transfer.
We recognize that in order for vr to take off, its creation needs to reach a point of enabling everyone to participate, so we lowered the barrier to entry as far as we possibly could.
Remix our Glitch projects to immediately begin building experiences that earn you rewards by publishing to Hive. Experiences that run on nearly any device, computer, and head mounted display through the web browser.
Deploy your next game, video, or experience at no cost with no programming expertise. We'll show you how.
We've made it easy to get up and running by integrating all the technical stuff so you can start creating right away!
To fully utilize our platform, you must have a HIVE account. It can take some time for your account to activate, but you can start building apps immediately.
Hive is a delegated-proof-of-stake social media blockchain. Users have a wallet that holds Hive crypto, and by staking some of their crypto in a process called powering up they get vote power. There is built-in inflation that funds a reward pool, which is paid out to content creators that earn it via upvotes from users with Hive Power.
Decentralized Applications are pieces of software that can run outside of centralized servers and app stores. They are resiliant in their ability to be distributed peer-to-peer, and their minimization on external dependencies.
Max photo resolution is 4096px, and must be in power of 2, such as 512x512px, or 1024x512px (.png or .jpg)
Click Add Images
Set your options
Drag and drop photos (no limit)
If [X] Add to scene is checked, the photos dropped in will be applied to box geometry and inserted into your scene. You can then use the inspector to place the photos in your scene.
Posting to Hive requires a Title, Body, and Tags. This allows your experience to be discovered and enjoyed by others on the network.
Get a Hive Account.
In our Glitch boilerplate you have access to the following views:
Glitch: modify the code in each file of your experience
dlux Builder: adds a toolbar to the Glitch view
Asset Upload: Drag-&-Drop asset well
App View: Live build of your app
Glitch is a collaborative development environment that allows users to quickly duplicate and modify apps. We've built on top of this to offer a social XR boilerplate with drag-and-drop asset upload and Hive publishing.
We recommend creating a Glitch account so you can keep track of all your apps and collaborate easily.
The dlux vr boilerplate is accessible on Glitch here:
On the left you have a Glitch instance which is collaborative, auto-saves, and has the ability to rewind your code.
On the right you have a running version of your app. Changes made to the code on the left are not shown on the right until you click the Refresh App button at the top.
At the bottom is the browsers web inspector.
If you need to edit the Hive post that contains your dApp, such as update the preview images or html, follow these steps:
Ensure you are logged in as the owner of the dApp(the username that posted it)
Navigate to your dapp on dlux.io or localhost
/dlux/@username/permLink in the address bar needs to be changed to /post/edit/@username/permLink
Now you have the screen to change the metadata that is the ipfs reference to your app, as well as the title and blog post.
Press Submit at the bottom and your Hive post will be updated, this action takes Resource Credits.
Once you're happy with how your app is working, you need to generate the preview so others know what they're clicking on.
For the blog, you need a traditional preview image, and for the portal inside dlux that goes to your experience, you need a 360 preview image.
Take a 16x9 traditional photo for the Hive blog entry by pressing Ctl-Alt-S
Take a 360 photo for the portal preview by pressing Ctl-Alt-Shift-S
Advanced App Uploader
Working With 3D Models
A-Frame recommends glTF
glTF is the rising star of 3D asset distribution viewing. In comparison to the older OBJ format, which supports only vertices, normals, texture coordinates, and basic materials, glTF provides a more powerful set of features.
In addition to all of the above, glTF offers:
Scene information (light sources, cameras)
Skeletal structure and animation
More robust materials and shaders
Models can be created or downloaded in glTF:
Sketchup Make 2017 + glTF Exporter is free and great for architecture
Blender 2.8 (beta) is a free, open-source, professional 3D modeling program with glTF export
Blender 2.79 + glTF Exporter if you're not on 2.8 (beta)
Sketchfab has thousands of free MIT license models auto-converted to glTF
Google Poly also has some free downloadable models in glTF
Your model should be under 3MB, and can include textures in power of 2 (1024x512). Animations are supported with animation-mixer.
1. Export or download your model as a glTF 2.0:
unpacked .glTF .bin .png .jpg
2. Click Add 3D Model in the dlux Builder
Convert png to jpg (beta)
KHR Unlit option (see below)
Pin to IPFS for 6 months (100MB limit)
3. Drag and drop your files
Open the logs if you want to see progress and confirmation of your asset being converted to a binary glTF (if not already in .glb format)
Once your asset is uploaded to IPFS, it will be inserted into A-Frame's asset manager, and placed in your scene at the origin
Your window will refresh with the updated changes
Now you can use the inspector to place your model where you'd like and save the changes back to your scene.
KHR-Unlit 3. Drag and drop your file(s)
Manually tinkering with glTF and OBJ
If you're not using our drag and drop uploader, you may want to better understand inside the files
glTF contains these files
.gltf (model and material information)
.bin (geometry and animation)
.jpg, .png (textures)
OBJ contains these files
.obj (model information)
.mtl (material information)
.jpg, .png (textures)
.gltf, .obj, and .mtl are all text files that can be created in Glitch by clicking the button + New File, while .bin, .jpg, and .png must be uploaded to assets or somewhere. Note anything in your assets folder won't be uploaded to IPFS, it will instead be served from Glitch CDN.
Drag in assets you'd like to use, such as glTF .bin files, .jpg or .png texture photos, music .mp3 files, and whatever else is needed to build your scene.
Steps for glTF .bin and texture .jpg or .png files
1. Upload all .bin, .jpg, and .png files to assets
Drag and drop the files into the assets folder in the left sidebar
Copy the URL of each file
2. Paste URL(s) into model containers
Open yourmodel.gltf with a word processor and search for "uri"
Update "uri": "model.bin" with the correct URL copied from assets
Update all instances of "uri": "texture.jpg" with the correct URL(s) copied from assets
Open yourmodel.mtl with a word processor and search for "map"
Update all instances of map_Kd texture.jpg with the correct URL(s) copied from assets
â† New Files
Click the + New File button in the left sidepanel
Create corresponding files on Glitch
yourmodel.gltf (if using glTF)
yourmodel.obj (if using OBJ)
yourmodel.mtl (if using OBJ)
Open the .gltf, or .obj and .mtl files you downloaded, or created. They can be viewed with any word processor on your desktop
Copy the contents of each file
Paste into the corresponding new file on Glitch index.html
Now that you have either:
an updated .gltf pointing to the .bin and any .jpg or .png textures in assets
an .obj and updated .mtl pointing to any .jpg or .png textures in assets
you can set it up in index.html
Animation mixer does not work for OBJs.
If your model wasn't exported with animation, you can still animate it using A-Frame. This works for both OBJ and glTF:
Convert your glTF to glb here: https://glb-packer.glitch.me
View your model here: https://sandbox.babylonjs.com/
Objects can use .MTL to define their material, including texture files. They may also use A-Frame's material component.
glTF (GitHub Source)
glTF contains a .bin for geometry and animation data. glTFs and can use texture files, but cannot use A-Frame's material property.
Learn more about using glTF with A-Frame: https://aframe.io/docs/0.8.0/components/gltf-model.html
Texture files for both OBJ and glTF should be .jpg or .png with a resolution power of 2. This means the following are okay:
2x2 pairs tend to be most optimal.
glTF loader example
Working With Images
Images for HIVE and dlux posts.
Posting through dlux includes both traditional 16x9 rectangular images for all front ends, and 360 equirectangular images for portal preview images in VR on dlux.
16x9 Images can be captured inside an A-Frame scene by pressing ctl-alt-s
360 Images can be captured inside an A-Frame scene by pressing ctl-alt-shift-s
Drag and drop your images onto the IPFS uploader
If you want your images to appear in the scene, whether traditional or 360, select the "Add to scene" checkbox. This will create either a box (traditional) or sphere (360) geometry with src set to your uploaded item so it appears in your scene.
The engine prefers images in power of 2 resolution.
This means the resolution should be 2,4,8,16,32,64,128,256,512,1024,2048,etc...
Note the original resolution of your image and append it or a ratio of it to the file name.
Ex. image.jpg is 1000x600px, rename to image_1.6.jpg
Scale your image using Photoshop or something similar.
Ex. scale image_1.6.jpg to 1024x512px
Adding And Manipulating Text
Add font to asset manager
Talk about character wrap
Text geometry is computationally expensive
Adding And Manipulating Shapes
Streaming Video Options
At the moment, video can be streamed from any platform supporting 3rd party players, such as Vimeo Pro or d.tube
Upload your video to d.tube, then
Load Video Assets
All videos should be loaded via the asset manager denoted
You can use traditional 16x9 or 360 videos.
Create an entity with the appropriate geometry (plane, box, sphere) and set its src="#myVideo"
The 3D world of dlux is built using WebXR.
We consider WebXR to be based on THREE.js including:
A-Frame, an HTML implementation of WebVR
AR.js, marker-based AR for A-Frame
WebXR-Polyfill, markerless AR built on WebVR
In the future, the WebXR Device API will be available, and will integrate ARKit and ARCore with WebVR.
Setup an Environment
Environment is a powerful component that allows you to quickly build out landscape and atmosphere for your scene. You do not have to use it, but is an easy way to get started and comes included in dlux!
In a dlux A-Frame scene:
Open the inspector by pressing ctl-alt-i
Select the "env" entity in the left side-bar
Select a-entity env
Start with a preset you like, and customize it in right side-bar
When you're happy with it, click the Save button in the left side-bar
Environment Customization Options
active turns the entire component on or off
dressing changes the shape of the dressing objects (trees, pyramids, etc). You can further customize the amount, color, scale, and variance.
flatShading changes the rendered appearance
fog adds atmosphere
grid appears on the floor and can be helpful for layout and design, choose any color.
ground changes the way the geometry of the ground in the distance. Customize the color and texture style to change how the ground is rendered.
horizonColor adjusts the color of the horizon, and the position and type of light can be customized floor appearance, colors, sky type, and lighting.
preset fills all values with those defined by the preset
skyColor adjusts the color of the sky, it's type can be set to color, gradient, or atmosphere.
Working with the code
You can work with the code directly in Glitch.
Environment is built in to dlux boiler plates, select a preset and modify this line:
Install A-Frame Environment Component by Diego Goberna (GitHub Source)
Change the environment to any of the predefined ones
At this time, dlux does not use aframe-physics-system by Don McCurdy (GitHub Source) by default.
To create collisions with the ground, floor, and walls, we recommend a nav mesh to restrict player movement.
A nav mesh is an invisible floor that the player is allowed to move on. For example, if you do not want a player to walk through a wall, there should be a gap in the nav mesh so they are not permitted to move there.
This approach has better performance, and allows the use of glTF files with shapes more complex than primitive geometries, meaning your ground can be varied terrain, not just flat. Interaction with static and dynamic objects can be achieved with AABB Collider and SuperHands.
If you need physics, keep reading.
To use the physics system, you must attach body components to the entities you want to participate in the physics system:
static-body for the ground, floor, and walls
dynamic-body for anything that's moveable
kinematic-body for the camera rig (not required)
Each body requires a shape. Ideally, we would use a model for our world, which would have varied terrain in a glTF format as we do with nav-mesh. Set its body type to static and its shape to mesh.
Unfortunately, "shape: mesh" is depreciated, and does not work with the kinematic-body. Therefore, complex shapes are not supported, only simple geometries, like ramps, boxes, and spheres, where shape typically doesn't need to be defined, and the default is auto.
The big drawback to using the physics system is you can't have varied terrain for the floor because shape: mesh is depreciated. If your scene has a flat floor and you want to use physics, here's how:
You will need:
A-Frame Physics System
A-Frame Teleport Controls
Add a static-body floor (primitives only)
Add a kinematic-body camera rig
What & Why
As the player moves around the world, we must define where the player may and may not go. The best way to achieve high performance is by defining a navmesh.
A navigation mesh, or navmesh, is an abstract data structure used in artificial intelligence applications to aid agents in pathfinding through complicated spaces. This approach has been known since at least the mid-1980s in robotics, where it has been called a meadow map, and was popularized in video game AI in 2000. Wikipedia
A navmesh is a simplified version of the floor, and can be used for collision detection with teleportation controls, as well as constraining movement controls.
Built into dlux
Navmesh comes built into dlux boilerplates, and should be updated as the scene changes. Once you build your scene, create a navmesh, then reference it in the scene by linking to it in this line of code:
How to Create a Navmesh
In the easiest case, a nav mesh can just be a simple mesh covering parts of the scene where characters are allowed to travel. Stairs become ramps, and obstacles are holes in the mesh. Don McCurdy
There are many different ways to create the glTF for your navmesh. Here are some of the workflows we have had success with.
Navigation Mesh A-Frame Inspector Plugin
Don McCurdy's plugin for the A-Frame Inspector allows creating of a navigation mesh from an existing A-Frame scene
A-Frame Inspector Plugin Recast
Create your scene
Use this plugin to create and test a navigation mesh
Add the script to your scene head:
Add inspector-plugin-recast to your <a-scene> tag:
Press Ctl-Alt-I to access the inspector
Click Build to see the mesh
Adjust parameters and click Build until desired mesh is achieved
Export the navigation mesh as a glTF file
Load the final navigation mesh into your scene as a normal model
You can make a navigation mesh in A-Frame using a primitive, but only one navmesh is supported in a scene. This works fine for a big flat floor, but being limited to one primitive doesn't work for building varied terrain, which instead requires one of the other methods of generating a glTF to use for the navmesh.
Click on the Performance disclosure triangle to view performance stats. Your navmesh.gltf should achieve 60 fps or higher for smooth performance.
How to Use a Navmesh
Now that you have created a navmesh for your scene, you must reference it in your scene.
Built in to dlux
If you're working from a dlux boilerplate, this is as simple as linking to it in the line
Start from scratch
If you're not, here are some step-by-step instructions to get navmesh working in A-Frame.
We will be using:
Pathfinding in A-Frame Extras by Don McCurdy (GitHub Source)
Controls in A-Frame Extras by Don McCurdy (GitHub Source)
A-Frame Teleport Controls by Fernando Serrano (GitHub Source)
Define the navmesh in your scene
Your player should be set up as a camera rig, with the head being your camera, and look something like this:
Finally, you need to add a bit of script for nav-pointer. This is already done in dlux.js, and can be added to an existing file, or inline:
The dlux side chain is comprised of several nodes running the same token software that determine their state from only signed transactions on the hive blockchain. Together these nodes communicate through hive and perform complex tasks. Forming a distributed trusted third party for open ended transactions, multiparty contracts, oracle information, and multi step processes. These node will arrive at consensus and maintain current state for each node.
DLUX Node Framework
State Nodes maintain state in a LevelDB
LevelDB has custom handlers to ensure order of transactions.
Every 100 blocks, a state file is posted to IPFS
Each node then posts the hash to Hive so a deterministic state can be calculated using the blockchain as a gossip protocol.
off-chain services now have deterministic consensus that can be rewarded via PoB.
Decentralized Mesh Network
Each node has active permissions for a Hive account. They can perform a range of actions from signing custom json for oracle and consensus reasons, facilitating escrow and transfers, account creation, and more.
Up to 25 nodes can control what consensus is. Nodes are elected to this group based on how much DLUXG they have which is used both to collateralized DEX transactions as well as a multi-signature wallet between them.
New nodes are elected if their addition to the group will improve the collateral conditions of the group.
Since consensus is determined by IPFS hash, replays are near instant. Ensuring the network remains current with the main layer, Hive.
Configuration: env vars:
Write: CURRENTLY dlux_ is the token prefix Custom JSON:
DLUX Fungible Token
Tokens are being issued for hive donations in the exchange area.
dlux tokens allow us to reward user actions like content discovery, performing swaps, determining consensus, and services like content storage and relay servers(streaming audio/video).
Incentivize participation in the dlux p2p economy
Distribute tokens from the reward pool to token holders.
Incentives for any action a webserver can verify
Decentralized exchanges with asset transfer
Issue tokens from our auction pool daily
New tokens added to the reward pool can be earned by token holders for dlux content based on beneficiary rewards.
The first dlux token is built using hive block streamer
dlux maintains a node to generate the reward pool
the reward pool pays for the node and incentivizes other nodes
the more nodes, the stronger the network gets
At ~5% APY inflation
Every 100 blocks 0.001 DLUX token is minted for every 2100.000 DLUX in existence.
The reward pool is used to incentivize others to run dlux nodes to verify integrity and that we're running our code fairly and correctly, provable through the hash.
Smart Non Fungible Tokens (NFTs)
Smart NFTs are here! And there's so much you can do with them, like generatively deciding attributes, leveraging scaleable vector graphics as visual layers with color options, user input games where each choice is a competition for the prize, trophies and achievements, music videos and art, NFTs that mint subsequent NFTs like levels or episodes or seasons, and anything else you may be able to conceive!
We are actively working on UI (user interface) to make this as approachable as possible for everyone.
Decentralized Exchange (DEX)
The Hive accounts running DLUX software in consensus are able to facilitate token swaps utilizing the following protocol.
Alice has 10 Hive, and wants to buy 10 DLUX. There are no buyers yet, so Alice checks the network to see which nodes are active(fills out escrow fields in advanced area of form), and selects Charlie as an escrow agent, and David to forward the transaction to a buyer, A collateralized escrow agent as well.
Alice signs an 'escrow_transaction' to Charlie and David. The Hive blockchain will ensure all the security around accepting this transaction. The DLUX network will read the transaction, verify it's acceptable, and let all nodes know that Charlie and David both have enough collateral to hold this trade.
Charlie and David will autonomously sign and broadcast the expected 'escrow_approve' transactions. Hive is in escrow between Charlie and David, each of whom have collateralized 20 DLUX. Bob sees the contract: 10 Hive for 10 DLUX, and buys it, That is sends a 'custom_json' transaction on hive with dlux header information.
The dlux network sees this transaction and the 10 DLUX is sent to Alice, and the 10 Hive is released from escrow to David, (David autonomously signs 'escrow_dispute', and charlie autonomously signs 'escrow_release'). The Dlux network withholds 10 more DLUX from each as the custody changes. Once David recieves the Hive Charlie has his dlux retruned plus a fee. David sends the 10 Hive to Bob and then has his dlux returned plus his fee.
At any time the trade will be 100% garanteed by the network. Since any one actor can hold any number of accounts some of the held escrow would be burned(sent to null) to prevent attacks that could withdraw dlux governance power early. On inflow trades like this holding a trade will be more costly as the escrow must be held longer.
While nearly the same chain of custody happens in the reverse direction, the order sits on the dlux side with out the need to collateralize the trade until execution.
Because collateralizing these trades requires liquidity, these trades can not be free. Especially inflow and fees are being implemented: 0.25% + 0.003 DLUX. 1/3 of which goes to each node fascilitating the trade, and the other third to the node reward pool which gets spread evenly over all creditable transactions daily.
This fee structure is to encourage larger balances to handle larger swaps, as well as to reward the network for enabling the trust required for the larger accounts.
Collateralization is also a finite resource, as such the network itself must regulate acceptable trades and autonomously cancel orders that fall out of acceptable bands to free liquidity at market prices.
No information asymmetry either way, all transactions on the DEX are open.
Account Creation Tokens
Utilizing delegation of Hive Power and multi-signature. An Account Creation Market can be deveoped to exchange ACTs between members of the network at fair cost.
Use proof of access and the oracle network to enable decentralized content delivery networks.
DLUX Node Network
dlux enables the ultimate decentralized computer
Out of the box dlux supports the Hive blockchain, a social media proof-of-brain system utilizing upvotes to reward content creators from a rewards pool.
We offer one-click publishing to the Hive blockchain in a monetize-able vessel that pays crypto currency for upvotes.
Hive functionality is built into both the 2D apps, and VR / AR scenes themselves, so for the first time people can interact with the blockchain from inside another reality.
dApp's will also have the ability to utilize our IPFS infrastructure to host data from user apps. Allowing dApps to be built with no upfront infrastructure cost.
dlux.io Wallet & Sandbox
Asset Storage, Exchange, Licensing
JSON Smart Contracts
P2P Free Markets
Serve Custom Data
Third Party APIs
Reticulum VR Chat rooms
The dlux token architecture is unique in that it uses worker nodes listening to every signed Hive Transaction (HTx) via hive-js (GitHub Source) to determine state. The can also perform actions on those signed HTx because the nodes have Hive Credentials (HC), which they can use to place the transaction back into the HIVE transaction stream.
DLUX nodes form a consensus. And can even collectively hold the keys to their HIVE funding accounts using multi-signature account authorities.
dlux Node listening to HTx
dlux nodes use a hive block processor, are super easy to run, and can do things like:
Content Management System (CMS) to build databases of private, encrypted information
Internet of Things (IoT) governance such as resource management
Create and sign Smart Contracts, witness transactions, hold and release escrow
dlux nodes power the decentralized exchange, dlux Token, and dlux NFT smart contract framework.
Running A Node
This software has been tested on Node.js version 10 through 15
Script a way to automatically git pull to stay up to date with daily changes.
Setup a system service to restart on quits to keep your node online.
Choose a cloud provider
Fork this repository
Connect your fork to the cloud server
Set configuration variables
dlux is the ultimate Hive blockchain infrastructure. Not only does it publish any type of dApp you can imagine to the chain, it allows those posts to make posts!
Read-only, allows you to see token stats
api:port/markets //json markets (has list of api's)
api:port/stats //json stats
api:port/@username //json balances
Writen via customJSON messages.
The following API allows users of your dApp to request to post new content to dlux:
Triggering the following code from the XR container will prompt the dApp user to make a Hive post
On the user's side a few items will be added to this data, such as the dlux main app and dlux beneficiary information as well as an "attorney" so users will be able to see which users dApp helped them make a this post.
Our wallet handles HIVE assets, as well as DLUX assets.
Unified Asset View
See all your assets in one place:
Smart Contract Non-Fungible Tokens
Authenticated users can perform:
Balance Inquiry API
Upload assets to IPFS from dlux.
dlux pins content that is uploaded to IPFS and .
Others are encouraged to build competing pinning services and bid in Open Markets.
js-ipfs-api (GitHub Source)
IPFS Oracles are hosting nodes that pin assets to storage.
Others are encouraged to provide services and bid the cost down, just like on AWS (Amazon Web Services).
Here is a data structure for our IPFS pinning service:
How it works
All participating witness nodes bid, and the lowest 20 bids are averaged to determine the price. Reward tokens are paid out equally. The program verifies your service is online, and tokens are distributed from the rewards pool per kb stored.
Call dlux-token for stats
dlux-token returns the preferred IPFS nodes you can upload to
Upload event happens, program records kbs data transfer
kb/reward amount paid out from rewards pool
The Hive blockchain provides our foundation through authentication.
It has two forms of currency tokens, HIVE and Hive Backed Dollars (HBD):
HBD is a peg to USD
HIVE can be powered up, into Hive Power, which gives the Hive Account more stake on the Hive Network, this can also be delegated risk free.
Running a Hivemind witness node would allow dlux to run plugins that monitor HIVE data, which would allow for things like search, and notifications. Currently this is part of our roadmap.