WebGLことはじめ

ことはじめ

比留間和也の

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

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

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

作ったもの

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

今日のゴール今回話すことのゴールは、WebGLには興味があるけど3Dということでハードルが高いと感じている人に 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（OpenGL）にはパイプラインと呼ばれる仕組みがあります。パイプライン(・▽・)

ざっくり言うと

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

パイプラインイメージ入力出力処理

変換パイプライン

行列？(￣□￣)

こういうやつです

(ﾟﾟ)!!

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

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

プロジェクション座標変換要は「どんなレンズか」の定義( ́ `)

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

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

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（様々な、異なる）

JavaScriptのコードを見てみる https://github.com/edom18/WebGL-Meetup-sample サンプルを上げておきました( *́▽`)

これだけ書いて、実は三角形ひとつだけ… まぢか( ;́Д`)

でも分解すると

…① WebGLのセットアップ …② データの準備 …③ 座標変換パイプライン …④ シェーダの準備とデータのアップロード …⑤ レンダリング

意外とやってることは少ない (ﾟﾟ)!!

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

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

WebGLShaderオブジェクトの生成

WebGLProgramオブジェクトの生成

WebGLBuﬀerオブジェクトの生成

行列用変数の初期化各種行列を生成

attribute変数のインデックスを取得頂点位置・色データをWebGLに通知頂点インデックスデータをWebGLに通知座標変換行列データをUniformとしてWebGLに通知

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

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

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

準備が整ってしまえば、データを追加するのは簡単 ε-(́ ｀*)ﾎｯ

ライブラリを使う

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

ライブラリを使えば手軽にWebGLで表現できる ktkr(ﾟﾟ)!!

Three.js

WebGLではデファクトスタンダードになりつつあるライブラリ冒頭のサイコロ給のデモもThree.jsを使っています(ㆆᴗㆆ)

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

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

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

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

WebGLことはじめ

by Kazuya Hiruma, フロントエンドエンジニア/JSer at カヤック

on Jun 13, 2014

Statistics

Views

Actions

1 Embed 0

Accessibility

Categories

Upload Details

Usage Rights

Report content

WebGLことはじめ Presentation Transcript