Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
GLSLを魔改造してみた
分業可能なエフェクトファイルフォーマットを作る話
1
自己紹介
•石井 翔 (イシイ カケル) @kyasbal_1994
• 21歳(プログラミング歴13年)
• 4月から理科大3年生
(今年はカリフォルニアに留学して
いたため休学中)
• OSS大好き、Web3Dのライブラリ
「jThree」...
自己紹介
• 石井 翔 (イシイ カケル)
• 21歳(プログラミング歴13年)
• 4月から理科大3年生
(今年はカリフォルニアに留学していたため休学中)
3
今日はWeb3Dにおけるシェーダーの話
4
Web3Dって何がすごいんだっけ?
5
Web3Dのメリット・デメリット
• ユーザーには…
• アクセスの簡単さ(アプリのインストールが必要ない)
• 重いものは現実的に難しい
• エンジニアには…
• 開発環境構築の簡単さ(SDK とかいらない)
• OpenGLと変わらないから...
Web3Dの用途
• ゲームとの親和性は非常に低い
• サービスと結合したUI
(賃貸の内覧、RICHO THETA のギャラリー等)
• アプリのダウンロードの必要がない一過性のもの
(雑誌のおまけ、博物館の案内)
7
最近のWebの文化
• とにかく開発速度。作る→リリース→改善の高速回転。
• 生でWebGLいじってたら間に合わない。
• ツールは最小限に。テキストエディタだけあればできる。
• Unityだとバージョン管理ができない。開発フローのミスマッ...
そもそも、WebGLの立ち位置って?
9
WebGLの立ち位置って?
Web主体で見ると? 3D主体で見ると?
Web開発
HTML5
(OpenWeb
Platform)
ココ
3D開発
OpenGL
DirectX
Vulkan
10
お互いにとって小さすぎる領域
11
お互いの理想のWeb3Dを考えてみる
12
それぞれの理想のWeb3D
Web屋
• 一つの表現手法としてWeb3D
• サービス重視
• 数式なんて見たくない
• イベント駆動なプログラム
CG屋
• 手軽な実験環境としてWeb3D
• サービスなんてどうでもいい
• 最適化狂、数学徒...
理想のWeb3Dのための
エフェクトファイルフォーマットを考える
14
理想のWeb3Dの実現のために
必要なエフェクトに求められること
Web屋のため
• Webの文化に沿ってエフェク
トを使う
• 部品としてシェーダーを利用
したい
CG屋のため
• 注力したいとこだけをいじる。
(無駄なJavascriptは...
エフェクトファイルフォーマットをいい感じに決めて、
分業しやすくコンポーネント化してみた
今日の本題
16
このためにjThreeがやった事を紹介します
17
少しだけjThreeの事を話させてください
18
jThreeって?
現在フルスクラッチで新バージョンを作成中のWebGLライブラリ。
• 遅延シェーディングを採用
• Webサービスと融合したWeb3D開発をするためのライブラリ
• ステートレスな部分とステートフルな部分を分割
• jQue...
jThreeのファイル構成
3D用のシーン構成等シーンの操作、jQueryっぽい
20
ここにコンポーネント化された
シェーダーを入れたい
21
コンポーネント化されてる例
22
UnityのShaderLab
• UnityにはShaderLabという、
それなりに素晴らしいものがある。
Unityのためにしなければいけない
記法がたくさん。
ShaderLab自体を拡張しにくい
23
Miku Miku Danceの
Miku Miku Effect
• MMDのカスタムエフェクト用ソフト
であるMMEにはシェーダーだけでほとんど
記述できる機能がある。
24
というわけで作った
25
新しいjThreeのファイルを加える
Webエンジニア 3Dエンジニア
26
XMMLで何を成し遂げたいか
• シェーダープログラマーがいじりたいとこだけ気にできる。
• GLSL本体を書ける
• 受け渡し可能なUniform変数、Attribute変数
• レンダラー設定(Culling やDepthTestなど)
•...
XMMLを見てみる
28
XMML → 頂点シェーダー
@fragonlyを消す。
29
XMML → フラグメントシェーダー
@vertonlyを消す。
Attribute変数を消す
30
変数のバインディングも面倒くさい
31
変数を受け渡すために必要な函数たち
• uniform1f
• uniform2f
• uniform3f
• uniform4f
• uniform1i
• uniform2i
• uniform3i
• uniform4i
• unifor...
バインドを便利にする
• 変数型ならシェーダーに書いてある
• バインドに必要な引数もシェーダーの中で指定したい
diffuse→ uniform4f
indicies→uniform1fv(長さ10)
変数の一つ上の@から始まる
JSONを読...
トゥーンシェーダーを書こう
34
トゥーンシェーダーとは
アニメ調の表現を実現するためのシェーダー
35
トゥーンシェーダーの2要素
• エッジの描画 • 離散的な陰
36
今日はエッジをメインに語ります
37
こんなエッジが欲しい
38
法線成分を微分してやればいい
39
jThreeの法線データ
40
Sobel 微分
•
𝛿𝕗 𝑥,𝑦
𝛿𝑥
=
𝕗 𝑥 + 1, 𝑦 − 1 − 𝕗 𝑥 − 1, 𝑦 − 1 +
2𝕗 𝑥 + 1, 𝑦 − 2𝕗 𝑥 − 1, 𝑦 +
𝕗 𝑥 + 1, 𝑦 + 1 − 𝕗 𝑥 − 1, 𝑦 + 1
•
𝛿𝕗 ...
サービスを考える人が
こんなのいちいち考えてられない!
42
今日は作ってきてみました
43
こんな感じでWebエンジニア
が利用します
44
もっと簡易なエッジを
ライブコーディングします
45
外側だけ考えてみる
46
カリングのおさらい
筒を上から見たイメージ
視点
47
エッジの書き方
筒を上から見たイメージ
視点
この段差がエッジになる
48
おさらい
• 𝐿pixel のエッジを書きたい!
• クリップ空間の座標でポリゴンの座標𝕡0,法線方向に1伸ばした
座標𝕡1を求める。
• 𝑐 = |
𝕡0.𝑥𝑦−𝕡1.𝑥𝑦
2
∗ 𝑆𝑐𝑟𝑒𝑒𝑛𝑆𝑖𝑧𝑒 |をして、スクリーン上での差分
を出す...
最後にまたjThreeの話
• OSSとして開発中(http://github.com/jThreeJS/jThree )
• 仕様策定等slackで行ってます
(レポジトリのslackボタンから誰でも入れます)
• 3月下旬にβ公開予定
• ...
Upcoming SlideShare
Loading in …5
×

チョコ溶かす奴

2,342 views

Published on

GLSL勉強会の資料

Published in: Engineering
  • Be the first to comment

チョコ溶かす奴

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

×