Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie チョコ溶かす奴
Ähnlich wie チョコ溶かす奴 (16)
Mehr von 翔 石井
Mehr von 翔 石井 (10)
チョコ溶かす奴
- 2. 自己紹介 •石井 翔 (イシイ カケル) @kyasbal_1994 • 21歳(プログラミング歴13年) • 4月から理科大3年生 (今年はカリフォルニアに留学して いたため休学中) • OSS大好き、Web3Dのライブラリ 「jThree」作成中 2
- 3. 自己紹介 • 石井 翔 (イシイ カケル) • 21歳(プログラミング歴13年) • 4月から理科大3年生 (今年はカリフォルニアに留学していたため休学中) 3
- 6. Web3Dのメリット・デメリット • ユーザーには… • アクセスの簡単さ(アプリのインストールが必要ない) • 重いものは現実的に難しい • エンジニアには… • 開発環境構築の簡単さ(SDK とかいらない) • OpenGLと変わらないから普通に難しい (Unityを使うという選択肢も…?) 6
- 7. Web3Dの用途 • ゲームとの親和性は非常に低い • サービスと結合したUI (賃貸の内覧、RICHO THETA のギャラリー等) • アプリのダウンロードの必要がない一過性のもの (雑誌のおまけ、博物館の案内) 7
- 8. 最近のWebの文化 • とにかく開発速度。作る→リリース→改善の高速回転。 • 生でWebGLいじってたら間に合わない。 • ツールは最小限に。テキストエディタだけあればできる。 • Unityだとバージョン管理ができない。開発フローのミスマッチ • 使えるWebエンジニア=フルスタックエンジニアという風潮。 • 彼らが学ぶべき技術 • HTML/CSS/Javascript • サーバーサイド言語 • サーバーサイドフレームワーク • データベース • Javascriptフレームワーク • CSSフレームワーク • セキュリティ • gulpなどの開発環境整備 • AltJS • インフラ環境の整備 + GLSL , 3DCG数学 , WebGL? 8
- 10. WebGLの立ち位置って? Web主体で見ると? 3D主体で見ると? Web開発 HTML5 (OpenWeb Platform) ココ 3D開発 OpenGL DirectX Vulkan 10
- 13. それぞれの理想のWeb3D Web屋 • 一つの表現手法としてWeb3D • サービス重視 • 数式なんて見たくない • イベント駆動なプログラム CG屋 • 手軽な実験環境としてWeb3D • サービスなんてどうでもいい • 最適化狂、数学徒 • GL操作部分: ループ駆動なプログラム GLSL部分: 全体としてステートレス (内部はステートを持つが..) 13
- 15. 理想のWeb3Dの実現のために 必要なエフェクトに求められること Web屋のため • Webの文化に沿ってエフェク トを使う • 部品としてシェーダーを利用 したい CG屋のため • 注力したいとこだけをいじる。 (無駄なJavascriptはいじらず、 シェーダーだけいじりたい。) • 簡単に書いて簡単にデバッグ したい。 15
- 19. jThreeって? 現在フルスクラッチで新バージョンを作成中のWebGLライブラリ。 • 遅延シェーディングを採用 • Webサービスと融合したWeb3D開発をするためのライブラリ • ステートレスな部分とステートフルな部分を分割 • jQueryライクな記法によりWebエンジニアに使いやすく • TypeScriptで型管理されたライブラリ 19
- 22. コンポーネント化されてる例 22
- 24. Miku Miku Danceの Miku Miku Effect • MMDのカスタムエフェクト用ソフト であるMMEにはシェーダーだけでほとんど 記述できる機能がある。 24
- 25. というわけで作った 25
- 27. XMMLで何を成し遂げたいか • シェーダープログラマーがいじりたいとこだけ気にできる。 • GLSL本体を書ける • 受け渡し可能なUniform変数、Attribute変数 • レンダラー設定(Culling やDepthTestなど) • Javascriptは極力触れない • ウェブプログラマーが部品として利用出来る • 極力中身を意識しない • パラメーターを変えることができる • シェーダー自体が他のエフェクトなどに影響性を持たない 27
- 28. XMMLを見てみる 28
- 32. 変数を受け渡すために必要な函数たち • uniform1f • uniform2f • uniform3f • uniform4f • uniform1i • uniform2i • uniform3i • uniform4i • uniform1fv • uniform2fv • uniform3fv • uniform4fv • uniform1iv • uniform2iv • uniform3iv • uniform4iv • uniformMatrix2fv • uniformMatrix3fv • uniformMatrix4fv • bindTexture • bindBuffer • vertexAttribPointer 32
- 33. バインドを便利にする • 変数型ならシェーダーに書いてある • バインドに必要な引数もシェーダーの中で指定したい diffuse→ uniform4f indicies→uniform1fv(長さ10) 変数の一つ上の@から始まる JSONを読み込んで属性値 として利用する。 33
- 34. トゥーンシェーダーを書こう 34
- 36. トゥーンシェーダーの2要素 • エッジの描画 • 離散的な陰 36
- 38. こんなエッジが欲しい 38
- 40. jThreeの法線データ 40
- 41. Sobel 微分 • 𝛿𝕗 𝑥,𝑦 𝛿𝑥 = 𝕗 𝑥 + 1, 𝑦 − 1 − 𝕗 𝑥 − 1, 𝑦 − 1 + 2𝕗 𝑥 + 1, 𝑦 − 2𝕗 𝑥 − 1, 𝑦 + 𝕗 𝑥 + 1, 𝑦 + 1 − 𝕗 𝑥 − 1, 𝑦 + 1 • 𝛿𝕗 𝑥,𝑦 𝛿𝑦 = 𝕗 𝑥 − 1, 𝑦 + 1 − 𝕗 𝑥 − 1, 𝑦 − 1 + 2𝕗 𝑥, 𝑦 + 1 − 2𝕗 𝑥, 𝑦 − 1 + 𝕗 𝑥 + 1, 𝑦 + 1 − 𝕗(𝑥 + 1, 𝑓 − 1) 1 0 -1 2 0 -2 1 0 -1 1 2 1 0 0 0 -1 -2 -1 テクスチャのある点の微分係数を知りたい場合に使われる近似手法 41
- 43. 今日は作ってきてみました 43
- 46. 外側だけ考えてみる 46
- 49. おさらい • 𝐿pixel のエッジを書きたい! • クリップ空間の座標でポリゴンの座標𝕡0,法線方向に1伸ばした 座標𝕡1を求める。 • 𝑐 = | 𝕡0.𝑥𝑦−𝕡1.𝑥𝑦 2 ∗ 𝑆𝑐𝑟𝑒𝑒𝑛𝑆𝑖𝑧𝑒 |をして、スクリーン上での差分 を出す。 • これは1伸ばした時のスクリーン上で何pixelになるかだから、 1/𝑐をすれば、1pxのエッジを書くためののばす距離がわかる。 • あとは、 𝐿 𝑐 だけ法線を伸ばせばいい。 49
- 50. 最後にまたjThreeの話 • OSSとして開発中(http://github.com/jThreeJS/jThree ) • 仕様策定等slackで行ってます (レポジトリのslackボタンから誰でも入れます) • 3月下旬にβ公開予定 • 3月下旬にハンズオンしたい • 日本発のOSSとしてコミュニティを確立したい • Contributor募集、Pull request, issue歓迎 •Web3Dで世界を取りに行こうぜ 50