メジャーブラウザの対応状況 WebGL に対応するブラウザは日々増えている状況ですが、とは言っても、メジャーなブラウザが必ずしも WebGL をサポートしているとは言えないのが現実です。 当テキストを執筆している時点(2012年2月現在)では、Chrome 9 以降と FireFox 4 以降で、既定で WebGL が有効になっています。私の場合は Chrome が登場して以来ずっとメインブラウザとして Chrome を使っています。当テキスト執筆時は Chrome 17 が正式にリリースされたところで、当サイトのあらゆるコンテンツは全て Chrome にて動作テストを行ないます。 また、safari の場合は実行環境と safari 自体のバージョンに注意が必要で、尚且つ既定では WebGL が有効になっていません。私は windows ユーザーですので Mac + safari の環境
WebGLのシェーダーGLSLでの画像処理の作り方(モノクロ、セピア、モザイク、渦巻き) WebGLを使うと画像処理が実現でき、HTMLコンテンツに多彩なグラフィカル表現をもたらすことができます。たとえば、表示をモノクロームやモザイクにするといった画像エフェクトは簡単に実現できます。 WebGLはGPUの恩恵を受けれるため高速に実行でき、他の代替手法(canvas要素Context2Dオブジェクトによる画像処理等)よりも負荷が軽いのが利点です。 今回はWebGLの定番JSライブラリ「Three.js」とGLSLというシェーダー言語を使った、9種類の画像処理の実装方法を紹介します。ソースコードは「GitHub」からダウンロードして読み進めてください。 サンプルを試してみよう 次のサンプルでは複数のシェーダーを適用できます。画面左上のチェックボックスで画像加工を選択でき、ラジオボタンから画像と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く