Wavefile feat. Hatsune Miku

Hi, I built my own 3D engine from scratch and created this web animation.

I've been working on the engine for the entirety of August and managed to get this simple demo out right around Miku's 14th birthday, which falls on the 31st August 2021.

Github repository

Browser Compatibility

The latest stable release of Firefox, Chrome or Edge on Windows or Android should work fine. At the time of writing, these are Firefox 90, Chrome 92 and Edge 92.

If you're using Safari 14.1 on MacOS or using iOS with Safari 14.1 installed, you would either need to upgrade to Safari 15 or enable the WebGL 2.0 feature manually. To do the latter:

Refresh the page to see the changes take effect.

Do note that on iOS, all browsers are forced to use Safari's Webkit browser engine due to App Store rules.

Thanks

The model used is the Hatsune Miku Ver.2 model by Animasa. It is one of the default models included in the MMD software. It was released on 5th of March 2009.

The song is Wavefile (short version) by Lamaze-P. It was released on 30th August 2010. Link to original.

The motion was created by Hino. Link to the distribution video. It was rotoscoped from Bakamerou's dance cover.

3D Engine For Miku

The 3D engine used is one I created completely from scratch. The only 2 external libraries it uses are Ammo.js for physics simulation and glMatrix for matrix operations. It is inspired by the de facto animation program of the Anime community, MikuMikuDance (MMD).

Features include:

1. PMD & VMD File Support

   PMD (Polygon Model Data) files store model information. VMD (Vocaloid Motion Data) stores motion information. These are the primary file formats used by MMD.

2. Skeletal Animation

   Forward and inverse kinematics are used. Forward kinematics is calculated using simple trigonometry. The inverse kinematics (IK) algorithm used is Quaternion Cyclic Coordinate Descent (CCD). Hinge joints and joint limits are also supported. The blog post Inverse Kinematics by Johnathon Selstad is the best resource I encountered by far on CCD IK.

3. Morph Target Animation

   Vertices are manipulated directly to mould the model. Used to animate facial motions and certain character props.

4. Soft Shadow Mapping

   Shadow mapping is used so that light can be obscured by other objects. The technique used for soft shadows is Percentage-Closer Soft Shadows (PCSS). Here is the PCSS Whitepaper by nVidia. This technique softens shadows by blurring the edges around shadows depending on the luminance of neighbouring pixels.

5. Real-time Physics

   Ammo.js is used to simulate constrained rigid bodies. It is a Emscripten-port of the Bullet physics engine. The version I used is my own custom build which includes some methods not included in the official release. Unused code is removed using Coverage Shaker and then further minified using the Closure Compiler.

6. Toon Textures

   More widely known as ramp textures. It accentures diffuse textures in order to fake the effects of advanced lighting setups.

Do note that being a personal engine, I will only take my own use cases and preferences into account when developing it. So I wouldn't use it if I were you. If you're looking for something more general purpose, you can consider THREE.js. They too have several Miku examples. With that said, you're welcome to look around the code to see how things work and perhaps draw ideas for your own engine. I myself extensively studied the code in Takahiro's MMD Viewer, who in turn studied the code in Atsushi's MMD.js, who in turn studied the code in the MMDAgent and MikuMikuStudio projects. Unfortunately, the source code for MMD was never released and will never be.

Privacy

This webpage contains absolutely no tracking.
No analytics, no advertisements.
No fingerprinters, no cryptominers.