のぐそんブログ

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

Three.jsで画面全体に板ポリゴンを貼る

Three.js WebGL

板ポリゴンを作成して、テクスチャを貼ってみたいと思います。 まずは、画面全体に板ポリゴンを貼ってみたいと思います。

Geometryクラスと、BufferGeometryクラスで少し書き方が異なるみたいだったので、両方書いておきます。

続きを読む

セルフユーザービリティテストのメモ

その他

本日UXDTさん主催の「セルフユーザビリティテスト検定講座」に参加してきました。

Kobito.G5I6CW.png

参加者は30人ほどいて、職種もデザイナーや、エンジニア、セールス、エディタなど職種も様々でした。

はじめは座学でセルフユーザービリティの概要を聞き、最後に実際にワークショップを行いました。

続きを読む

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

Three.js WebGL

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関数でタイルレイアウトに挑戦メモ

WebGL javascript

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

for文でタイルレイアウトをやってみる

今回はfract関数を使ってタイルレイアウトに挑戦してみたいと思います。 fract関数は引数の値の少数点以下の値を返却してくれます。

mod関数で代替するとしたらmod(x,1.0)となります。

続きを読む

GLSLで行列で回転・縮小をする為のメモ

WebGL javascript

行列を使った回転と、拡大縮小をやってみます。

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

サンプル

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

続きを読む