The problem Sphere.ART solves

After seeing many NFT marketplaces existing on the blockchain, they did not have any unique ways of showcasing the NFTs. After all, NFTs are all about presentation. So to have a unique and new way of looking at NFTs we have created our submission.

Our Submission consists of two projects, Sphere.ART Marketplace and Sphere.ART Editor. The Sphere.ART is a marketplace for NFTs and the editor is tool/software for 3D NFT development.

Due to the character size limit, we could not fit the whole writeup of our project here: Complete Project Documentation

Sphere.ART Marketplace?

Sphere.ART is a platform that aims to build a new creative economy—a world where creators, designers, and developers can use the Tezos blockchain to value their skills in an entirely new way. In this world, users can create, buy and sell 3D Spheres as an NFT. Unlike other NFT marketplaces, Sphere.ART has come up with a unique way of presenting the NFTs. It allows users to move the camera to orbit around the 3d Sphere NFT. This gives the users freedom to look around the NFT and have a close to real-life three-dimensional view.

Features:

No transaction fees
Minted on Tezos
IPFS Storage
Video Preview on hover
Orbit Controls to interact
Sort & Search the tokens on the basis of time.

Sphere.ART Editor

Sphere.ART Editor is a tool/ software which allows anyone to get started with building 3D Spheres. With the help of the editor, there is no need for the creators to have 3rd party complex software, nor do they need a powerful machine to run them. Sphere.ART Editor is a part of our submission. The user can export the project and then sell it as an NFT for the buyers to buy it.

Features:

Offline support
Import any kind of 3d assets(gltf, obj, etc)
Export project to a .sphere file which contains the code, thumbnail, and a small video preview of the 3d model in motion.
Autosave
Import examples directly from the editor
Progress saved even after closing the browser

Challenges we ran into

For our team, this was the first time we were building a DApp on the Tezos blockchain, we were quite confused at the start but made it through all the hurdles. Some of the challenges we ran into are:

Smart Contract Development

We chose SmartPy for writing smart contracts. One of the main struggles we had was with determining how exactly to write an NFT Contract using the FA2 standard. The standard was easy to understand, but we were not able to find examples that could guide us. Thankfully we found CryptoCodeSchool, their tutorials were on point and just the perfect help we needed.

Frontend Designing

Designing an NFT marketplace is not easy. After finding resources online and inspiration from many UI templates, we were able to create our design in Figma.

Three.js Integration

We have developed our website using the React Framework, but the most challenging part of our project was implementing real-time 3D rendering using WebGL, luckily we found Three.js. Implementing 3D rendering to satisfy our NFT marketplace’s need, was quite complicated and hard for us. Although after spending a lot of time experimenting, reading the docs, and watching tutorials online, we were able to overcome this obstacle and use WebGL in our project.

Editor Implementation:

Now that we had a fully functional NFT Marketplace, we needed to develop a tool, which would allow any user to create, share and sell their 3D Sphere Modals. Creating 3D models is quite complicated and the software for it is resource hungry. To overcome this issue, we created Sphere.ART Editor. Luckily we Three.js has its own open-source editor, which gave us a huge advantage, to begin with. Combing both, our logic and open source code, we're able to deploy it for public use.

Upload validation:

We needed a way to detect if the file uploaded contains, the information we need to render it on our marketplace. We created our own extension (.sphere) which has all the information about the file.