Transform! Golden Swordsman DRAN!
https://htanjo.github.io/goldran/
I created a 3D Web animation that is fan art of 90’s Japanese anime “The Brave of Gold Goldran” (黄金勇者ゴルドラン). When you scroll the page, it transforms from a vehicle to a robot.
Features
- Scroll-linked 3D animation
- Viewpoint adjustment by mouse or device movement
- Autoplay mode
- Fullscreen mode (PC)
- VR mode (VR devices including smartphones)
You can move the viewpoint position unlike normal videos. The page also has “Autoplay”, “Fullscreen”, and/or “VR” button at the bottom for more immersive experience.
Technical Details
This content powered by 3D data with keyframes exported in glTF format, and rendering it in HTML using WebGL. I could not have created this content without various open source projects. I especially appreciate below.
Babylon.js
JavaScript framework that renders beautiful 3D contents in Web pages. It has powerful features like PBR (Physically Based Rendering) as a 3D engine. Also, extensive documentations, online demos, and forums are a big help. I used Babylon.js for lighting, rendering, post processing, and playing animations.
Blender
Integrated 3D graphics software provided for free and open source. I used Blender for modeling, materials and animations making. 3D data is exported in glTF file (.glb) and imported into HTML with Babylon.js. To reproduce realistic materials, I have installed Fluent Materializer and Simplebake addon.
glTF Transform
Optimization tool for glTF files. To support mobile devices, it was necessary to reduce memory and file size. Especially on iOS, the browser crashes when the load becomes higher. So I have prepared two different glTF files, one for PC with 2K textures and one for mobile with 1K textures. Both are compressed with WebP. To automate this workflow, I have installed glTF Transform.
React
One of the most popular Web UI frameworks. The 2D UI is mainly implemented with React and its plugins, such as react-spring, react-tooltip, and react-i18next. To integrate Babylon.js into React application, I used babylonjs-hook library.
virtual-scroll
“Scrolling” is the most important topic for this project. On mobile devices, when the page is actually scrolled, GPU resources are taken up by scrolling and the 3D frame rate would be drastically unstable. So, this project does not actually scroll the content. Instead of that, it uses touch moves and mouse wheel events to simulate scrolling. This library was quite helpful to achieve it.
Vite
The build tool for the Web. It’s very easy to start and works blazing fast. Vite has definitely accelerated the development speed. I have built this project based on React + TypeScript template.
Source Code
The repository is available on GitHub.
https://github.com/htanjo/goldran/
Any feedback and questions are welcome. Thank you!
