project screenshot 1
project screenshot 2
project screenshot 3
project screenshot 4
project screenshot 5

iFrameSea

iFrameSea builds a Web3 metaverse using BabylonJS, Hardhat, and React/Next.js. Users can explore a virtual world with a marketplace, visualize DeFi portfolios, and connect real-world assets, showing the potential of merging metaverses, DeFi, and RW connectivity on Ethereum.

iFrameSea

Created At

ETHOnline 2023

Project Description

iFrameSea aims to create an immersive 3D metaverse environment that brings together the best of decentralized finance (DeFi) and real-world assets (RWA) in an interactive virtual world.

At its core, iFrameSea will provide users with an avatar-based metaverse powered by BabylonJS that runs directly in the browser. This interactive virtual environment will contain features like:

A marketplace where users can browse and purchase both digital and real-world goods and services. Payment processing will take place through integrated DeFi and crypto wallets. A portal for viewing data and managing DeFi investment portfolios. Users can visualize and track holdings across popular DeFi protocols. Integration with Internet of Things (IoT) devices and real-world assets like real estate. Users will be able to view and interact with RWA representations in the metaverse. On the backend, iFrameSea will leverage Ethereum for blockchain functionality. Smart contracts built with Hardhat will enable decentralized, trustless transactions. Next.js will provide server-side rendering and optimization of the frontend.

The goal of iFrameSea is to demonstrate how the worlds of metaverses, decentralized finance, and real-world assets can intersect to create new utilities and experiences. It aims to be an exemplar of blockchain innovation and the possibilities at the frontier of virtual worlds.

How it's Made

At the core of iFrameSea is BabylonJS, a powerful WebGL-based 3D graphics framework that handles all of the heavy lifting for building and rendering 3D environments directly in the browser. BabylonJS integrates with WebXR for future VR/AR capabilities.

For the frontend, React and Next.js provide the flexibility and optimizations needed for a smooth user experience. Features like server-side rendering and static generation allow us to pre-build key metaverse components for faster loading.

On the blockchain side, Hardhat helps rapidly develop and test the Solidity smart contracts that enable trustless transactions, NFT minting, and other key behaviors in a decentralized environment.

Web3.js gives a clean interface between the frontend and blockchain layers, facilitating connection to the user's wallet and access to Ethereum node providers like Infura.

One novel aspect is how we integrated ReadyPlayerMe for cross-platform avatar support. We built custom tooling using BabylonJS to retarget avatar animation rigs, allowing users to bring their avatar identity into iFrameSea.

No major hacks were required, just diligent assembly of robust Web3 building blocks. We focused on leveraging the powers of proven technologies like React and BabylonJS rather than reinventing the wheel.

background image mobile

Join the mailing list

Get the latest news and updates