GLSL

Basic

• バッファを使わずにキャンバスを覆う三角形を描く
• シェーダーで画面全体を単色で塗りつぶす
• シェーダーでビューポート解像度を使って画面全体をグラデーションで塗り潰す

Mathematics

• 範囲の変換

Interpolation

• 線形補間によって2色を繋いだグラデーション
• 線形補間によって3色を繋いだグラデーション
• 双線形補間によって4色を繋いだグラデーション
• step関数によるポスタリゼーション
• 境界の滑らかさが時間変化するポスタリゼーション

Graph

• 一次関数のグラフとグラデーション
• 冪乗関数のグラフとグラデーション
• 階段関数のグラフとグラデーション
• 滑らかな階段関数のグラフとグラデーション
• 複数の関数のグラフを重ねて描く

Coordinate System

• グラデーションを極座標に対してマッピング
• 偏角が時間変容する極座標にグラデーションをマッピング

Color

• HSV色空間の断面

Random

• sinの小数部分を用いた1Dのレガシー乱数
• sinの小数部分を用いた2Dのレガシー乱数
• Xorshiftによる1Dの乱数
• Xorshiftによる2Dの乱数（引数も戻り値も2D）
• Xorshiftによる2Dの乱数（引数が2D、戻り値は1D）
• Xorshiftによる3Dの乱数（引数も戻り値も3D）
• Xorshiftによる3Dの乱数（引数が3D、戻り値は1D）
• 双線形補間による2次元値ノイズ
• エルミート補間による2次元値ノイズ
• エルミート補間による3次元値ノイズ
• 2次元勾配ノイズ
• 3次元勾配ノイズ
• 2次元パーリンノイズ
• 3次元パーリンノイズ
• 周期的な2次元ノイズ
• 第1近傍距離による胞体ノイズ
• 2次元ボロノイ分割による各領域をランダムに塗り分け
• 円錐の正射影によるボロノイ図

Shape

• シェーダーで四角形の辺を塗りつぶす
• GLSLのlength関数による円周の描画
• GLSLのlength関数の代わりに内積を使った円周の描画
• pow関数によって光量が調整された光の玉
• 割り算によって光量が調整された光の玉
• 円のSDFと等高線
• 円を描くcircle関数の実装
• 矩形のSDFと等高線
• SDFによる矩形の描画
• SDFによる矩形のアウトラインの描画
• 矩形を描くrect関数の実装
• 角が丸い矩形を描くroundRect関数の実装
• 十字マークを描くcrossSymbol関数の実装
• マンハッタン距離による円のSDFと等高線
• チェビシェフ距離による円のSDFと等高線
• Lpノルムによる円のSDFと等高線
• 線分のSDFと等高線
• SDFによる線分の描画
• SDFによる線分のアウトラインの描画
• 2点を結ぶ線分を描くline関数の実装

Pattern

• fractでグラデーションを横に繰り返す
• fractでグラデーションを縦横に繰り返す
• 円を等間隔で横に並べる
• 円を等間隔で縦横に並べる
• 画面中央から遠いほど大きくなる円を等間隔で縦横に並べる
• 画面中央から遠いほど小さくなる円を等間隔で縦横に並べる
• マウスから遠いほど大きくなる円を等間隔で縦横に並べる
• マウスから遠いほど小さくなる円を等間隔で縦横に並べる
• 方眼紙

Transform

• 円周上を移動する十字マーク
• その場でくるくる回る十字マーク
• その場で拡大縮小を繰り返す十字マーク

3D

• レイキャスティングで市松模様の地面を描く

WebGL

Basic

• 白い三角形
• 各頂点に色を設定した三角形
• 一つのVAOで複数の三角形を描く

Lighting

• 光源なしのトーラス
• 平行光源によるトーラスのライティング
• 環境光によるトーラスのライティング
• 反射光による光沢のあるトーラス
• 点光源で照らされたトーラスと球
• ランバート反射を伴うグーローシェーディングによる球
• フォン反射を伴うグーローシェーディングによる球
• フォン反射を伴うフォンシェーディングによる球
• 点光源で照らされた円錐と球体が置かれた平面
• 複数の点光源を壁に投影する
• 複数のスポットライトを壁に投影する（減衰係数は定数）
• 複数のスポットライトを壁に投影する（減衰係数は指数関数）

Blending

• 単色ごとの色付けと頂点ごとの色付けを立方体で比較する

Transform

• マウスによって回転するトーラス

Camera

• トーラスを見つめ続けながら回転するカメラ
• 円錐とカメラを平行移動させる
• 円錐とカメラを回転させる
• 追跡カメラと軌道カメラを切り替えながら円錐を眺める

Model

• Stanford Bunny
• Low Poly Stanford Bunny

Texture Mapping

• 四角形に画像を貼り付ける
• 四角形に2枚の画像を重ねて貼り付ける
• テクスチャをキューブの各面に貼り付ける
• 法線マップで凹凸を表現した立方体
• キューブ環境マッピングで空を反射させる
• 屈折マッピングで空を反射・屈折させる

Stencil

• ステンシルバッファでアウトラインを描いたトーラス

Framebuffer

• オフスクリーンレンダリングで生成したテクスチャをキューブの各面に貼り付ける
• 残像を残しながらマウスの位置に円を描く

Post Processing

• 円周上に並ぶ9つのトーラス
• 円周上に並ぶ9つのトーラスをグレースケール化
• 円周上に並ぶ9つのトーラスをセピア調に
• 円周上に並ぶ9つのトーラスで一次微分フィルタを比較する
• 円周上に並ぶ9つのトーラスでlaplacianフィルタを試す

Multiple Render Targets

• Material, Lighting, Depth, NormalをMRTで同時に出力

Instancing

• うねる円周上に並ぶテクスチャ
• うねる円周上に並ぶ円

GPGPU

• クリックで拡散し、マウスに追従して渦を巻くパーティクル
• 波状パーティクル
• マウスから湧き出る噴水パーティクル
• マウスから湧き出る、吹雪のように揺らぐパーティクル
• マウスから溢れる火玉
• 波状パーティクルにより水面下にあるようなテクスチャ

画像処理

合成

• 2枚の画像を重ね合わせて合成演算を比較する

平滑化

• gaussian blurの標準偏差とフィルタサイズによる結果の違いを比較
• シェーダで計算した平均色を利用したモザイク（激重注意）
• 拡大時の最近傍補間を利用したモザイク
• 中心点の色を採用したモザイク

鮮鋭化

• Laplacianを利用した鮮鋭化
• Unsharpフィルタを利用した鮮鋭化
• エンボス加工と鮮鋭化

エッジ検出

• 一次微分フィルタを比較する
• laplacianフィルタの近傍領域による違いを比較する
• Cannyフィルタによるエッジ検出

色の操作

• ハーフトーン
• ラインシェード
• ネガポジ反転
• 折れ線型トーンカーブでコントラストを調整する
• ガンマ補正トーンカーブでコントラストを調整する
• ソラリゼーション
• 擬似カラー
• ポスタリゼーション
• 二値化
• ランダムディザ

非写実的描画

• イラスト風加工
• 水彩鉛筆画風
• 鉛筆画風
• クレヨン画やスプレー画風のモザイク加工
• 縦横方向に擦ったようなモザイク加工
• ボロノイによる大理石風（？）のノイズ加工
• ランダム母点配置ボロノイによるモザイク風加工（元画像の色ベース）
• ランダム母点配置ボロノイによるモザイク風加工（青ベース）
• ランダム母点配置ボロノイとランダムstrokeによるモザイク風加工（青ベース）
• ランダム母点配置ボロノイによる水彩画風モザイク加工

Canvas 2D

Line

• ジグザグ
• 螺旋

物理

• 重力と抗力を受けながら放物運動するボール
• 一直線上に並ぶボールの衝突

p5.js

• 画面中央からグラデーションの花が開くようにアニメーション
• 線を引く間違った方法 --- デタラメなy
• 線を引く間違った方法 --- yのランダムな変動
• 円を描く間違った方法 --- 螺旋
• 円を描く間違った方法 --- ノイズを加えた螺旋
• 円を描く間違った方法 --- ノイズを加えた螺旋を100回重ね書き
• Wave Clock --- step-1 円を描く
• Wave Clock --- step-2 フェード効果を加える
• Wave Clock --- step-3 半径にパーリンノイズによる変動を加える
• Wave Clock --- step-4 回転の角度にノイズ変動を加えて、線の密度を変える
• Wave Clock --- 完成形
• アルファ値で視覚化された2Dパーリンノイズ
• さまざまな大きさの正方形で視覚化された2Dパーリンノイズ
• 線の回転で視覚化された2Dパーリンノイズ
• 線の回転で視覚化された2Dパーリンノイズをアニメーション
• ふんわりした小さい雲のような2Dパーリンノイズ

Note

数学

• ベクトル
• 行列
• クォータニオン
• 座標系
• 座標空間

グラフィックス

• 光とオブジェクトの相互作用
• テクスチャ
• メッシュ
• ライティング

画像処理

• mix-blend-mode比較考察