板ポリゴンを作成して、テクスチャを貼ってみたいと思います。 まずは、画面全体に板ポリゴンを貼ってみたいと思います。 Geometryクラスと、BufferGeometryクラスで少し書き方が異なるみたいだったので、両方書いておきます。

本日UXDTさん主催の「セルフユーザビリティテスト検定講座」に参加してきました。 参加者は30人ほどいて、職種もデザイナーや、エンジニア、セールス、エディタなど職種も様々でした。 はじめは座学でセルフユーザービリティの概要を聞き、最後に実際にワー…

フラグメントシェーダーでモノクロエフェクトをやってみます。 このエフェクトは比較的分かりやすかったです。 下の画像をモノクロ表示してみたいと思います。

Three.jsを使ってテクスチャを読み込むのはとても簡単です。 THREE.jsのテクスチャについて調べる let textuerLoader = new THREE.TextureLoader(); let mat = new THREE.MeshPhongMaterial(); let geom = new THREE.BoxGeometry(3, 3, 3); textuerLoader.lo…

フラグメントシェーダをつかってのノイズを作成するためのメモです。

以前mod関数やfor文でタイルレイアウト挑戦しました。 for文でタイルレイアウトをやってみる 今回はfract関数を使ってタイルレイアウトに挑戦してみたいと思います。 fract関数は引数の値の少数点以下の値を返却してくれます。 mod関数で代替するとしたらmod…

行列を使った回転と、拡大縮小をやってみます。 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…

フラグメントシェーダーを使って円を描いてみます。 三平方の定理で円を描く 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 =…

閾値を超えたら1.0を返し、超えなかったら0.0を返すstep関数を使って矩形を描画してみたいと思います。

GLSLを学習中の自分用のメモです。

GLSLを学習中の自分用のメモです。 step関数 step(a,b) a・・・閾値 b・・・チェックされる値 bがa(閾値)より小さい値には全て0.0 を返し、a(閾値)以上の値には 1.0 を返します。 void main() { //0.0 ~ 1.0に正規化する vec2 uv = gl_FragCoord.xy/resoluti…