これまで GLSL（とほんの少しのHLSL）を書いてましたが、フラグメントシェーダーしか書いていないことに気づいた。
もう一つの頂点シェーダー（バーテックスシェーダー）にも触れてみたい。
サンプルは全然見つからないし情報自体が少ないので gl-react のソースを見ながらバーテックスシェーダーの動作を確認します。
今回は基本的な確認までです。
カテゴリー: 画像処理
【React / GLSL】音の波形をGLSLで色々表現する
前回 React + GLSL で音声波形の表示ができたので、どんなふうに描画するのがいいかいくつか試してみました。
今回は基本的に GLSL のコードサンプルになります。
【React / GLSL】音の波形を canvas に描画する
動画に音を合成する
Canvasの描画を動画にする
GLSL などで動かした canvas 上の絵を動画にしてみたい。
MediaRecorder API を軽く触ってみます。
動作環境は Chrome、開発に React (Next.js)、GLSLは gl-react を使っています。
【つぶやきGLSL】スポットライト風のアニメ
ツイッターでGLSLを書くという試み「#つぶやきGLSL」があります。
266文字という短いコードで何とかしようという楽しい遊びです。
今回描いたものは結構手こずったので出来上がるまでの流れと、文字数削減の方法を残しておきます。
ツールとして twigl.app を使わせていただきます。
過去のコードなどは以下に置いてます。
【GLSL】雷を降らせる
【GLSL】2点を結ぶ線分を書く
【GLSL】2点を結ぶ直線の補足
【GLSL】2点を結ぶ直線を書く
GLSL で雷を書いてみようと思ったので１から書いていく。
とりあえず直線をと思って適当に書くと微妙に見た目が悪かったりするのが気になったので、まずはきれいに直線を書くことを考えます。
環境によっては draw() とかで済ませられそうなものですが、GLSLで書こうとするとちゃんと考える必要がありました。