It's my hobby to make random apps/programs for things I am interested in, hopefully learning something new in the process. In this post I'd like to talk about the making of those 3d bobbing embeds you see around this blog. Since this page contains a lot of models as examples, it might be a bit slow.



This post will not go into detail about the process of extracting these assets from the game, consult the relevent wiki page for that.

Mesh, Texture, and Animation

A model is made up of 2 parts: a mesh (*.obj) and a texture (*.png), usually both are found in the same asset bundle. The mesh itself contains the UV mapping that defines where to stick the textures, so we can just combine the two for a model close to what we see in game. To actually move said model or "animate" said model we need to attach an animation. A model is made up of 2 parts: a mesh (*.obj) and a texture (*.png), usually both are found in the same asset bundle. The mesh itself contains the UV mapping that defines where to stick the textures, so we can just combine the two for a model close to what we see in game. To actually move said model or "animate" said model we need to attach an animation.

The AnimationClip class defines an animation in Unity. They're stored in separate asset bundles from the model, likely because they tend to be shared between characters. AssetStudio allows us to export an Unity Animator object plus any number of AnimationClips as a filmbox (*.fbx) file, but since we want to be able to mix and match animations, I opted to attach the animations to a dummy fbx file that I attach to the models at runtime. The AnimationClip class defines an animation in Unity. They're stored in separate asset bundles from the model, likely because they tend to be shared between characters. AssetStudio allows us to export an Unity Animator object plus any number of AnimationClips as a filmbox (*.fbx) file, but since we want to be able to mix and match animations, I opted to attach the animations to a dummy fbx file that I attach to the models at runtime.

All character models in Dragalia share the same set of "Bones" that are moved around according to the defined animations, so you can give any character any animation (Euden here is doing Gala Mym's win animation). All character models in Dragalia share the same set of "Bones" that are moved around according to the defined animations, so you can give any character any animation (Euden here is doing Gala Mym's win animation).

However, if you attempt to attach animation to models with different bones, you obtain some highly cursed results. Notte is one such example, despite being marked as a "character" her bones are not the same as your typical adventurer. Should Cygames ever release a playable adventurer Notte, she will either have completely unique animations made for just for her, or a new model with normal bones. However, if you attempt to attach animation to models with different bones, you obtain some highly cursed results. Notte is one such example, despite being marked as a "character" her bones are not the same as your typical adventurer. Should Cygames ever release a playable adventurer Notte, she will either have completely unique animations made for just for her, or a new model with normal bones.

Three.js

Now that I have the files sorted out, I want to actually render the models and the animation somewhere. The library utilized for this blog is three.js, an open source library for rendering 3D objects on HTML5 Canvas. To render anything with three.js, there must be a scene, an object added to the scene, a camera that defines the viewpoint, and (optionally) a control module that allow us to rotate the model. I want the models to look bright and generally fit onto any page, so I chose to use MeshBasicMaterial which had no shadow. With the model is rendered on a page hosted on this site, they are inserted into pages via <iframe> (an admittedly archaic method).

For more details on how three.js is configured for Dragalia Models, check out the source code of our model viewer.

Various Secrets/Easter Eggs

There are a number of models that are used but not freely seen in game, because they are not playable. Hence I'd like to highlight some cool details you don't normally see. You can view all the models currently uploaded in this barebones index page.

The Summoner

The summoner is only seen in summoning animations, but she actually has the same bones as an adventurer. Her outfit seems modest from the front, but it's actually exposed at the back. The summoner is only seen in summoning animations, but she actually has the same bones as an adventurer. Her outfit seems modest from the front, but it's actually exposed at the back.

Notte, 1st Anniverary Ver.

Notte's Anniverary dress is cute as fuck, I'd pay dia to have her wear this every day. A interesting thing is that this Notte model's variation id (an extra ID attached to alts) is 05, implying Notte 02 through 04 that we haven't seen yet. Notte's Anniverary dress is cute as fuck, I'd pay dia to have her wear this every day. A interesting thing is that this Notte model's variation id (an extra ID attached to alts) is 05, implying Notte 02 through 04 that we haven't seen yet.

Generic Villager

These two (plus the Generic Villager Girl and Boy These two (plus the generic bandit ) showed up back in FEH defense battle. I hope we see more generic NPC art translated into models in the future.

Coco & Mimi

Cerb's two doggy pals are actually individual models. I'm not sure why there are two models when Coco & Mimi appear visually indistiguishable though. Cerb's two doggy pals are actually individual models. I'm not sure why there are two models when Coco & Mimi appear visually indistiguishable though.

Marishiten's Piglet

This cute little oinker only appears in This cute little oinker only appears in Marishiten's Summon Animation which is quite a shame.

Siren's Fish & Pop-Star Version

I believe these are similar to the piggy and only appears in Siren's summon animation, though I don't have clips of that on hand to confirm. The pop-star version has a cute flower(!). I believe these are similar to the piggy and only appears in Siren's summon animation, though I don't have clips of that on hand to confirm. The pop-star version has a cute flower(!).

Unused Lance There exist models for several weapons that players cannot aquire in game, while most of them are found on enemies and NPCs, these two are never seen anywhere in game. The staff seem to be color swap of Void Poseidon's staffs.