Behind-the-scenes of ChainZoku — Episode 4: Expectations VS Reality

6 min readMay 23, 2024

GM!

EKCO here again, co-Founder of Miinded & lead dev on ChainZoku, which I’m going to talk about again today. This article follows on from the previous one: Episode 3–3D CHALLENGES. Make sure you read it first!

Today we’re going to do a tutorial on ‘how to redevelop Blender in Javascript’. Hmm, no, sorry — we’re going to talk about real-time 3D rendering of Zokus on OpenSea.

If you’re new here, make sure to read the previous chapters and the very thorough Guide to ChainZoku, which will tell you a lot about the project.

To make this article a bit more interesting, I’ve decided to interview myself using the questions we asked ourselves throughout the development process, and the answers we found.

Back to Basics

If you’ve followed the previous episodes, you’ll know that an NFT is matched with a Zoku, which has traits, and these traits are linked to Assets, which are themselves linked to 3D Objects, which are themselves stored in several Blender files.

Cool, we should be able to give all this information to Opensea and it should deal with it on its own… Right? Well… nope. Opensea can’t read a Blender file. In fact, nobody except Blender can read Blender files…

In one of the previous chapters (I can’t remember which one, just go and read them), I talked about the essential components of an NFT according to the ERC721 Metadata standard. On this subject I mentioned the fact that an NFT could contain media in addition to the image. This media can be of any kind: Image, Video, Music, Website or other. In our case, we’re going to assign it a website, or more precisely a link to a specific HTML page. And that’s what this article is about.

Why a website? I thought we were getting 3D Zokus on OpenSea, not a website?

Hold on a minute, I’m getting there.

Blender in your browser

Opensea is nothing more than a website (or a mobile app, but it’s the same thing), and if you want to display something in it, it has to be compatible with the web browser (or mobile operating system) that the user is using to display Opensea (Chrome, Opera, Edge, Brave, FireFox etc…).

Fortunately, there are 3D Object formats that are compatible with our favorite browsers, otherwise this feature would simply be impossible to achieve.

So we’re going to have to extract all the 3D Objects from the Blender files and convert them into one of the many existing 3D Object formats. We’ve chosen the GLB format (GL Transmission Format Binary file), which simplifies the process.

Did you convert the 400 3D Objects into GLB by hand?

Of course not, we’re devs, so if we can automate it, we will.

Using a new (and very robust) Python script, we go through the 7 Blender files, identify the 3D Objects, calculate all the variations, export 1 GLB file for each variation of a 3D Object, compress it, upload it, cache it and publish it publicly.

Each variation of a 3D Object? There are variations?

Unfortunately, yes. A Zoku is made up of a Body (head + neck + arms + torso), it also contains the expression (Passive, Smiling, Rude…), we have to apply a texture (skin color), and finally whether it has an open hand, slightly closed, closed, fingers spread. This means we need to generate every possible combination for each body:

Passive + White + Open = 1 GLB file
Passive + White + Palm = 1 GLB file
Smilling + White + Open = 1 GLB file
ETC…

So 3,079 possibilities for the bodies.

And you have to do the same for the Stickers, which are different depending on the Zoku’s expression.

Fortunately, only these 2 traits have variations. All the others (clothes, weapons, flying objects) have no variation.

In the end, we generated more than 10,000 GLB files to cover all the available possibilities.

Admittedly, the solution of exporting all the variations in GLB is not the best, but it is the simplest.

But every simple solution has its limits, right?

That’s good, you’re learning fast… And the limit is still the size of the file.

GLB is a standard 3D file that contains all the 3D data (Mesh, texture, normal map, albedo), which means that 1 3D object = 1 file. It’s so simple! As a result, the file is naturally large.

For ChainZoku, a 3D Object in GLB format is on average 4.5 MB. A Zoku contains a minimum of 8 assets, but can be as large as 13. As a result, a Zoku represents an average of 40 MB. That’s a lot. Especially as some GLB files are 300MB in size (e.g. Soul Guardian).

It’s hard to offer a ‘real-time’ solution when users have to download the equivalent of the whole of Wikipedia to display a single Zoku in 3D.

And yet, my Zoku is displayed relatively quickly!

To overcome this new problem we were able to rely on Draco Compression technology, which divides file size by 5, but adds a decompression step each time the file is opened.

This has helped to reduce the weight problem, with lighter files, but adds more CPU/GPU consumption to display them. Luckily, today’s PCs and smartphones are powerful enough to decompress even complex 3D objects quickly.

What about mobile?

On mobile, we’ve encountered other performance issues.

If you’ve taken a good look at a 3D Zoku on OpenSea, you may have noticed that there are dynamic shadows and dynamic highlights.

This is why, in addition to compression, we’ve added an “SD” mode that removes much of the detail from Zoku, as well as lighter shadow management system.

And to create this SD mode, we had to regenerate the 10,000 GLB files in low resolution, doubling the total number of files. But it’s ok, we’re talking about an extra 5 GB, it’s not that bad.

Coding with 3D

At last, we have all the GLB files corresponding to all possible variations of the Zokus. We can now display them in OpenSea.

Well, almost. Opensea can only display one GLB file at a time. We need to bypass this limitation. Hence the nice little HTML page mentioned at the beginning, which is linked to the NFT metadata.

Opensea is able to display this HTML page instead of the NFT image.

There’s a well-known Javascript library, ThreeJS, which enables you to display 3D on a website. It’s literally like coding 3D.

To do this, we create a blank ThreeJS 3D scene, add the dynamic lights, download the GLB files corresponding to the desired Zoku assets, unzip them, and ask the browser to render an image corresponding to the scene 60 times per second.

And voilà! You’ve finally got your Zoku spinning in 3D, complete with flames and explosions!

Honestly, the ThreeJS part wasn’t the most complicated: once you’ve got all the elements, it’s “relatively” simple to fit everything together.

There was a lot of optimization work, which is still not perfect on the iPhone… we’ll get there!

In the next article, I’ll be covering rendering times and monthly costs.

Behind-the-scenes of ChainZoku — Episode 4: Expectations VS Reality

Back to Basics

Blender in your browser

Coding with 3D

Written by Miinded