ことはじめ

比留間 和也

の

2月頭に突然の iOSチーム異動

Lobiっていうアプリ作ってます

マイQiita っていうアプリ出しました

作ったもの

Canvas 2DCSS3D

WebGL

iOS8でカヤックサイト見るとロゴが3Dに！(ﾟ∀ﾟ)！

今日のゴール

今回話すことのゴールは、WebGLには興味があるけど3Dということでハードルが高いと感じている人にWebGLやってみようかな、と思ってもらえればゴールだと思っています。

アジェンダ

• WebGLはなにができるようになるの？( ́⊇`)

• WebGLはなにをしているの？(Ծ﹏Ծ )

• WebGLの要、GLSL（シェーダ）(☼Д☼)

• WebGLの実際の実装の流れ=͟ ͟ ͞(͞　‘ω')

アジェンダ

• WebGLはなにができるようになるの？( ́⊇`)

• WebGLはなにをしているの？(Ծ﹏Ծ )

• WebGLの要、GLSL（シェーダ）(☼Д☼)

• WebGLの実際の実装の流れ=͟ ͟ ͞(͞　‘ω')

WebGL[1]（ウェブジーエル）は、ウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様。OpenGL 2.0もしくはOpenGL ES 2.0をサポートするプラットフォーム上で、特別なブラウザのプラグインなしで、ハードウェアでアクセラレートされた三次元グラフィックスを表示可能にする。 !

技術的には、JavaScriptとネイティブのOpenGL ES 2.0のバインディングである。WebGLは非営利団体のKhronos Groupで管理されている。WebGLはHTMLのcanvas要素を使う。

出典：Wikipedia

• ざっくり一言でいうと「ハードウェアでアクセラレートされた（GPUを使った）高速なレンダリング能力を手に入れられる」ということ。

• 三次元グラフィックスと書かれているが、実際のポイントは「ハードウェアでアクセラレートされる」という点。

• つまりこれは、二次元の表現であったとしてもその恩恵を受けられる、ということ。

3DでWebGL使ったデモ

2DでWebGL使ったデモ

アジェンダ

• WebGLはなにができるようになるの？( ́⊇`)

• WebGLはなにをしているの？(Ծ﹏Ծ )

• WebGLの要、GLSL（シェーダ）(☼Д☼)

• WebGLの実際の実装の流れ=͟ ͟ ͞(͞　‘ω')

WebGL（OpenGL）には パイプラインと呼ばれる 仕組みがあります。

パイプライン(・▽・)

ざっくり言うと

データ（入力）に対して（パイプを通すように）一連の処理を施し、最終的な結果（出力）にすること

パイプラインイメージ

入力 出力

処理

変換パイプライン

変換パイプライン

行列？(‾□‾)

こういうやつです

(ﾟ∀ﾟ)!!

モデル座標変換要は「世界のどこに置くか」の定義( ́⊇`)

ビュー座標変換要は「どこから撮影しているのか」の定義( ́⊇`)

プロジェクション 座標変換

要は「どんなレンズか」の定義( ́⊇`)

行列を使うと、これら複雑な座標変換処理を ひとつの行列にまとめて使いまわせる

( ・∀・)ｲｲ!!

グラフィクスパイプライン

グラフィクスパイプライン

アジェンダ

• WebGLはなにができるようになるの？( ́⊇`)

• WebGLはなにをしているの？(Ծ﹏Ծ )

• WebGLの要、GLSL（シェーダ）(☼Д☼)

• WebGLの実際の実装の流れ=͟ ͟ ͞(͞　‘ω')

WebGLで一番大事な

シェーダ

OS

シェーダのイメージ

？(๑°⌓°๑)？

シェーダブラウザ

GLSL (OpenGL Shading Language) はGLslangとしても知られ、C言語をベースとした高レベルシェーディング言語である。これはアセンブリ言語やハードウェアに依存した言語を使わないで、開発者がグラフィックスパイプラインを直接制御できるようにOpenGL ARBで策定された。

出典：Wikipedia

つまり、シェーダはGPUを操作する＝GPU上で動く

まずはシェーダを 見てみる

頂点シェーダ

// 頂点シェーダソース attribute vec3 position; attribute vec4 color; !uniform mat4 mvpMatrix; !varying vec4 vColor; !void main() { vColor = color; gl_Position = mvpMatrix * vec4(position, 1.0); }

フラグメントシェーダ

// フラグメントシェーダソース precision mediump float; !varying vec4 vColor; !void main() { gl_FragColor = vColor; }

これなら読めそう(ﾟ∀ﾟ)!!

覚えておくべき キーワードは

「attribute、uniform、varying」と 「gl_Position、gl_FragColor」

// 頂点シェーダソース attribute vec3 position; attribute vec4 color; !uniform mat4 mvpMatrix; !varying vec4 vColor; !void main() { vColor = color; gl_Position = mvpMatrix * vec4(position, 1.0); }

変数定義

処理

// フラグメントシェーダソース precision mediump float; !varying vec4 vColor; !void main() { gl_FragColor = vColor; }

変数定義処理

// 頂点シェーダソース attribute vec3 position; attribute vec4 color; !uniform mat4 mvpMatrix; !varying vec4 vColor; !void main() { vColor = color; gl_Position = mvpMatrix * vec4(position, 1.0); }

// フラグメントシェーダソース precision mediump float; !varying vec4 vColor; !void main() { gl_FragColor = vColor; }

attribute（属性）

uniform（一定、同質）

varying（様々な、異なる）

アジェンダ

• WebGLはなにができるようになるの？( ́⊇`)

• WebGLはなにをしているの？(Ծ﹏Ծ )

• WebGLの要、GLSL（シェーダ）(☼Д☼)

• WebGLの実際の実装の流れ=͟ ͟ ͞(͞　‘ω')

JavaScriptのコードを見てみる

https://github.com/edom18/WebGL-Meetup-sample

サンプルを上げておきました( *́▽`)

これだけ書いて、 実は三角形ひとつだけ…

まぢか( ;́Д`)

でも分解すると

…① WebGLのセットアップ

…② データの準備

…③ 座標変換パイプライン

…④ シェーダの準備と 　　 データのアップロード

…⑤ レンダリング

意外と やってることは少ない

(ﾟ∀ﾟ)!!

ざっくりと ひとつひとつ見ていきます

WebGLで表示する生のデータ

WebGLで表示するための バッファデータ

WebGLShaderオブジェクトの生成

WebGLProgramオブジェクトの生成

WebGLBufferオブジェクトの生成

行列用変数の 初期化

各種行列を生成

attribute変数の インデックスを取得

頂点位置・色データをWebGLに通知

頂点インデックスデータをWebGLに通知

座標変換行列データをUniformとしてWebGLに通知

レンダリングGo!!٩(ˊᗜˋ*)و

でもこれだけ・・・((((；ﾟДﾟ))))

実はほぼ、WebGLと通信するためのコード

準備が整ってしまえば、 データを追加するのは簡単

ε-(́∀｀*)ﾎｯ

DEMO

ライブラリを使う

あまりWebGLを生で書くことは少ない

ライブラリを使えば 手軽にWebGLで表現できる

ktkr(ﾟ∀ﾟ)!!

Three.js

WebGLではデファクトスタンダードになりつつある

ライブラリ冒頭のサイコロ給のデモもThree.jsを使っています(ㆆᴗㆆ)

同じような行数で どこまでできるかやってみた

DEMO

ライブラリいいね(ﾟ∀ﾟ)b

明日からWebGLで なにか作ろう！！

ご静聴ありがとうございました