w@y_p01nt - Build and Mint a Virtual World, all from the Browser

This project is built for the 2022 HackFS hackathon, under the project w@y_p01nt. It was a top 10 finalist, selected out of 197 projects.

The application is entirely serverless, and runs on a single-page react app in the browser, hosted at: waypoint.on.fleek.co

The smart contract can be seen at landaxr/waypoint_contracts

High level features:

• Build an interactive 3d virtual world, all from the browser.
  • Drag and drop files to build a 3d metaverse. Current files supported are
    • images of .jpg and .png
    • movies of type .mp4
    • 3d models of type .glb
  • Videos have spatial audio
• Upload an entire virtual world to IPFS. This world is blockchain agnostic and can become part of any erc721 compatible NFT.
• Load the virtual world from IPFS
• Mint a virtual world as an erc721 compatible NFT to Polygon, or any EVM compatible blockchain.
• Load the virtual world NFT in any marketplace as an interactive application which is loaded from IPFS.
• If you are the owner of a world, you can edit it and update the world via a smart contract operation.
• If you are an owner of a world create an on-chain portal between virtual worlds. Travel through the portal to go to the target world.

How it Works

Technologies Used

IPFS + web3.storage

We use web3.storage to store erc721 token metadata, scene graphs, the scene files, assets, and the serverless application

Blockchain Agnostic Scene Graphs

When building a scene, and a user drags and drops files into the scene, all those files are stored as local File variables. When uploading the scene to ipfs, the scene graph and all of those files uploaded together using the web3storage sdk; This way they are all packaged together into the same folder on ipfs.

• Code to package and upload a scene to IPFS
• Example scene metadata folder on ipfs

The scene can then be loaded from IPFS directly, without it needing to be tied to a specific token. This would allow these scenes to be blockchain agnostic

• Code to load scene and from ipfs
• Example loaded scene

Erc721 Token Metadata

When a scene is minted it is uploaded to ipfs along with a screenshot captured from where the users is. The the erc721 metadata then links to the screenshot that was taken, the metadata.json of the scene, and the interactive application hosted on ipfs which will load the 3d scene and let a user interact with it.

• Example erc721 metadata

Local Development Setup

Install dependencies:

yarn

Start the application:

yarn start