マガジンのカバー画像

WebGL

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

記事一覧

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

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

十九、テクスチャを重ね合わせる。

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

十八、テクスチャを繰り返し使う。

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

十七、四角形にテクスチャを貼る。

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

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

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

十五、複数の点に別々の色を付ける。

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

十四、サイズの異なる複数の点を描画する。(ストライド版)

■サンプルページはコチラ↓ ■このプログラムの解説は、次のExcelファイルをご覧下さい。 ■htmlのコードです。↓ <!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8" /> <title>北斗七星風にサイズの異なる複数の点を描画する。(ストライド版)</title> </head> <body onload="main()"> <canvas id="webgl" widt

十三、サイズの異なる複数の点を描画する。

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

十二、図形をアニメーションで回転させる。【キーワード→requestAnimationFrame】

以前、この記事は十一番でした。しかし、正しくは十二番であることに気付き書き直しました。「…

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

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

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

■サンプルページはコチラ↓ .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ファイルをご覧下さい。 ■htmlのコードです↓ <!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8" /> <title>方位磁針の様なマークを描画する。(正三角形だと、以降の内容が分かり辛い為)</title> </head> <body onload="main()"> <canva