2023年12月

WebGL(GLSL)を使って画像を切り替えエフェクト、遷移時にノイズをかける方法を紹介します。
またノイズを応用することで画像を歪ませながら遷移させることもできます。
合わせてデモをたくさん用意し ...

WebGL(GLSL)でよく使うglslifyのノイズ(noise)の使い方を紹介します。
デモもあるので確認してみてください。

【GLSL】glslifyのノイズ(noise)のデモ通常の2Dノイズ ...

2023年12月7日

WebGL(GLSL)のフラグメントシェーダで色を入れ替えたり、色を反転させたり、色の座標をずらしたり、ゆっくりと色を変化させたり、画像を繰り返したりする方法を紹介します。
元画像の表示から分かるように7つ ...

2023年12月7日

Three.jsのShaderMaterialを使って画像や動画を出力する方法を紹介します。
WebGL(GLSL)を使うので、これができるとWebサイトなどでは即応用ができるようになります。
デモ ...

2023年12月7日

WebGL(GLSL)で円や三角形、四角形、八角形、十角形といった多角形の図形を描写する方法を紹介します。

基本的なGLSLの計算方法については、GLSLで使う数学(三角関数、ベクトル)を文系エンジニア ...

2023年12月7日

WebGL(GLSL)で定数を定義する方法を紹介します。

定数を定義するのは、2通りあります。

define
const

この2つの使い方、その違いからくる注意点をみてみましょう ...

2023年12月7日

WebGLにおいてGLSLを書く時、どうしても数学がでてきます。
ここでは数学(三角関数、ベクトル)を文系エンジニアのために、まず最初に抑えておきたいポイントだけ解説します。
難しいことは私もわかり ...