Three.jsでGLSLを触るための基礎基礎メモ

GLSLの基礎

「WebGLを使って三角形を描画する為の基礎知識」でも少しかきましたが、GLSLは頂点シェーダーと、フラグメントシェーダーがあります。

頂点シェーダーではgl_Positionという組み込み変数に頂点データを必ず渡す必要があります。 フラグメントシェーダーには、gl_FragColorという組み込み変数がありピクセルの色を指定します。

gl_Positionには、後述するカメラの視野範囲の空間であるクリッピング座標が入ります。

WebGLでの行列による変換処理を理解する上で、最低限知る必要がある言葉

WebGLでの行列による変換処理を理解する上で、最低限しっていないといけない言葉について書きたいと思います。

下記を参考にさせていただきました。 3D 描画の基礎知識

Three.jsでパーティクルを作ろうと思った際に調べたこと

Three.jsでパーティクルをつくるにはどうすればいいのか調べてみました。

Three.jsで頂点座標を指定して三角形を描く

以前、「WebGLを使って三角形を描画する為の基礎知識」の記事をかきましたが、WebGLのラッパーライブラリであるTHREE.jsでも同じようなことができるのでメモしておきます。

当然ですが、ナマのWebGLを触るよりより簡単に書けるようになっています。

expressでサーバ−を立てるの超基礎編

サーバー側の知識が限りなくゼロに近いオジサンですが、 expressを使って、まずはindex.htmlを表示だけしてみようと思います。

Socket.ioの超基礎編

expressとSocket.ioを使う

サーバー側の知識が限りなく0に近いオジサンですが、 Socket.ioを使って、サーバーとクライアントで双方向通信をやってみます。

THREE.Sceneについて少し調べる

THREE.Sceneは、オブジェクトを配置する基盤なのですが、THREE.Scene.addしか使ったことがなかったので、他にどんなことができるか調べました。