WebGLのツールを作った話

Transcript

1. WebGLのツールを作った話 株式会社Panorama 奥井
2. 自己紹介 奥井祐介 • 株式会社Panoramaでエンジニアをしています ◦ Web制作会社です ▪ ブランドサイト ▪ コーポレートサイト ▪ キャンペーンサイト
3. 自己紹介 奥井祐介 • 株式会社Panoramaでエンジニアをしています ◦ Web制作会社です ▪ ブランドサイト ▪ コーポレートサイト ▪ キャンペーンサイト ◦ エンジニア募集してます
4. 自己紹介 奥井祐介 • 株式会社Panoramaでエンジニアをしています ◦ Web制作会社です ▪ ブランドサイト ▪ コーポレートサイト ▪ キャンペーンサイト ◦ エンジニア募集してます • 趣味でバドミントンしてます🏸 • ビールが好きです🍻
5. Three.jsのオーサリングツールを作りました（未完成） • https://nocturnal.work/about/ • GUIでThree.jsのコンテンツを作って、 エクスポートしてサイトに埋め込めます
6. なぜ作ったか
7. なぜ作ったか • WebGLをさっと試せるツールが欲しかった
8. なぜ作ったか • WebGLをさっと試せるツールが欲しかった • あわよくばそのままエクスポートしてサイトに埋め込みたかった
9. なぜ作ったか • WebGLをさっと試せるツールが欲しかった • あわよくばそのままエクスポートしてサイトに埋め込みたかった • WebGLやThree.jsのおまじないみたいコードを毎回書きたくなかった
10. 何ができるか • オブジェクト、マテリアル、テクスチャ、ライトの追加 • 時間やスクロール量、カーソルの位置によるアニメーション • 数学的な関数によるアニメーション ◦ 例 position.x = cos(time) • vertexシェーダー、fragmentシェーダーの記述 • 3Dモデルの読み込み • プレビュー • エクスポートしてサイトに埋め込み • オブジェクトを大量に複製する処理 • パーティクル、など
11. 軽くデモしてみます https://nocturnal.work/about/ • オブジェクト、マテリアル、テクスチャ • 関数 • シェーダーの説明 • クローン • パーティクル • プレビュー • エクスポート • 埋め込み
12. サンプル（時間あれば） • clone https://nocturnal.work/?project=rxKua4iZEYV1GZ6Njo7b • clone https://nocturnal.work/?project=viyosVHCH3cVMGHkiQTO • 3d model https://nocturnal.work/?project=x19CZPR1mXbEwPVEev6p • 3d model https://nocturnal.work/?project=1bkC5LQim0S3iSBOopwN • 3d model https://nocturnal.work/?project=WI3HgbbZMXztV0FT0Aht • haunted house https://nocturnal.work/?project=juW1aZJQtIDkFW4rEjsu • kaleidoscope https://nocturnal.work/?project=z92BCpTeG6iKa9hmeFLB • particle https://nocturnal.work/?project=tomSLkyGxECc5UEhAPkC • particle https://nocturnal.work/?project=vkrKvj0YBU6IxuMXrp55 • particle https://nocturnal.work/?project=qhSgrOhULdySeK1KpKAq • shader https://nocturnal.work/?project=rQCttDwSPtaTaeSIWRSO • shader https://nocturnal.work/?project=pha4yn00cyQlhxLpAVVS • blend mode https://nocturnal.work/?project=5yO3ttw4btxZuynFafrd • particle https://nocturnal.work/?project=uGjMSL34HDyI67sGSbgq • bird https://nocturnal.work/?project=idx1e2Pz68KnJ4N4Q7Jo
13. 今後について まだできないことが色々あるのでのんびり進めます • OrthographicCamera • 削除機能（マテリアル、テクスチャ、プロジェクトなど） • カスタムパラメータ（事前計算、埋め込み後） • クリック処理 • ポストプロセス • 動画の処理 • など
14. ありがとうございましたm_ _m