Three.jsを使ってuniformsでテクスチャを渡すメモ
Three.jsを使ってテクスチャを読み込むのはとても簡単です。
let textuerLoader = new THREE.TextureLoader(); let mat = new THREE.MeshPhongMaterial(); let geom = new THREE.BoxGeometry(3, 3, 3); textuerLoader.load('images/n.jpg', function (textuer) { mat.map = textuer; let mesh = new THREE.Mesh(geom, mat); scene.add(mesh); });
今回はuniform変数としてデータを渡して、テクスチャを表示してみたいと思います。
続きを読むGLSLでノイズを使うメモ
フラグメントシェーダをつかってのノイズを作成するためのメモです。
続きを読むfract関数でタイルレイアウトに挑戦メモ
以前mod関数やfor文でタイルレイアウト挑戦しました。
今回はfract関数を使ってタイルレイアウトに挑戦してみたいと思います。 fract関数は引数の値の少数点以下の値を返却してくれます。
mod関数で代替するとしたらmod(x,1.0)
となります。
GLSLで行列で回転・縮小をする為のメモ
行列を使った回転と、拡大縮小をやってみます。
sin,cosで円を回転
sin、cosを使って回転してみます。
const float PI = 3.14159265359; void main( void ) { vec2 st = (gl_FragCoord.xy * 2.0 - resolution) /min(resolution.x,resolution.y); float p = 0.0; // st = rotate2d( sin(time)*PI ) * st; vec2 c = max(abs(st +vec2(cos(time)*0.5,sin(time)*0.5)) - 0.2,0.0); p = length(c); p = ceil(p); vec3 color = vec3(1.0 - p); gl_FragColor = vec4(color,1.0);
中心座標をうごかしている為、オブジェクトだけでなく空間全体が動いてしまいます。
続きを読むGLSLでフラグメントシェーダーを書く場合のメモ3
GLSLを学習中の自分用のメモです。
続きを読む