画像をトゥーン化するシェーダーを作りたい

トゥーンシェーディング(セルシェーディング)はアニメ風の塗りを表現します。

今回は3Dを描画するときのトゥーンレンダリングではなくて、画像をそれっぽく変換してみたいと思います。

することを簡単に書くと、明るさを数段階に分けることとエッジ抽出です。

 

今回はやりたいことと考え方のまとめで、上手くは行きません。

続きを読む 画像をトゥーン化するシェーダーを作りたい

【GLSL】パターンの書き方2つ

パターンチックな模様を作るのが楽しいので作るときの基本的な方法2つを覚書き。

似た結果になることもあるので、たまに混同しますが別物です。

続きを読む 【GLSL】パターンの書き方2つ

【GLSL】バーテックスシェーダーに触れる

これまで GLSL(とほんの少しのHLSL)を書いてましたが、フラグメントシェーダーしか書いていないことに気づいた。

もう一つの頂点シェーダー(バーテックスシェーダー)にも触れてみたい。

サンプルは全然見つからないし情報自体が少ないので gl-react のソースを見ながらバーテックスシェーダーの動作を確認します。

 

今回は基本的な確認までです。

続きを読む 【GLSL】バーテックスシェーダーに触れる

【React / GLSL】音の波形をGLSLで色々表現する

前回 React + GLSL で音声波形の表示ができたので、どんなふうに描画するのがいいかいくつか試してみました。

今回は基本的に GLSL のコードサンプルになります。

続きを読む 【React / GLSL】音の波形をGLSLで色々表現する

【React / GLSL】音の波形を canvas に描画する

canvas の描画を動画にして保存したり、 動画に音を付けたりしました。

応用すると音と画像から新しい動画を作れるようになる。

まずは、音を元に canvas を書き換えてみます。

続きを読む 【React / GLSL】音の波形を canvas に描画する

Canvasの描画を動画にする

GLSL などで動かした canvas 上の絵を動画にしてみたい。

MediaRecorder API を軽く触ってみます。

 

動作環境は Chrome、開発に React (Next.js)GLSLgl-react を使っています。

続きを読む Canvasの描画を動画にする

【つぶやきGLSL】スポットライト風のアニメ

ツイッターでGLSLを書くという試み「#つぶやきGLSL」があります。

266文字という短いコードで何とかしようという楽しい遊びです。

今回描いたものは結構手こずったので出来上がるまでの流れと、文字数削減の方法を残しておきます。

 

ツールとして twigl.app を使わせていただきます。

 

過去のコードなどは以下に置いてます。

続きを読む 【つぶやきGLSL】スポットライト風のアニメ

【GLSL】雷を降らせる

前回は線分を書けるようになったので、それを使って雷を書いていきます。

 

基本部分の線分を書くところは以下を見てください。

続きを読む 【GLSL】雷を降らせる

【GLSL】2点を結ぶ線分を書く

前々回前回と直線を書いたので、より使いやすくするために線分を書けるようにします。

※前々回の失敗版は実は線分でした。

続きを読む 【GLSL】2点を結ぶ線分を書く