古賀旭/卒業研究I

道端ミュージアム

道端にあるものに芸術的価値を見出し、3Dにして価値を共有する。

• 古賀 旭
• Keywords：Web, VR, AR, XR, 3D
• 試作ページ

概要

これは何？

Webページ上にマップを表示し、道端にある草や標識、オブジェなど様々な物に芸術的価値を見出して共有する。

背景と目的

• 背景
  • コロナ禍でインドアな生活が続く中で、外出時に道端で見かけるような草花や標識、変わったオブジェに関心を持つことが少なくなっている。そんな中、SNS上で綺麗な草花や変わったオブジェの写真や動画に多くのレスポンスがある。以上の事から、人々は外にあるオブジェクトに興味はあるものの、外出するには至っていないと考えた。
• 目的
  • 外に新しい発見を持ってもらう為に道端にある物をGoogle マップのようなサイトで紹介する。
  • 3Dで紹介する事によって、オブジェクトを詳細に見ることができ、利用者にインパクトを与えることができる。インパクトを与える事によって、道端にあるオブジェクトに関心を持ってもらえるようになり、外出を促すことができると考えている。
    
    

コンセプト

• 道端にあるオブジェクトに関心を持ってもらうために、3Dデータで紹介する。
  3Dデータで全体を詳しく見ることができる為、大きなインパクトを与えられる。
• データ化したオブジェクトは、実際に撤去されてもデータ上にアーカイブとして残せる為、後の時代にも伝える事ができる。
  
  

成果物の仕様

• 成果物の詳細
  • マップ表示(Leafletライブラリを使用)
  • 3Dデータを表示(A-Frameライブラリを使用)
    コンセプトサイト
    
    

制作ツール

• ハードウェア
  iPad Pro LiDAR Scaner
  Canon EOS 9000D

• ソフトウェア
  • 3Dモデル制作
    Polycam
    Blender
    Meshroom
  • Webページ制作
    Adobe Dreamweaver
    Atom
    Openstreetmap API
    Leaflet
    A-Frame
    
    

プロジェクトの期間

2022.04.08 - 2022.12.23

まとめ

• 今後の課題
  • 公開するWebサイトをどのようにして周知していくか
  • 3Dデータによって圧迫される通信量をどのようにして削減していくか
    
    
    
    

調査

現状調査

3Dを活用したWebサイトや作品展示に工夫を凝らしているWebサイト、3Dデータが実際にどのような使われ方をしているのかについて調べる。

作品の展示方法
現在多くの個展サイトや企業サイト、美術館サイトにて動きのあるWebサイトで展示している。作品自体に動きをつけたり、ブラウジングの中で様々なアクションを起こすことで来場者に興味を持ってもらうという試みが伺える。
浜松市秋野不矩美術館
WHAT MUSEUM | 寺田倉庫
書家／墨象作家 宮村弦
HIROKO KOSHINO コシノヒロコ展

3Dデータの活用
既存の作品を3Dデータ化して保存するという試みは広く行われている。一例として秩父神社の文化財である「つなぎの龍」を3Dスキャンして細かな形状を記録し、高精度な3Dプリンターでフルカラーで出力するなどの事例がある。
文化財を3Dスキャニング。フルカラー3Dプリンターで展示物として出力（秩父神社／原製作所）

調査結果
現在のWeb上での展示方法や3Dデータの活用方法から、作品を3Dデータ化して公開する試みは、新しい展示の方法として確立できる可能性があると考える。
技術面において具体的な3Dデータの掲載方法が確立されていないことが、3Dデータ展示の普及の足がかりになっていると考える。

先行事例

オンライン美術館HASARD
実際の美術館に所蔵されている名画をオンラインで高精度に再現している。スクロールして作品と注釈を次々と見られる。
オンライン美術館HASARDのリンク

3dtotal.jp
CG、デジタルアートなどを最新情報、ギャラリー、チュートリアルを提供しているサイト。インターネット最大級のオンラインデジタルアートコミュニティである、3dtotal.comの日本語版。
3dtotal.jpのリンク

Google マップ
最大級のマップサイト。地図が見られるだけでなく、様々な場所にリンクが付与されており、クリックするとその場所の写真やストリートビューが見られる。
このUIを参考にして地図上に設置されているピンをクリックすると、その場所にあるオブジェクトを見る事ができる仕組みを目指している。
Google マップのリンク

技法・技術情報

Web上で3Dデータを読み込むライブラリ。
3Dモデルを、360°回せるビューワーとしてWebサイトに埋め込む方法 【A-Frame と model-viewer】


LiDARスキャナーを用いたデータ生成
【iPad / iPhone Proシリーズ】LiDARアプリ「Polycam」で3Dスキャンをする


フォトグラメトリを用いたデータ生成
【フォトグラメトリ】Meshroomを使って3Dモデルを作る

プロジェクト管理

スケジュール

卒業研究Ⅰ
卒業研究Ⅱ

ToDo

• 3Dモデル(obj, gltf)の準備
• HTML上に簡易実装し、動作を確認する(A-Frame, <model-viewer>,Leaflet)

2022.09.16

• 夏季休暇中の進捗
  • 3Dデータ取得に関するGoogle Spread Sheetをまとめる
  • 引き続き、道端のオブジェクトをスキャン、3Dデータ化を行う
• コンセプトのブラッシュアップ
  • 芸術的の観点についての補足
    • 「超芸術トマソン」における、「路上観察における無用な長物」を美術品として保存するという概念。
      
      
      
      

2022.07.15

• ”変わったもの”や”芸術的な価値のあるもの”の定義について
  • ”変わったもの”とは
    日常的に見られる公共設備（標識や公衆電話、信号や遮断機など）が見られる中、風景としてあまり見られない異質な存在（ダイヤル式公衆電話や撤去されていない標識など）を”変わったもの”として定義する。
  • ”芸術的な価値のあるものとは”
    公共施設などを中心に設置されているオブジェクトや神社や寺に設置されている鳥居や境内に設置されているオブジェクトなど、歴史的価値観のあるものを”芸術的な価値のあるもの”として定義する。
    
    
    
    

2022.07.08

• プレゼンテーション報告後の課題点
  • Webサイトのサイトマップやワイヤーフレームについての仕様を概要欄に明記する。
  • 調査対象地域をリスト化し、掲載する作品数と調査する地域を確立させる。
  • 道端にある”変わったもの”や”芸術的な価値のあるもの”の定義を明確にする。
    
    
    
    

2022.07.01

• 掲載する3Dデータの調査
  • 調査範囲の拡大
    • 福岡市を調査対象として設定していたが、調査の中心地が福岡市東区唐原である為、隣接する市町村も調査対象として設定する（糟屋郡新宮町や古賀市など）。
    • 福岡市内である場合でも調査の中心地域から遠く離れている場合（福岡市早良区など）は調査対象外とする。
      ※作品掲載数により、随時調査地域を変更する可能性がある。
      
      
      
      

2022.06.24

• 3Dデータの軽量化
  • Draco圧縮にて、オリジナルの容量の半分から1/3まで圧縮することに成功した。
    例：埋もれたバスケットボール（約30MB→10MB）
  • Draco圧縮を行なった3Dデータの表示
    Draco圧縮された3DデータをA-Frameライブラリで表示する事例が確認されたが、自らの環境下で表示することに成功できていない為、早急にシステムの改修を行う予定だ。
    DracoとA-Frameを組み合わせて使ってみた
    
    
    
    

2022.06.19

• 既存の3Dデータの軽量化
  • A-FrameとDraco圧縮の両立
    Draco圧縮を行なった3DデータはDracoライブラリで再現される為、A-Frameライブラリのシステムと干渉する可能性がある。干渉する場合は、Blenderにてメッシュ数を減らすなど、加工によるデータ削減を行なうかThree.jsを使った3D表示をテストする。
    
    
    
    

2022.06.16

• 福岡県内のオブジェクトの調査
  • 香椎、千早などの再開発地区には、まちづくりの一環でモニュメントが設置されたり、再開発前の遺構を一部残している事が多々見受けられた。
    
    
  • 福岡アイランドシティ・照葉周辺の開発地域では、開発途中の地区、住宅地区、商業地区が兼ね備えてあり、オブジェクトとして展示できそうなモニュメントも見受けられた。
    
    
  • 博多・天神地区は天神地区の再開発により、失われているモニュメントが多い印象を受けた。博多周辺や再開発前地区でのオブジェクト探しがメインとなる。
    
    
    参考サイト
    福岡のパブリックアートめぐり
    
    
    
    

2022.06.10

• コンセプトサイトの改修
  • コンセプトサイト内の構成を修正
    修正前

    -index.html(.htmlにhtml、css、Javascript、GeoJsonを記述)
    -viewer/1.glb、2.glb~

    修正後

    -index.html
    -map.css
    -map-pins.js(.jsにJavascript、GeoJsonを記述)
    -viewer/1.glb、2.glb~

    以上の改善により、コード入力と内容整理の簡略化が実現した。
• 3Dデータ圧縮の為、Dracoの動作をテスト中
  Dracoとは？
  グーグル、オープンソースの3Dデータ圧縮ツール「Draco」を公開
  参考ページ
  劇的に3Dデータ容量を削減するDRACO圧縮のデータを自前描画する方法
  【WebGL / three.js】DRACO＆Basis圧縮でWebに最適なレベルまで3Dモデルを圧縮する
  課題
  3Dデータの圧縮の為、現在使用しているA-FrameライブラリからThree.jsライブラリに変更を余儀なくされる場合がある
  
  
  
  

2022.06.03

中間報告後の課題点

• 作品を3Dで公開する為のメリットをはっきりさせ、利用者に優位性を周知させる事
• 研究内容の記載で草花や木などを紹介するという記述のみだと、オブジェを紹介する際に違和感が生じてしまう可能性がある。
• 既存のサービスであるGoogle マップやYahoo! 地図などの類似サービスとの差別化を図る
  
  
  
  

2022.06.02

サンプルサイトの公開

• LeafletとA-Frameのライブラリを両立させることで、マップから3Dデータのページに移動する事が実現できた。

課題点

• 3Dデータの圧迫により、多くの作品を展示することが難しい。
• マップ上で3Dデータが見られるモーダルウィンドウを実装できることが最も望ましいと感じた。
  Leafletデモ
  Leaflet でモーダルウィンドウを呼び出す時の注意
  
  
  
  

2022.05.31

LiDARスキャナーを用いたデータ生成のテスト

• 香椎浜北公園に設置されているオブジェクトをLiDARスキャナーでスキャンし、PolycamでglTF形式にして生成した。やや高精度にスキャンする事が出来ている為、LiDARスキャンを用いた3Dスキャンがメインとなるだろう。
  glTF（GLB）とは
  
  
  
  

2022.05.27

Leafletライブラリを用いたWebページのテスト

• 地図データのAPIはOpenStreetMapを用いる。ライセンスを明記すれば商用・個人共に無料で利用できる。
• 地図上にオブジェクトのピンを立て、マウスオーバーでポップアップが開く仕組みを構築した。このポップアップにデータの注釈などを加えていく予定だ。
  Leaflet + OpenStreetMap で地図情報を扱うサンプルコード
  地図ライブラリの本命「Leaflet」を5分で理解&導入する
  
  
  
  

2022.05.20

ビジュアルテーマの設定

• WebサイトのUIをイメージしたテーマ、サイトのUI変更などによりテーマが変更することがある。
  
  
  
  

2022.05.13

Webサイトの仕様

• Webサイトは"Google Map"や"Yahoo!地図"などのマップベースのUIを採用する。
  
  

使用するMap API

• Webサイトに使用するMap APIには"OpenStreetMap"を使用する。このAPIは個人利用、商用利用共に無償で利用できる為、今回の研究に適していると考えている。
  
  
  
  

2022.04.22

テーマ

• 福岡市内を中心に、日常に隠れている芸術的な作品を探し出し、3Dデータで紹介する。
  昨今、インドアな生活が中心になった中で、日常的に存在しているがあまり注目されない物から芸術的価値を見出して作品として紹介し、外の世界に興味を持ってもらうことをコンセプトとしている。
  
  

調査

• 周辺地域から芸術的な作品を探し出す。
• 3Dデータに変換する。
  3Dデータに変換する方法としては、iPad Proに搭載されているLiDERスキャナで作品をスキャンし、Blender等で形を整えて掲載する。
  
  

試作

• 3Dデータを生成することに成功した為、次はHTML等に実証する方法を考える。
  
  
  
  

2022.04.08

研究テーマの考案

• Processing技術を用いて、参加型芸術作品を考案
  • Node.jsなどを用いて、相互に変化する作品など
    
    
• AR、VRで体験する九産大
  • 3Dオブジェクト化した九産大で疑似的な学内案内など
    
    
• Socket.IOを用いた、新たなサービスの考案
  • ランダムに打ち込んだ質問に対し、誰かが返信する完全匿名チャット※5chのように、スレッドを立てたり不特定多数が返信するわけでなく、１つの質問に一人が回答するなど
    
    
    
    

専攻事例の調査

• Socket.ioを使って簡易的なチャットアプリを作る
  
  
• Web上で動作する学校案内アプリの制作