WebGL – ホームページの作り方

Lesson10 – ピクセルシェーダー

Lesson07とLesson08では頂点シェーダーを扱いましたが、ここではもう1つのシェーダーであるピクセルシェーダーを紹介したいと思います。今回のサンプルは各頂点に色を割り当てて三角形を描くようにしています。少しや …

これまでの図形はどれも、黒地に白い三角形でしたが、そろそろ違う色の図形を描いてみたいと思いませんか？ということで、今回と次回はピクセルシェーダーについて解説していきたいと思います。 ※Lesson08は特別編でこれまでと …

もう少しだけシェーダーの使い方を解説したいと思います。前回は図形の変換に用いる行列をシェーダーのソースコードの中に書いていましたが、普段プログラムを作る時にそうすることは稀です。外部から設定できるようにして、状況に応じ …

前回までのLessonではシェーダーの中身をできるだけ見ないようにしてきましたが、いよいよその中身を見る時がやってきました。まずは、前回のサンプルで用いた頂点シェーダー関係の部分を抜き出してみます。シェーダーはコンパ …

前回作ったライブラリを使って実際に座標変換をしてみたいと思います。まず、座標変換ライブライを読み込む必要がありますので、HTMLの<head></head>を次のように書き変えてください。 ※こ …

ちょっと一休みして3Dプログラミングでよく使われれる拡大・縮小、回転、平行移動に関する行列を紹介したいと思います。といっても簡単なことだけです。より複雑な事や正確な説明は数学の解説書にお任せします。 ※WebGLでは最終 …

ここまで、前準備が長かったと思います。ようやくですが<canvas>に図形を描いていきたいと思います。今回追加した部分はdrawSceneです。ここで三角形を描いています。 [0.0, 0.8, 0.0, …

今回はシェーダーの初期化部分を作成していきます。少し分かり難い部分ですが、今回が終わればお約束的な部分は終わりです。後少しだけ我慢して付き合ってください。 ※とりあえず、細かい部分は気にしなくてもいいと思います。こんな感 …

今回からは、さっそくWebGLの中身に入っていきたいと思います。 Lesson01でも紹介しましたが、WebGLは<canvas>で動作します。ですから、HTML自体はシンプルです。上のサンプルで<b …

WebGLはブラウザで3Dグラフィックスを表示するための標準仕様として、OpenGL ES 2.0をベースに作られました。主な特徴は以下のとおりです。特別なプラグイン無しで表示可能クロスプラットフォーム対応で、PCか …