Hakodate in Real-Time CG: Building a GML Converter and Live Visual Performance

RubyIlluminations 2026
https://pixiv.doorkeeper.jp/events/195875

Transcript

1. Hakodate in Real-Time CG: Building a GML Converter and Live Visual Performance yuchi / Naoki Katahira RubyIlluminations 2026 2026/04/24
2. ˒ yuchi / Naoki Katahira ˒ GMO Pepabo, Inc. (SUZURI) ˒ Music Live [Visualization, Technical] / DIY Keyboard Self Introduction
3. ๫ྗతʹΧϫΠΠ2025 - Live at LanPage
5. ˒ 3D map data(̏࣍ݩిࢠࠃ౔جຊਤ) provided by the GSI ˒ Converting GML data to OBJ data using Ruby ˒ Visual performance in TouchDesigner using imported OBJ data Talk About
8. ˒ Released on 2026/04/01 ˒ h tt ps://www.gsi.go.jp/kibanjoho/mapinfo3D.html 3D map data at GSI(3࣍ݩిࢠࠃ౔جຊਤ)
9. ˒ Parts of Hakodate City are eligible. 3D map data at GSI(3࣍ݩిࢠࠃ౔جຊਤ) h tt ps://www.gsi.go.jp/common/000276823.pdf
10. ˒ Goryokaku and Hakodate Arena are not included in the service. 3D map data at GSI(3࣍ݩిࢠࠃ౔جຊਤ)
12. ˒ Data is provided in GML and SHP formats. ˒ GML is wri tt en in CityGML format. 3D map data at GSI(3࣍ݩిࢠࠃ౔جຊਤ)
13. What is GML
14. ˒ Geometry Markup Language ˒ XML-based format for geographic data ˒ Used to describe spatial features (points, lines, polygons) and their a tt ributes About GML
15. ˒ A 3D model description format for cities, an extension of GML. ˒ Detailed explanation available on PLATEU's media outlet, MLIT ˒ h tt ps://www.mlit.go.jp/plateau/learning/tpc03-2/ CityGML
19. ग़యɿࠃ౔஍ཧӃ΢ΣϒαΠτ(maps.gsi.go.jp)
20. ˒ ͜ͷ··Ͱ͸XMLσʔλ ˒ ൚༻ͷ3DσʔλΛѻ͏ιϑτͰ͸࢖͑ͳ͍ ˒ blender ˒ unity ˒ etc… 3D map data(̏࣍ݩిࢠࠃ౔جຊਤ)
21. ˒ h tt ps://github.com/kata0510/dkg3d-to-obj dkg3d-to-obj
22. ˒ Conversion application for 3D electronic national land base maps ˒ Converting GML data to OBJ data using Ruby dkg3d-to-obj
23. ˒ Parsing GML with Nokogiri::XML ˒ The building height is calculated using maxElv - grElv ˒ Collect posList as a 2D coordinate sequence ˒ Convert latitude and longitude to meters (XYZ) ˒ equidistant azimuthal approximation conversion ˒ Create a 3D mesh by extruding the bo tt om, top, and side walls ˒ Output OBJ File dkg3d-to-obj
24. Demo
25. Hakodate in Real-Time CG?
26. ˒ Using TouchDesigner ˒ node-based tool ˒ For real-time visuals and interactivity ˒ Used in art, installations, and live shows Hakodate in Real-Time CG?
28. Demo
29. ˒ I'll be doing VJ (visual e ff ects) during the DJ set later ˒ We will also use CG images of the city of Hakodate. ˒ Let's enjoy the fi nal night of RubyKaigi to the very end!🍻 Hakodate in Real-Time CG