close-circle
Close

Rapid Prototyping: Google Blocks, WebVR, & IPFS

A project log for Metaverse Lab

Experiments with Decentralized VR/AR Infrastructure, Neural Networks, and 3D Internet.

alusion 07/12/2017 at 20:290 Comments

It's been awhile since my last update and there's an overwhelming amount of exciting development to cover. For me the most compelling news is the powerful edit features coming back into the JanusVR native browser that makes it easy for anyone of any experience level to quickly build out their ideas into a beautiful multiplayer WebVR enabled experience without any coding knowledge prerequisite!

What You'll Learn

My hope is that readers can learn how to create rapid build their own worlds and be able to publish these spaces to the web within 20 minutes of following this tutorial. The bulk of the lesson is an overview of asset management with simple drag and drop room editing. My intention is that you'll learn good habits for how to collaborate with others and make use of your assets beyond single projects.

What You Need:

To follow this tutorial you must have a 2D web browser such as Chrome / Firefox / Brave and the 3D browser JanusVR. If you want to add your site to the interplanetary filesystem I have instructions here (http://imgur.com/a/ejvzd) to add an environment variable to windows so that you can call IPFS from anywhere. Here's a few free to use drag and drop asset pallets I made: [ lowpoly, blocks, spheres ]

Step 1: Prepping your ingredients together
Janus is like a kitchen for cooking rich immersive worlds from scratch as well as import/export from other engines (http://janusvr.com/tools.html). Successful restaurants and chefs maintain excellent organization and preparation of their ingredients. While the web is a plentiful resource for collecting assets, it is also messy. You know as they say, "Always wash your berries before you eat them." holds true for the metaverse developer.

All the asset types that are covered here in the documentation are your ingredients to creating a flavorful immersive experience. The best way I found to store them for fast preparation is to create a simple html asset pallet that links the asset with a thumbnail preview like so:

<html>
<body>
<ul>
<li style='display:inline-block'><a href='model.obj'><img src='model_thumb.jpg'></a>
</ul>
</body>
</html>

This creates a no-BS visual inventory for easy drag and dropping that is useful many times over. Your collaborators will really appreciate when you share assets in this format.

Step two: Editing the website

Quickly shape ideas in a visual programming environment similar to a minecraft video game. The same controls (WASD + Mouse) you navigate around in Janus are what you use to modify things in your world. Right click select, tab to scroll through attributes, WED to increase and QAS to decrease, left click to confirm. Here's a guide: http://janusvr.com/guide/editmode/index.html

Many hotkeys in Chrome are the same in JanusVR such as when viewing the source code (Ctrl+U). When you're done editing the details of the site, you can hit File -> Save as and save the HTML file to your local hard drive.

Step three: Upload to IPFS

Make sure that the IPFS daemon is running by hitting win+r and type cmd to open a command prompt. Type in ipfs daemon and start the daemon. Now go to where you saved your HTML file, hold down shift and right click to open a command prompt / powershell in that directory. Type ipfs add and copy the hash. Your website will seed through the network and be online when you request through the ipfs gateway ipfs.io/ipfs/hash. More documentation can be found here: https://ipfs.io/docs/

Be careful when using ipfs, it is preferred to use localhost:8080/ipfs/hash more than the ipfs.io/ipfs/ so that you keep it truly peer-to-peer. This hypermedia protocol aims to enable web permanence and so if you accidentally upload something sensitive to IPFS don't say I didn't warn ya. Hope you found this tutorial useful.

Discussions