はじめに
前回の記事では、 プロダクトグループGM/PdM・吉田(巧) が語る「ROOV walk」誕生の背景をCSOのTottiが深掘りしました。今回はその後編として、 Principal 3D Engineer・上松 との対談をお届けします。
前編でも触れたとおり、ROOV walkはV2までの独自エンジン“Styler3D”を使ったアプローチから、さらなる品質向上のために大規模リニューアルに踏み切りました。その立役者となったのが、ゲーム業界で培った豊富な3D知見を武器にSTYLE PORTに参画した上松です。
最大手マンションデベロッパーに広く導入いただいている3D空間体験プロダクトの、美麗な空間再現を可能とするV3エンジンに至るまでの軌跡と、今後どのように空間体験が広がっていくのか。
ぜひ最後までご覧ください。
目次
はじめに
上松さんの自己紹介とSTYLE PORT入社の経緯
なぜv2のままでは限界だったのか
3Dエンジン再構築の舞台裏
v3がもたらした「画質・UX」の革新
さらなる拡張――「街」への取り組みとこれからの挑戦
まとめとメッセージ
さいごに
上松さんの自己紹介とSTYLE PORT入社の経緯
totti: 本日はよろしくお願いいたします。まずはじめに、上松さんがどのようなキャリアを歩まれてきたのか、STYLE PORTに入るまでの経緯を教えていただけますでしょうか。
上松: よろしくお願いします。私はもともとゲーム業界で、開発に携わってきました。 学生の頃はデザイン・3Dモデリング・映像を学んでいたのですが、当時ソーシャルゲームの隆盛で勢いがあったゲーム業界に就職しました。
デザイナー・グラフィッカーのポジションからスタートし、エフェクトデザイナー・テクニカルアーティストなど、エンジニアとデザイナーの中間のようなお仕事をしてきました。プログラミングも中学生ぐらいから趣味で行っていたのもあり、時々によってUI開発やツール開発、サーバサイドの開発、グラフィックスレンダリングや演出周りの開発も担当もしていました。 前職のDeNA時代も含めて、ゲームとエンタメの世界で、持っているスキルを全て活用して「いかに良い見栄え、良い操作性、良い体験を作り出すか」を追求する日々でした。
totti: ゲーム業界中心でこられたのですね。そこからなぜ、不動産×3Dという新しい領域に興味を持たれたのでしょうか?
上松: ずっとゲーム開発・エンタメ分野を中心に据えていたのですが、これまでの知識が活かせる、ゲーム以外の領域にも興味を持ち始めていました。 副業でグラフィックとフロントエンド開発を組み合わせた仕事をいくつか経験し、手応えを感じていた時期でもありましたね。
そんな中でSTYLE PORTのお話を聞いたとき、「グラフィック、演出、インタラクション、開発」という、まさに私が持っているスキルセットが揃っていたため、すごくフィットするのではないかと直感しました。 しかも、当時は私自身がマンションを購入したばかりだったこともあり、不動産DXという分野も面白いな、と思っていたのも大きいです。
totti: なるほど、エンタメ界隈ご出身とはいえ、求められているスキルセットがドンピシャだったんですね。それに、吉田さんのとき同様ご自身の原体験とも重なったというのも興味深いです。
上松: はい、あと経営陣の方々がWeb系出身というわけではなく、実際に不動産業界で長年手腕を発揮されてきた方々であるという点も、ユニークだと感じていました。一方で、面接でお話しした吉田さんは「ザ・スタートアップ」という感じの人柄で、そのギャップにも魅力を感じたところがありますね(笑)
totti: 吉田さんも「上松さんとは初回面接でめちゃくちゃ意気投合した」っておっしゃっていました(笑)その面接の段階で、ROOV walkの技術的な部分にも触れられたのでしょうか? 例えばROOV walkのソースコードなど。
上松:そうですね、気になったものはすぐブラウザの開発者ツールで見てしまう癖がありまして...エージェントの方から会社の紹介を受けた後、実際にROOV walkのWebサイトを見て、データの作られ方やシェーダーなども確認していました。 読んでいて、これは既存のライブラリやエンジンを使っているわけではないな、ということは、一目でわかりました。同時に「すごい挑戦をしているけれど、ここからさらに良くできる部分がたくさんありそう」とも感じました。それが、次の「V2の限界」の話にも繋がってきますね。
なぜv2のままでは限界だったのか
totti: なるほど、入社前から3Dエンジンの技術的な側面をご覧になっていたのですね。具体的に、どのような点に限界を感じていましたか?
上松: 当時のROOV walkは、Styler3Dという独自の3Dエンジンで動いていました。Web上で3Dを、しかも独自エンジンで実現していたこと自体、すごくチャレンジングだなと思う一方、いくつかの課題も顕在化していました。
まず、画質面です。当時は、お客様からも、そして社内からも、「もう少し画質が良ければ…」という声が少なからずありました。 ライティングやマテリアルの改善、よりリアルな質感を表現するためのPBR(Physically Based Rendering: 物理ベースレンダリング)対応や、画面効果を高めるポストエフェクト 、データ量を削減するための圧縮テクスチャへの対応などが求められていましたが、Styler3Dのアーキテクチャでは、なかなか手を出しにくい状況でした。
totti: なるほど。当時のエンジンでは機能拡張の面でも難しさがあったのですね。
上松: それに加えて、メンテナンス性の問題もありました。ソースコード全体を読んだ印象では、生のJavaScriptで、しかも当時でも古いES5向けに記述されており、現代的な開発手法から見るとかなり厳しい状態でした。 もちろん、このライブラリを一気に、それも一人で作り上げる技術と、それがv2エンジン時代を支え、事業の基盤を築いたこと自体、本当にすごいことだと今でも思っています。
ただ、 開発ノウハウが極端に属人化していた側面もありましたし、開発エンジニアの数を考えると、 エンジン専属で人員を配置し続けるのも難しい。 このままStyler3Dの開発を続けるのは、コストパフォーマンスも悪く、技術的な限界も近い、というのが正直な見立てでした。
当時のv2物件の画質
totti: そこで、3Dエンジン自体を刷新する、という判断に至ったわけですね。
上松: そうなんです。Styler3Dを作り直してv3エンジンを作るという案も検証していましたが、開発効率や将来性を考えると、やはりオープンソースのエンジンに乗るべきだろうという結論になりました。 Babylon.js や PlayCanvas なども候補として検討しましたが、コミュニティの大きさやエコシステムの成熟度から three.jsを採用することに決め、あらゆるものを刷新するプランを作り、経営陣にプレゼンをして一気に動き始めました。
3Dエンジン再構築の舞台裏
totti: three.jsへの移行を決断されてから、実際の開発はどのように進められたのでしょうか? かなり大規模なプロジェクトだったと聞いています。
上松: 開始時でも大きなチャレンジだとは見積もっていましたが、手を出してみると想像していたよりも遥かに大変で長い戦いでした。 v3の開発は、単に3Dエンジンを載せ替えるだけでなく、大きく分けて3つのプロジェクトが同時進行で進みました。
- ROOV walkフロントエンドスタックのモダン化とUI刷新(TypeScript化)
- three.js上にROOV walk向けの拡張エンジン(WalkEngine)を構築
- 3Dデータ変換パイプライン(AssetImporter)の新規構築
上松: これらを、私を含めてWebエンジニア2名と、モデラー1名、必要に応じてバックエンドスペシャリストのサポートを受けるという少数精鋭のチームで、およそ1年強かけて完遂しました。
totti: それぞれ詳しくお伺いできますか? まずはフロントエンドのモダン化から。
上松: v2エンジン時代のROOV walkは、JavaScript、ビルドツールにGulpとWebpack、UIフレームワークにVue 2、CSSプリプロセッサにStylus、テンプレートエンジンにPug、そして独自エンジンのStyler3Dという構成でした。 当時からも不安定さ・ミスによるバグがよく起きていたこともあり、今後強固な開発基盤を維持していくために、このタイミングでより現代的なものへ変えるべきだと判断しました。
新しいスタックではTypeScript + Vite をベースとし、非標準的な要素を一気に移行、UIコンポーネントや構成を整理、デザインの変更など、かなり破壊的に変更していきました。
正直なところ、モデルデータ構造の互換性を保つ必要がなく、比較的小規模なシングルページアプリケーション(SPA)だったからこそ、断行できた側面はあります。 それでも相当な作業量です。 このようなリブートに近い、大規模なリファクタリングはなかなかできる経験ではないので、非常に勉強になりました。 思い返せば、この時の頑張りで負債が大幅に解消されたことと、操作感に大きく影響するコードを大幅に書き換えたことで、安定性、軽量化にも貢献し、頑張ってよかったなと思います。
totti: 次に、WalkEngine開発についてはいかがでしょうか? three.jsだけでは足りない部分があったということですか?
上松: おっしゃる通りです。three.js は WebGLを比較的薄くラップしたライブラリであって、Unityのようなゲームエンジンに比べると、アプリケーション開発に必要な機能はそこまで充実していません。 そこで、three.jsとROOV walkの中間層としてWalkEngineというレイヤーを設けて、Unityライクなコンポーネントシステム 、アセット管理・ロードの仕組み 、シーンやオブジェクトの状態を保存・復元するシリアライザーなど、よりモダンでパワフルなツールセットを開発しました。 このあたりは、私のゲーム業界でのUnity開発、ツール開発、そしてグラフィッカーとしての経験が、直接的に活きた部分だと思います。
totti: そして、AssetImporterの構築ですね。こちらも重要そうです。
上松: そうです。こちらもかなり難産でした… 元々、3Dモデリングツールで作られたFBXファイルを元に、「soba」というStyler3D向けの独自データフォーマットに変換するシステムがありました。しかし、このシステムが単一障害点になっており、またPHPで書かれていたためパフォーマンスにも課題があり、リプレイスが必須でした。 新しいAssetImporterでは、スケーラブルかつ拡張性のある設計を目指しました。 また、相談の末、今後のWeb標準フォーマットとしてGLTFを採用し、入力は汎用的なGLTF、出力はROOV walk向けに最適化・カスタマイズされたGLTFを使うことに決めます。
システム構成としては、AWS上で動く一連のワークフローとアセットAPIから成り立っています。 ワークフロー部分は、モデルデータのアップロードをトリガーに、ファイルのパース・分解、画像やモデルデータの圧縮、集約してアセットAPIへの登録などを行うAWS Lambda群と、それらを連携させる AWS Step Functions で構築。 アセットAPIは、テクスチャやモデルデータなどのメタデータの登録と実ファイルをAmazon S3へ配置・配信を行うものです。(アセットAPIのプロトタイプは私がTypeScriptで実装し、その後バックエンドのスペシャリストの方にGo言語に移植していただき、それが現在も運用されています)
データ変換のパイプラインの新旧比較
totti: AWSのサービスをフル活用されているのですね。どのようなメリットがありましたか?
上松: 元々複数物件が同時にアップロードされると詰まったり、待ち時間があったりという問題がありました。 LambdaとStep Functionsの構成にしたことで、大量のデータ変換を同時並行で、かつ安定的に実行できる ようになりました。 また、ワークフローを柔軟に分岐できるように設計したため、例えば、時間のかかる画像の圧縮処理だけを切り出して並列化したり、ROOV for Housting(別のプロダクト)で行うライトベイク処理を AWS Batch に委譲したりといった連携も、全体のフローを変えずに実装できました。
totti: グラフィック面での進化についてもお聞かせください。
上松: PBR(Physically Based Rendering) を本格的に実装したことで、金属、ガラス、布地など、 より現実に近い細かな質感表現が可能になりました。
また、質感表現やライトベイクに関連して、HDR(High Dynamic Range)テクスチャを低容量で扱うために、 独自のHDRエンコーダーを Rust で開発しました。これは、32bitのHDRテクスチャを独自の数式で対数カラー(Log Color)にエンコードして8bit画像に変換し、シェーダー側で元のHDR情報に展開するというものです。この処理も、AssetImporterのワークフローに組み込まれています。
totti:まさに技術の総力戦ですね。
上松:そうですね! これらの施策を、モデラーの方と二人三脚で進め、最初に「フラッグシップ物件」と呼ぶ、当時最高品質のデモコンテンツを作成しました。この品質がv2を大きく凌駕するものだったので、社内外から非常に大きな反響があり、v3への移行を後押しする力になりました。
v3がもたらした「画質・UX」の革新
totti:技術的な裏側を伺うと、v3への期待感がさらに高まりますね。実際にv3としてリリースしてみて、お客様や市場からの反響はいかがでしたでしょうか?
上松:一番大きかったのは、やはり 「画質が想像以上に綺麗になった」 という評価でした。特にマンションの販売現場では、光の入り方や壁の質感など含め「どこまでキラキラに表現できるか」 が重要視されますので、PBR対応などのグラフィック強化が直接響いた形ですね。
加えて、フロントエンドのモダン化やWalkEngineによる最適化によって操作感も軽快でスムーズになり、シーン内で使用できるテクスチャサイズも大幅に向上しました。 Webブラウザで動く以上、安定性やフレームレートは、体験の質に直結しますので、エンジン置き換えの苦労が身を結んだ形です。
v3デモ - フラッグシップ物件
同じ物件をもとに作られた、デモ物件(v2版 / v3版)
totti: その結果、v3導入後の受注が大きく増えたと伺いました。
上松: 「これだけ綺麗で軽快に動くなら、ぜひ自社の物件にも」 という声が格段に増えたようで、一気に採用物件が広がりました。 v2物件をv3化するというオプションもよく売れていたと聞いています。 もちろん、導入件数が増えると制作やサポートの体制強化が必要になるので、社内的には量産体制の構築が次の大きな課題となりましたが...。これは、嬉しい悲鳴ですね(笑)
さらなる拡張――「街」への取り組みとこれからの挑戦
totti: v3によって「室内空間」の体験が格段にパワーアップしましたが、最近はマンション単体だけでなく、「街」を3Dで表現する ROOV.space のような取り組みも進んでいますね。
2024年にリリースされた ROOV.spaceは、エリア一帯をWebブラウザで探索できる
上松: そうなんです。 これまでは部屋の中をいかにリアルに再現するかが勝負どころでしたが、住まい選びにおいては、 周辺環境や街並みも含めた「立地の体験」がすごく重要だと思っています。
そこで Google Photorealistics 3D Tiles などを活用し、マンションの外観だけでなく、周辺の建物とこれから建つ物件を3D空間としてシームレスに繋ぎ、探索できるような取り組みを進めてます。
totti: なるほど。室内だけでなく、その物件が建つ街全体の様子まで体験できるということですね。この取り組みは、今後どのように発展していくのでしょうか?
上松: 最終的には、特定のエリア一帯をデジタルツインとして再現して、そこに行政の情報 (ハザードマップなど)や リアルタイムの情報 (交通状況や天気など)、 街の情報 (店舗や施設、イベント情報など)、そして個別の物件情報を統合していきたいと考えています。 ユーザーがその街での「生活を具体的に想起」できて、さらには様々な事業者が乗り入れ活用できる「空間のプラットフォーム」になる、そんなプロダクトとして仕上げていきたいですね。
まとめとメッセージ
totti: ROOV walkのv3化、そしてROOV.spaceによる「街」への拡張と、STYLE PORTの挑戦は続いていますね。このエキサイティングな流れの中で、上松さんご自身は、今後どのような仲間と一緒に働きたいとお考えでしょうか?
上松:私がゲーム業界からSTYLE PORTに来て強く感じているのは、想像以上に 「自分の専門性を強火で活かせる場」 だということです。 3Dグラフィックスやエンジン開発はもちろん、Webフロントエンド、バックエンド、インフラ、データサイエンスなど、様々な技術や表現を取り入れ、挑戦できる余地が、まだまだたくさんあります。 また、スタートアップならではの裁量の大きさも楽しめる環境です。
一方で、私たちは 「不動産業界の常識をテクノロジーで変革する」 という大きな目標を掲げているため、乗り越えるべき課題も多いです。しかし、そうした課題を 「面白い!」と感じ、楽しみながら突破していける人 がもっと増えてくれたら、大変心強いです。
特にゲーム・エンタメ業界で表現やUI/UXを追求されてきた方は、そのスキルや経験を、この 空間体験 という新しいフィールドで活かせる場面が多いと思います。 自分のスキルが異業界でどこまで通用するか試してみたい という方にも、ぜひジョインしていただきたいな、と思ってます。
totti: ありがとうございます。最後に、これからのROOVやSTYLE PORTの未来について、読者へのメッセージを一言いただけますでしょうか?
上松:私たちが創っているのは、空間を自由に活用できる世界だと思ってます。ROOV walkで室内の体験を変え、ROOV.spaceで街の体験を拡張し、さらにその先へ... 私たちが培ってきた 3Dエンジン技術 や 空間データプラットフォーム を活かして、不動産にとどまらず、様々なサービスや産業と連携し、新しい価値を生み出す可能性があるんじゃないかなと思っています。
単なる不動産テック企業ではなく、 空間データのプラットフォーマーとして社会に貢献していく..というところに私はやりがいを感じています。 この記事を読んで少しでも興味を持たれた方は、ぜひ一緒にこの未来を創り上げていきましょう!
さいごに
v3という非連続な成長をもたらした「3Dエンジンの再構築」。 その裏側には、 ゲーム業界で培われた高度な技術 と 不動産DXへの強い情熱 が融合し、ユーザーにとって真に価値ある体験を追求するエンジニアたちの姿がありました。
STYLE PORTでは今後、 ROOV walk 、 ROOV.space をはじめとするプロダクト群を通じて、「住空間」から「街」、さらには「都市のライフスタイル全体」へと提供価値を拡張し、リアルとデジタルが融合した新しい世界の実現を目指していきます。
もしこの記事を読んで、 「ゲームやエンタメで培った自分の3D・開発スキルをもっと広い領域で活かしてみたい」「空間体験の未来を一緒に創りたい」 と感じられた方は、ぜひお気軽にご連絡いただければと思います。あなたの専門性が、これからの不動産DXを、そして社会を大きく前進させる力になるはずです。
/assets/images/743830/original/a47144fa-9d49-463a-b921-dc86ef70b4b9.jpeg?1478603559)