マガジンのカバー画像

WebGL

25
WebGL
運営しているクリエイター

#WebGL

二十四、視体積のサイズを調整。(WebGL)

↑このプログラムで視点を操作すると、比較的早い段階で図形がフレームアウトします。 視点が…

二十三、キーを使ってカメラの位置を変えてみる。

■サンプルページはコチラ↓ ↑ パソコンの矢印キーの左/右キーを押すと、視点が変わります。…

二十二、モデルビュー行列。

■サンプルページはコチラ↓ ■このプログラムの解説は、次のExcelファイルをご覧下さい。 .…

二十一、ビュー行列と回転行列(モデル行列)の両方を使ってみる。

■サンプルページはコチラ↓ ■このプログラムの解説は、次のExcelファイルをご覧下さい。 .…

二十、WebGLのビューの設定。

■サンプルページはコチラ↓ ■WebGLの座標系。(三次元) ↓WebGLの初期状態の視点は、(0, 0,…

十六、テクスチャ。ラスタライズ。今回はサンプルページは無く、用語の説明です。

・PC画面上の画素は「ピクセル」ですが、WebGLのモデル上の画素の様な物は「フラグメント」と…

十一、図形を移動させた後、回転させる。(五千文字以上の解説付きです)

■サンプルページはコチラ↓ .oOo..oOo..oOo. ■このプログラムの解説は、次のExcelファイルをご覧下さい。 ■htmlのコードです。↓ <!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8" /> <title>図形を平行移動させ、その後回転させる</title> </head> <body onload="main()"> <canvas id="webgl" w

十、回転行列をライブラリで作成し、図形を回転させる。(ブラウザに表示される結果は…

■サンプルページはコチラ↓ .oOo..oOo..oOo. ■プログラムの解説は、次のExcelファイルをご…

九、前々回作成した図形を、行列を使って回転させる。

■サンプルページはコチラ↓ .oOo..oOo..oOo. ■プログラムの解説は、次のExcelファイルをご…

八、前回作成した図形を移動させる。(WebGL)【重要→gl.getAttribLocation、gl.getUni…

■サンプルはコチラ↓ .oOo..oOo..oOo. ■プログラムの解説は、次のExcelファイルをご覧下さ…

七、図形を描画する。(WebGL)【重要→gl.TRIANGLE_STRIP】

■サンプルはコチラ↓ .oOo..oOo..oOo. ■プログラムの解説は、次のExcelファイルをご覧下さ…

五、複数の色を使う。

■サンプルはコチラ↓ .oOo..oOo..oOo. ■プログラムの解説は、こちらのExcelファイルをご覧…

四、クリックした場所に点を表示させる。

■サンプルはコチラ↓ .oOo..oOo..oOo. ■プログラムの解説は、こちらのExcelファイルをご覧…

三、配列のデータをJavaScript側で設定して点を描画してみましょう。

■”二”とは違う方法で点を描いてみましょう。 ■サンプルはコチラ↓ .oOo..oOo..oOo. ■プログラムの解説は、こちらのExcelファイルをご覧下さい↓ ■HTMLのコードです↓ <!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8" /> <title>配列のデータをJavaScript側で設定して点を描画してみましょう。</title> </head> <body on