WebGL & Three.js
【GLSL】Three.jsのShaderMaterialを使って画像や動画を出力する方法(デモ付き)
Three.jsのShaderMaterialを使って画像や動画を出力する方法を紹介します。 WebGL(GLSL)を使うので、これができるとWebサイトなどでは即応用ができるようになります。 デモもあるのでまずは確認してみてください。 もしGLSLを書かずに、Three.js…
ARCHIVE
月: 2023年12月
WebGL & Three.js
【GLSL】glslifyのノイズ(noise)の使い方とデモ
GLSLでノイズ(noise)を使う方法を、glslifyとglsl-noiseのシンプレックスノイズで解説します。2D・3Dノイズの読み込み、スケール・移動・波・時間変化の書き方、画像を水面のように揺らすShaderMaterialの実例をデモ付きで紹介します。
WebGL & Three.js
【GLSL】画像を切り替えエフェクト：遷移時にノイズをかけたり、歪ませたりする方法(デモあり)
WebGL(GLSL)を使って画像を切り替えエフェクト、遷移時にノイズをかける方法を紹介します。 またノイズを応用することで画像を歪ませながら遷移させることもできます。 合わせてデモをたくさん用意したので、まずは確認して…
WebGL & Three.js
【GLSL】画像の色の入れ替え、反転、座標をずらす、ゆっくり変化させる方法(デモ付き)
WebGL(GLSL)のフラグメントシェーダで色を入れ替えたり、色を反転させたり、色の座標をずらしたり、ゆっくりと色を変化させたり、画像を繰り返したりする方法を紹介します。 元画像の表示から分かるように7つほどデモを用意…
WebGL & Three.js
【WebGL】GLSLで使う数学(三角関数、ベクトル)を文系エンジニアのために実務でいるところだけ解説
WebGLにおいてGLSLを書く時、どうしても数学がでてきます。 ここでは数学(三角関数、ベクトル)を文系エンジニアのために、まず最初に抑えておきたいポイントだけ解説します。 難しいことは私もわかりませんし、GLSLを扱…
WebGL & Three.js
【WebGL】GLSLで定数を定義する方法(define, constとその違いと注意点)
WebGL(GLSL)で定数を定義する方法を紹介します。 定数を定義するのは、2通りあります。 define const この2つの使い方、その違いからくる注意点をみてみましょう。 基本的なGLSLの計算方法については、…
WebGL & Three.js
【WebGL】GLSLで円や三角形、四角形、その他多角形の図形を描写する方法
WebGL(GLSL)で円や三角形、四角形、八角形、十角形といった多角形の図形を描写する方法を紹介します。 基本的なGLSLの計算方法については、GLSLで使う数学(三角関数、ベクトル)を文系エンジニアのために実務でいる…