More than 5 years have passed since last update.

第1回目　WebGLの概念

WebGL

Last updated at 2014-11-20Posted at 2014-11-19

##講師紹介
講師：杉本　雅広さん
wgld.org という WebGL 開発支援サイトの管理人
WebGL の普及と発展のために日夜活動中

##授業の流れ
1.WebGLとは何か？、利用状況、将来性
2.WebGLのメリット・デメリット
3.開発環境構築など

##1. WebGLとは何か？
・GPU(Graphics Processing Unit)へ直接アクセスすることができるブラウザに組み込まれたAPI

・ブラウザ側の実装（ブラウザに組み込まれている）によるものなので、ブラウザによって性能や機能に差が生じる

####WebGLはOpenGLというネイティブで動作するグラフィックスAPIをブラウザから呼び出すためのパイプ役のような存在

・javascriptからOpenGLへ直接アクセスすることはできないがWebGLが間に入ることでOpenGLを間接的に呼び出すことができる
・OpenGLはグラフィックスドライバと通信できるため、グラフィックスに関する処理を高速に行うことができる
####簡潔に表現するなら、WebGLはOpenGLを介して直接GPUを利用できるため非常に高速

##2. ブラウザ以外の制約
・各ブラウザベンダーによって実装状況が異なるので、ブラウザによっては動作しなかったり、動作しても結果が異なったりする
・OSレベルでWebGLが無効化されていたりする（※iOSは8からWebGLに対応）

####OSやブラウザが対応していても、GPUなどのハードウェアの制約により動作しないケースなどがあり、基本的にすべての環境を漏れなくカバーすることは難しいというのが現状

##3. 各種ブラウザベンダの対応状況
最新の対応状況を確認
モバイル端末でのパフォーマンス

##4. WebGLで作られたコンテンツ
3dbricks

Urban Galaxy Online

G-Star RAW | New Denim Arrivals

FishGL

thisway.js by stravaganza

WebGL Fluid Experiment

##5. WebGLの特徴（メリット）
・ブラウザで即実行できるため非常に手軽
・ユーザーにダウンロードやインストールなどの手間を掛けさせない
・非常に高速によりリッチなコンテンツを配信できる
・他の次世代Web技術と組み合わせて利用することができる

##6. WebGLの特徴（デメリット）
・意図した通りの動作をするかが環境依存
・通信するデータ量が肥大化しやすくユーザーの負担や待ち時間が増える
・学習コストが非常に高いため扱える人が少ない

##7. WebGLの動作確認
・javascriptからWebGLの命令を呼び出すには、WebGLコンテキストオブジェクトを介した処理を記述
・webGLコンテキストはHTML5で利用できるようになった<canvas>から生成することができる
・WebGLコンテキストが生成できない場合は、そもそもWebGLを使うことができない環境

1.HTMLを用意

index.html

<html>
    <body>
        <canvas id="canvas"></canvas>
    </body>
</html>

2.javascriptを用意

script.js

//canvasへの参上を変数に取得する
 var c = document.getElementById('canvas');

//WebGLコンテキストをcanvasから取得する
var gl = c.getContext('webgl') || c.getContext('experimental-webgl');

//WebGLコンテキストの取得ができたかどうか
if(gl){
	console.log('supports webgl');
}else{
	console.log('webgl not supported');
}

##8. WebGLプログラミングの流れ

####例）javascriptでHTML内に文字を記述する場合

script.js

var s = 'hello world!';
document.write(s);

変数の初期化（生成）⇒ 利用という流れになっている

####これをWebGLの場合に例える
WebGLでは生成から利用までの間に登録する作業などが追加される

####例）WebGLの場合

script.js

var s = gl.createXXXXX(); // 専用のメソッドでオブジェクトを生成
gl.bindXXXXX(s); // 専用のメソッドでオブジェクトを登録
gl.applyXXXXX('hello world'); // 登録してあるオブジェクトにデータを適用

####生成　⇒　登録　⇒　利用　のスリーステップ方式

WebGL(OpenGL)がGPUと直接やり取りが可能なためWebGLでは様々なオブジェクトが登録作業を経て利用可能になる

##9. グラフィクスパイプライン

###ディスプレイに映像が出るまでの流れをグラフィックスパイプラインと呼ぶ

###javascriptとWebGLの役目は、このグラフィックスパイプラインにデータを送ったり、どのようにデータを扱うのかを指定すること

・グラフィックスパイプラインとは、最終的にスクリーン上に何かを描き出すまでのその道のりのこと

・グラフィックスパイプラインをさらに細かく見ていくと、その中にはレンダリングパイプラインと呼ばれる領域がある

##10. レンダリングパイプライン

レンダリングパイプラインの中では、WebGLから送られてきたデータを加工してディスプレイに出力するところまでを行う
※このレンダリングパイプラインの中もさらに細分化される

恐ろしいことにジオメトリパイプラインやフラグメントパイプラインの中身もさらに細かく分解され、いくつもの処理が詰め込まれている

##11. レンダリングパイプラインの役割

####画面上に何かを描くこと

例えば・・・
画面上に四角形を表示させていとしたら、どのようなプログラムを書けばいいのか

####HTMLとCSSの場合

index.html

<div style="background-color: red; width: 100px; height: 100px;"></div>

※赤い四角形が画面上に表示される

####三次元の場合

index.html

<div style="background-color: #ff0000; width: 100px; height: 100px; transform: matrix(-0.5, 0.5, 1.0, 0, 20, 10);"></div>
<div style="background-color: #00ff00; width: 100px; height: 100px; transform: matrix( 1.0, 0, 0.5, 0.5, 20, -40);"></div>
<div style="background-color: #0000ff; width: 70px; height: 70px; transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 110, -150, 0, 1);"></div>

###二次元に空間に三次元のものを描くのはとても複雑な計算をしなくてはならない
※移動・回転・変形・色などをどのように表現するのかを手で計算すつのは無謀

###レンダリングパイプラインは面倒で大変な変換作業を行う
プログラムからは、どのような形状のものを、どのような角度で、どんなふうに見えるようにしたいかを指定してやる。すると、レンダリングパイプラインを通るうちにデータが変換され、三次元のデータを二次元のスクリーン上に映し出してくれる

##12. 固定機能パイプライン

固定機能パイプラインはパイプラインの中の機能が固定されており、複雑なことや応用技術は利用できないが、その代わり初めから組み込まれているので簡単に利用することができる

しかし。。。
###WebGLには固定機能パイプラインは実装されていない
・OpenGLには様々な種類がありPC以外にもモバイル端末などで利用することを前提にした軽量な実装が用意されており、それがOpenGL ESと呼ばれているもの
・OpenGL ES は、軽量化の観点からいくつかの機能が削除されていて、固定機能パイプラインが含まれていない
・WebGLは、このOpenGL ESをベースにしているので、固定機能パイプラインが組み込まれていない

##13. ジオメトリパイプライン
・ジオメトリパイプラインは三次元のデータを二次元に変換することが主な役割
・二次元空間へのデータの変換を行い、最終的に画面にどのような形状のオブジェクトを描き出せばいいかを決定する

##14. フラグメントパイプライン
・フラグメントパイプラインはジオメトリパイプラインから送られてきたデータを精査して最終的に画面に出力される色を決めることが主な役割
・ジオメトリパイプラインから「ここは陰になるよ」という情報が流れてくれば、そこを暗い色にするのはフラグメントパイプラインの仕事

###映画製作に例えると

・プログラマであるあなたは映画監督です

・まずは javascript くんと WebGL くんのチームに、俳優たちを揃えるように指示します

・監督であるあなたは、集まった俳優たちをどのような配置にするか、どのような角度から撮影するか、どんなカメラを利用するかなどを決めます

・次にあなたは、ジオメトリくんに指示を出して、シーンを撮影させました

・三次元空間上でおのおの配置についていた俳優たちは、フィルムという二次元の世界に焼き付けられました

・フィルムを受け取ったフラグメントくんは、フィルムの色合いを調整したり、影を濃くしたり、女優さんの肌を白くしたり、監督に言われたとおりに映像を加工しました

・こうして、晴れてスクリーンに映像が映し出されました

演出家、カメラマン、編集屋さん、というような役割分担！

##15. シェーダ

・ジオメトリパイプライン、フラグメントパイプラインの動作を指定するのに利用されるのがシェーダ
・固定機能パイプラインを持つプラットフォームでは必ずしもシェーダを記述する必要はないが、WebGLではシェーダの記述が必須
・シェーダはジオメトリ、フラグメントのそれぞれのステージごとに個別に記述するもので、ジオメトリパイプラインでは頂点シェーダが処理を行う
・フラグメントパイプラインでは、フラグメントシェーダが処理を担当
・WebGLには頂点シェーダとフラグメントシェーダ二種類のシェーダが実装
・本家OpenGLやDirectXには上記二種類のシェーダ以外にもジオメトリシェーダなどの種類がある
・プラットフォームごとにシェーダを記述するための専用のシェーダ記述言語が用意されていることが多い

##16. GLSL
・WebGLにおいてはOpenGL用のシェーダ記述専用言語であるGLSLを利用する
・WebGLを習得するためにはjavascriptで記述するWebGL独自の実装の他に、このGLSLをマスターする必要がある
・GLSLはC言語に近い言語仕様になっているので、比較的一般的なプログラミングの知識を流用しやすい