#author("2022-12-02T15:35:50+09:00","default:member","member") #author("2023-04-03T14:04:33+09:00","default:member","member") *道端ミュージアム 道端にあるものに芸術的価値を見出し、3Dにして価値を共有する。 [[&image(古賀旭/卒業研究II/visual2.jpg);>https://roadside-museum.web.app]] -''古賀 旭'' -'''Keywords：Web design , Virtual Reality , Augmented Reality , 3DCG''' -[[公開ページ>https://roadside-museum.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 -ソフトウェア --3Dモデル制作 Polycam Blender --Webページ制作 Adobe Dreamweaver Atom Openstreetmap API Leaflet A-Frame ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; 2022.04.08 - 2022.12.23 ~ **制作 ***1.コンセプトロゴ ロゴの制作に際して、制作物が提示するコンセプトを一挙に表現出来ることを目指している。 #image(visual2.jpg,center,100%); ***ロゴ制作において 一つ目に、「道端ミュージアム」というタイトルをそのままロゴタイプとして採用し、本研究の要素の一つである3Dを意識した立体感のあるデザインを施した。 二つ目に、オープニングアニメーションには「大きくまばらに広がっている情報が一挙に集まって形を成す」という考えを意識して制作した。 ~ ***2.ユーザーに与える体験 「道端ミュージアム」のサイトに初めて訪れた閲覧者に、このサイトの目的と操作方法を明確に提示する為、初回閲覧時にはチュートリアルが表示されるようになっており、閲覧時の混乱を避けられるUI を制作した。 #image(tutorial.jpg,center,100%); ~ 3D ビューワーでは、PC とスマートフォンの共通の仕様として、前のリンクに戻るボタンの実装、マウスやスワイプ操作での視点変更が可能となっている。 #image(viewer.jpg,center,100%); また、スマートフォンのみの仕様として、搭載されている加速度センサーに反応して、スマートフォンの動きにあわせて視点が変化する機能とVR モードの導入により、VR ゴーグルなどを用いて臨場感のある体験を得られる事ができる。 ~ ***3.ロード時間の短縮 本制作では3D データを圧縮する「Draco」をシステムに導入することによって、１作品あたりの容量を約30% 削減する事に成功した。これにより、作品を推移する際のロード時間の短縮や、通信量の削減によるコストの削減を実現する事ができた。 ~ ***4.まとめ 道端にあるオブジェクトを3D モデル化してWeb 上で公開されている事例が少なかった為、ビューワーを開発する期間が長引いてしまったが、圧縮された3D モデルの閲覧に対応できた事は、ユーザーにページ推移のストレスを感じさせない良いシステムを構築できたと感じている。 また、オブジェクトを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)の順次掲載 -%%オープニングアニメーションの搭載%% -Leaflet上に各自メニューの搭載 -ビューワー上にオブジェクトについての説明を掲載 -%%ビューワー上に戻るボタンを設置%% -%%HTML上に簡易実装し、動作を確認する(A-Frame, <model-viewer>,Leaflet)%% - - //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2023.12.02 **2022.12.02 -公開URLのドメイン名を変更 --作品の公開に際して、テストURLからドメイン名を変更した。公開ページは以下の通りだ。 --[[テストページ>https://operationcheck-c3165.web.app/]] --[[道端ミュージアム公開ページ>https://roadside-museum.web.app]] ~ ~ **2023.11.18 **2022.11.18 -ビューワーにマップへ戻るボタンを追加 --z-indexを上位に指定することで、ビューワーの前にボタンを配置した。 ~ ~ **2023.11.11 **2022.11.11 -オープニングアニメーションを改善 --weight600px以下で表示する際にオープニングアニメーションが再生されるように仕様変更。 ~ ~ **2023.10.21 **2022.10.21 -Firebaseを用いたWebサイト公開 --展示作品の追加及び、初回に限りモーダルウィンドウ表示でチュートリアルを表示するオプションを追加。（cookieの削除で再表示可能） ---任意でチュートリアルを表示するオプションを実装予定。 --オープニングアニメーション搭載に際して、ヴィジュアルテーマを変更。 ~ ~ **2023.10.14 **2022.10.14 -チュートリアルの仕様変更 --初回閲覧閲覧時に強制表示し、Cookieに情報を保存する他、メニューから再度チュートリアルを表示させるプラグインを導入した。 -オープニングアニメーションを実装 --ホーム画面を開く際、ローディング画面とオープニング画面を表示する機能を実装する。 ~ ~ **2023.10.07 **2022.10.07 -チュートリアルの実装 --初回閲覧時に限り、操作方法やUIについての説明を行うチュートリアル画面を実装する。 --cookieに閲覧情報が保存される為、再度チュートリアル画面を表示する為の機能を実装する予定 -オープニングアニメーションを実装 --ホーム画面を開く際、ローディング画面とオープニング画面を表示する機能を実装する。 ~ ~ **2023.09.30 **2022.09.30 -3Dモデル掲載サイトについての仕様 --Leafletを用いた地図データを参照する形式で3Dモデルを掲載するシステムについて、大まかなバグの修正が完了した為、システム面でのビルドは終了し現在完成している状態をベースにUIの改変を行なっていく。 -後期の研究の方向性について(追記) --3Dデータの新規掲載を続けていくと同時に、UI、UXの開発として、HPを開いた際のスタートアップアニメーションやチュートリアルなどを順次実装していく。 ~ ~ **2023.09.23 **2022.09.23 -芸術的価値観についての追記 --トマソンの路上観察における無用な長物に基き、データ収集の対象として、スキャン可能な大きさの建造物も対象とする。 -後期の研究の方向性について --前期、夏季休暇中に収集した3Dデータを集約し、掲載するWebサイトのUI、UXを改善する事を目指す。 ~ ~ **2022.09.16 -夏季休暇中の進捗 --3Dデータ取得に関するGoogle Spread Sheetをまとめる --引き続き、道端のオブジェクトをスキャン、3Dデータ化を行う -コンセプトのブラッシュアップ --芸術的の観点についての補足 ---「超芸術トマソン」における、「路上観察における無用な長物」を美術品として保存するという概念。 ~ ~ ~