のぐそんブログ

暗いおじさんがシコシコ書くブログです。

Three.jsを使ってuniformsでテクスチャを渡すメモ

Three.jsを使ってテクスチャを読み込むのはとても簡単です。

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変数としてデータを渡して、テクスチャを表示してみたいと思います。

続きを読む

fract関数でタイルレイアウトに挑戦メモ

以前mod関数やfor文でタイルレイアウト挑戦しました。

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);

サンプル

中心座標をうごかしている為、オブジェクトだけでなく空間全体が動いてしまいます。

続きを読む

フラグメントシェーダーを使って円を描く

フラグメントシェーダーを使って円を描いてみます。

三平方の定理で円を描く

void main( void ) {
    vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
    vec4 c = vec4(1.0);
    if(pow(st.x,2.0) + pow(st.y,2.0) <= 0.5){
        c = vec4(0.0); 
    }
    gl_FragColor = c;
}

続きを読む