LogoMark.png

古賀旭/卒業研究I の変更点


#author("2022-09-23T14:09:10+09:00;2022-07-22T14:52:11+09:00","default:member","member")
//*隠れた名作
*道端ミュージアム
//福岡市の中に隠れている芸術的作品を3Dで紹介する。
道端にあるものに芸術的価値を見出し、3Dにして価値を共有する。

[[&image(visual.png);>https://operationcheck-c3165.web.app/]]


-''古賀 旭''
-'''Keywords:Web, VR, AR, XR, 3D'''
-[[試作ページ>https://operationcheck-c3165.web.app/]]

~


**概要
***これは何?
//&color(red){これは何か・・を簡潔に};
//Webページ上にマップを表示し、福岡市内を中心に日常に溶け込んでいる物を3Dデータに変換して紹介する。
Webページ上にマップを表示し、道端にある草や標識、オブジェなど様々な物に芸術的価値を見出して共有する。
~

***背景と目的
//&color(red){プロジェクトの背景と目的};
//インドアな生活が続いた中で、外の世界にある日常に興味を持ってもらう為、外の世界にある物に芸術的価値を見出して紹介し、外の世界に興味を持ってもらうこと。
-背景
--コロナ禍でインドアな生活が続く中で、外出時に道端で見かけるような草花や標識、変わったオブジェに関心を持つことが少なくなっている。そんな中、SNS上で綺麗な草花や変わったオブジェの写真や動画に多くのレスポンスがある。以上の事から、人々は外にあるオブジェクトに興味はあるものの、外出するには至っていないと考えた。
//&color(red){背景 世の中の課題や状況に踏襲した説明で背景を書く(自分のことを含んでも良い)};
-目的
--外に新しい発見を持ってもらう為に道端にある物をGoogle マップのようなサイトで紹介する。
--3Dで紹介する事によって、オブジェクトを詳細に見ることができ、利用者にインパクトを与えることができる。インパクトを与える事によって、道端にあるオブジェクトに関心を持ってもらえるようになり、外出を促すことができると考えている。
//&color(red){目的 目指すゴールを書く。Webを見た人にどんな情報を与えてどのような経験を与えたいかを明白にする。};
//美しい写真や面白い動画をSNSに投稿して共有するように、日常に溶け込んだ変わった物、面白い物を3Dにして共有する新しい形のSNSを作り、立体的に人々に共有すること。
~

***コンセプト
//&color(red){基本的な考え方、枠組み、視点など};
//&color(red){目的を達成するためのプロセスを書く。具体的な例をいくつか挙げるなど。};
-道端にあるオブジェクトに関心を持ってもらうために、3Dデータで紹介する。
3Dデータで全体を詳しく見ることができる為、大きなインパクトを与えられる。
-データ化したオブジェクトは、実際に撤去されてもデータ上にアーカイブとして残せる為、後の時代にも伝える事ができる。
~

***成果物の仕様
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
//[[掲載場所のリスト>]]
-成果物の詳細
--マップ表示(Leafletライブラリを使用)
//詳細を記入
--3Dデータを表示(A-Frameライブラリを使用)
//詳細を記入
[[コンセプトサイト>https://operationcheck-c3165.web.app/]]
//[[掲載場所のリスト>]]
~

//***メンバー
//&color(red){共同プロジェクトの場合のみ|メンバーと役割分担を明記};
//~

***制作ツール
//&color(red){使用するツール|ハードウエア・ソフトウエア};
-ハードウェア
iPad Pro LiDAR Scaner
Canon EOS 9000D

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

***プロジェクトの期間
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
2022.04.08 - 2022.12.23
~

***まとめ
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
-今後の課題
--公開するWebサイトをどのようにして周知していくか
--3Dデータによって圧迫される通信量をどのようにして削減していくか
~
~


**調査

***現状調査
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
3Dを活用したWebサイトや作品展示に工夫を凝らしているWebサイト、3Dデータが実際にどのような使われ方をしているのかについて調べる。

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

''3Dデータの活用''
既存の作品を3Dデータ化して保存するという試みは広く行われている。一例として秩父神社の文化財である「つなぎの龍」を3Dスキャンして細かな形状を記録し、高精度な3Dプリンターでフルカラーで出力するなどの事例がある。
[[文化財を3Dスキャニング。フルカラー3Dプリンターで展示物として出力(秩父神社/原製作所)>https://news.sharelab.jp/column/hara-sss_211199/]]
~

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

***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
''オンライン美術館HASARD''
実際の美術館に所蔵されている名画をオンラインで高精度に再現している。スクロールして作品と注釈を次々と見られる。
[[オンライン美術館HASARDのリンク>https://wam-hasard.com/]]
~

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

''Google マップ''
最大級のマップサイト。地図が見られるだけでなく、様々な場所にリンクが付与されており、クリックするとその場所の写真やストリートビューが見られる。
このUIを参考にして地図上に設置されているピンをクリックすると、その場所にあるオブジェクトを見る事ができる仕組みを目指している。
[[Google マップのリンク>https://www.google.co.jp/maps/?hl=ja]]
~
***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
Web上で3Dデータを読み込むライブラリ。
[[3Dモデルを、360°回せるビューワーとしてWebサイトに埋め込む方法 【A-Frame と model-viewer】>https://www.noboyu.com/how-to-embed-3d-models-website/]]
~
LiDARスキャナーを用いたデータ生成
[[【iPad / iPhone Proシリーズ】LiDARアプリ「Polycam」で3Dスキャンをする>https://styly.cc/ja/tips/nimi-lidar-polycam-3dscan/#i-3]]
~
フォトグラメトリを用いたデータ生成
[[【フォトグラメトリ】Meshroomを使って3Dモデルを作る>https://styly.cc/ja/tips/photogrammetry-rinmizouchi-meshroom/]]
~

**プロジェクト管理

***スケジュール
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
[[卒業研究Ⅰ>https://remarkable-pearl-2b9.notion.site/3375eae2aaf94a7da50c8c13f7ba32d0?v=9ec947198b974b9899090d24ed002a4f]]
卒業研究Ⅱ
//[[スプレッドシート>https://docs.google.com/spreadsheets/d/1RF1VVue5c94Ba2GniQIFzYt73ooWWB67mL-M83KJJgM/edit?usp=sharing]]
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
-3Dモデル(obj, gltf)の準備
-HTML上に簡易実装し、動作を確認する(A-Frame, <model-viewer>,Leaflet)
-
-

//***NotToDo
//&color(red){やらないこと:何をするかではなく「何をしないか」を考える};
//&color(red){例:10人以上の会議には出ない。苦手なことは誰かに頼む・・};

~
~

#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~
**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を組み合わせて使ってみた>https://qiita.com/pocket7878/items/87ddd74f005e9dc97db3]]
~
~

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

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

**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」を公開>https://japan.zdnet.com/article/35095063/]]
参考ページ
[[劇的に3Dデータ容量を削減するDRACO圧縮のデータを自前描画する方法>https://qiita.com/kioku/items/bbb672d287792a987faa]]
[[【WebGL / three.js】DRACO&Basis圧縮でWebに最適なレベルまで3Dモデルを圧縮する>https://zenn.dev/tanabee8/articles/fc40a20deebcbd]]
課題
3Dデータの圧縮の為、現在使用しているA-FrameライブラリからThree.jsライブラリに変更を余儀なくされる場合がある
~
~

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

**2022.06.02
***サンプルサイトの公開
-LeafletとA-Frameのライブラリを両立させることで、マップから3Dデータのページに移動する事が実現できた。
***課題点
-3Dデータの圧迫により、多くの作品を展示することが難しい。
-マップ上で3Dデータが見られるモーダルウィンドウを実装できることが最も望ましいと感じた。
[[Leafletデモ>https://operationcheck-c3165.web.app/]]
[[Leaflet でモーダルウィンドウを呼び出す時の注意>https://qiita.com/tom_konda/items/a04e01f557273a3e910b]]
~
~

**2022.05.31
***LiDARスキャナーを用いたデータ生成のテスト
-香椎浜北公園に設置されているオブジェクトをLiDARスキャナーでスキャンし、PolycamでglTF形式にして生成した。やや高精度にスキャンする事が出来ている為、LiDARスキャンを用いた3Dスキャンがメインとなるだろう。
[[glTF(GLB)とは>https://palan3d.com/faqs/21]]
~
~

**2022.05.27
***Leafletライブラリを用いたWebページのテスト
-地図データのAPIはOpenStreetMapを用いる。ライセンスを明記すれば商用・個人共に無料で利用できる。
-地図上にオブジェクトのピンを立て、マウスオーバーでポップアップが開く仕組みを構築した。このポップアップにデータの注釈などを加えていく予定だ。
[[Leaflet + OpenStreetMap で地図情報を扱うサンプルコード>https://qiita.com/TakeshiNickOsanai/items/783caa9f31bcf762da16#%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%99%E3%82%8B%E3%81%A8%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B]]
[[地図ライブラリの本命「Leaflet」を5分で理解&導入する>https://qiita.com/mitch0807/items/7ed4eaf6253a9b879ae7]]
~
~

**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のように、スレッドを立てたり不特定多数が返信するわけでなく、1つの質問に一人が回答するなど
~
~
***専攻事例の調査
-[[Socket.ioを使って簡易的なチャットアプリを作る>https://weseek.co.jp/tech/1484/]]
~
-Web上で動作する学校案内アプリの制作
|#youtube(-B7dWsu3XWc)|
~
~

~