Shadertoyの作例をサイトに移植するときのメモ。 （例えばこちらをサイトに移し替えたいとき。） `mainImage`を`main`にして、始めに`fragCoord`を定義しておく。 （引数は消してしまっても良い） void mainImage( out vec4 fragColor, in vec2 fragCoord ) { void main() { vec2 fragCoord = gl_FragCoord.xy; `iResolution`は`u_r
var pos = { x: 0, y: 0, cx: 0, cy: 0 };window.addEventListener('mousemove', move, false);requestAnimationFrame(render); move()関数 function move(e) { pos.x = e.screenX; pos.y = e.screenY;} 線形補完とイージング function lerp(start, end, t) { if (end
ひとまずこれだけ書けばGLSLが表示されるはず、というメモ。 index.html<script id="vs" type="x-shader/x-vertex">の中に頂点シェーダー、<script id="fs" type="x-shader/x-fragment">の中にフラグメントシェーダーを書く。 <body>の中は<canvas>のみ。 <!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><ti
ひとまずこれだけ書けばThree.jsを介してGLSLが表示されるはず、というメモ。 index.html<script id="vs" type="x-shader/x-vertex">の中に頂点シェーダー、<script id="fs" type="x-shader/x-fragment">の中にフラグメントシェーダーを書く。 Three.jsの読み込みは公式ドキュメントに倣う。 <body>の中は<canvas>のみ。 <!DOCTYPE html><html la
GLSLを書くときに便利なツールをまとめておくページ。 2023.09.04 追記
読んでるだけじゃまったく捗らないので習ったことをここにメモしてゆく事にした。のちのち長いまとめを書くとき用のメモですね。まずは用語の洗い出し。 メッシュポリゴンの集合体。頂点やエッジ、サブメッシュなどの情報を持つ、オブジェクトの形状を定義したもの。 マテリアルテクスチャの色や質感、光の反射などの情報を含む、オブジェクト表面の見た目を定義したもの。 シェーダー頂点シェーダー（Vertex Shader）（バーテックス・シェーダー） 頂点に関する情報を処理するシェーダー。モ
引越して新天地！ GLSLを使えそうな案件を手に入れて俄然勉強に力が入るや否や、いい感じなサイトを発見して機運も高まる今日この頃、調子良さげです。 このページ、探し求めてた資料だ！ パーリンノイズじゃなくて「psrdnoise」かなるほどなるほど…（分かってない）。 …じっくりコードを眺めて勉強を進めるゾ！ てなもんで。
【noteのエラー報告】 ①ログアウトしてもすぐログインしてしまう ②audio再生中に違うタブを開いているとプログレスバーが止まってしまう
この動画で使われてるみたいなシェーダーを自分で描けるようになりたいな。それを自分のWebサイトで使うんだ。ﾜｷﾜｷ
このページが理解できるようになりたい。 あとブラウザのタブに溜まってる読み物追加。 シェーダーで描画することをお絵描きって言うんだね。 ライブペインティングみたいにライブコーディングできるまでになりたい（ライブペインティングもした事はない）。
Webサイト上でWebGLを使って3Dアニメーションを動かしたいっと思って早幾年、何度も挑戦しては挫折を繰り返し、なんかもうとっても難しいというか、僕がやりたいこと、“やって楽しい事と難しさ”が釣り合ってない！と思ったんです。3Dをどうこうするよりも、2Dを変形したり加工したりする方が楽しい事に気付きました。 そこでGLSLです。シェーディング言語と言って、結局3Dグラフィックスなんだけど、「何か作る」と思って作るんじゃなくて、画像を歪ませたり、ノイズを加工してグラフィカルな
