サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
webglfundamentals.org
この記事は「WebGLの基本」に関する講義の続きである。 「WebGLの仕組み」についてまだ学んでいないなら、 そちらを先に読むことをお勧めする。 我々はこれまでシェーダーとGLSLについて話をしてきたわけであるが、 その仕様の詳細については踏み込んでこなかった。 これまでサンプルプログラムを示してきたことによって大まかな雰囲気は 掴めたものと期待しているが、ここで今一度、シェーダーとGLSLについて 整理して説明したい。 「WebGLの仕組み」の講義で説明した通り、 WebGLで何かを描くためには2つのシェーダーが必要である。 これら2つのシェーダー、即ち「頂点シェーダー」と 「フラグメントシェーダー」は、いずれも「関数」である。 頂点シェーダーとフラグメントシェーダーは互いにリンクされ、 1つの「シェーダープログラム(単に「プログラム」とも呼ばれる)」となる。 典型的なWebGLアプリ
canvas要素のサイズを変更する際に知っておくべき点について説明します。 canvasには2種類のサイズがあります。 ひとつめは、canvasの「描画バッファーのサイズ」です。これは、canvas内のピクセル数です。 ふたつめは、canvasの「表示サイズ」です。canvasの表示上のサイズは、CSS(style)で決定します。 canvasの「描画バッファーのサイズ」を設定する方法は2種類あります。 ひとつめは、HTMLを使う方法です。 <canvas id="c" width="400" height="300"></canvas> ふたつめは、JavaScriptを使う方法です。こちらの方法では、HTML側は <canvas id="c" ></canvas> JavaScript側は、 var canvas = document.querySelector("#c"); canv
WebGLを基本から学ぶ授業. この記事はWebGLを基本から教える記事である。 他のサイトに載せてあるような昔のOpenGLが更新された記事ではなく、 時代遅れのアイデアを捨てて、 WebGLとは何か、WebGLがどうやって動くかについて、理解へと導く、完全に新たな記事である。 WebGL2に興味があればこれを参照して下さいwebgl2fundamentals.org 基本 基本 WebGLの仕組み WebGLのシェーダーとGLSL WebGL State Diagram 画像処理 WebGLにおける画像処理 WebGLにおける画像処理。続き 2Dでの移動、回転、拡大縮小、行列計算 二次元での移動 二次元での回転 二次元での拡大縮小 二次元での行列数学 3D 三次元の正投影 三次元透視投影 三次元のカメラ Lighting 三次元指向性光源 三次元点光源 Spot Lighting St
WebGLは三次元APIとして思われることも多い。 「WebGLを使えば魔法のように簡単に三次元の映像を表示出来るだろう」と思ってしまう人も多い。 実はWebGLはただのピクセルを書くエンジンである。WebGLで自分の作成したコードで点、線、 三角形を使って色々なタスクを記述することが出来る。 それ以上描きたければ点と線と三角形を使って自分のコードでWebGLを使うことが必要である。 WebGLはコンピュータのGPUで動く。だからGPUで起動出来るコードを提供しなければいけない。 そのために2つの関数を提供する必要がある。その関数は「頂点シェーダー」と「フラグメントシェーダー」と呼ばれ、 両方厳密なC/C++のような「GLSL」という言語で作成するものだ。その2つの組み合わせを「プログラム」という。 頂点シェーダーの役割は頂点の位置を計算すること。 その関数の導き出した頂点位置でWebGL
WebGL from the ground up. No magic. These are a set of articles that teach WebGL from basic principles. They are NOT old rehashed out of date OpenGL articles like many others on the net. They are entirely new, discarding the old out of date ideas and bringing you to a full understanding of what WebGL really is and how it really works. If you are interested in WebGL2 please see webgl2fundamentals.o
このページを最初にブックマークしてみませんか?
『WebGL Fundamentals』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く