WebGLの能力を引き出すプログラマブルシェーダー
シェーダー言語（GLSL）の書式 前ページではThree.jsからカスタムシェーダーを利用する方法を取り上げました。ここからはシェーダー言語（GLSL）の具体的な記述方法を解説していきます。 GLSLの文法は、C言語を単純化してベクトルや配列などの型を追加したものになっています。JavaScriptもC言語の影響を強く受けているので、共通する部分が多くあります。以降では、JavaScriptと異なる部分を中心にして、GLSLの主な機能・文法を説明します。 一般的に、GLSLのコードは以下のような構成になります。前のページのサンプルにあるコードと見比べてみてください。 コードの最初の部分では、プログラム中で使用するグローバル変数の定義を記述します。前ページで出てきたuniform変数やattribute変数の定義もここで行います（詳細は後述）。JavaScriptと異なり、この部分にコードを
WebGLの能力を引き出すプログラマブルシェーダー
WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。 前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ
wgld.org | WebGL |
WebGL contents WebGL に関するコンテンツの一覧です。 初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。 また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。 WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。 ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識 レンダリングのための下準備 行列(マトリックス)の基礎知識 頂点とポリゴン コンテキストの初期化 シェーダの記述と基礎 頂点バッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://atmarkit.itmedia.co.jp/ait/articles/1211/26/news012_3.html
