go back to Monkey Circus


GLSL を勉強するページです。




"bon 3" 制作中。
2021/03/06
・制作中。



"bon 2"
2021/03/04
・CORS 制限対策のため、
glb ファイルを Base64 にして、
Data URI scheme。

2021/03/03
・三人で輪踊りにした。

2021/03/02
・分散シャドウマップ VSM は、
iPad で表示できなかったので、
PCFSoftShadowMap にした。
・normal を含まない物体で、
影を受けるためには、
computeVertexNormals() が必要。
・セルフシャドウのモアレを防ぐ
ためには、light の shadow.bias
を微調整。
・DPR 上げてみた。



"bon"
2021/02/24
・BML は、炭坑節以外の曲の振付
のことも考慮して設計。

・パラメータを変えれば踊り手の
個性が出せるようにした。

2021/02/22
・足の振付。余弦定理。

・BML は、実際の動きではなく、
人間の感覚に近い形で記述。

2021/02/20
・ヨナ抜き音階は、ファとシが無い。

2021/02/18
・手の振付。

2021/02/14
・手を上げた時に手首が出る。

・動き始めと終わりは裏拍。
おもての拍は通過点。

2021/02/06
・盆譜の解析を時分割化。

2021/01/25
・盆踊りの振付を記述する言語、
"BML" を考案した。振付の単位を
盆譜と呼ぶことにした。

・炭坑節を踊る。



"vitae"
2021/01/22
・だいぶ入力したので完成とする。

・五反田の電波ビルの前で考案した。




"oto 5"
2021/01/21
・フォルマント合成で炭坑節を歌う。
ムリムリ母音のみで。

・歌声の記述は MML に混ぜ込んだ。

・浴衣(ゆかた)で、
初音ミクのコスプレをしている
人物を入れた。左前…。



"oto 4"
2021/01/19
・ひとまず、フォルマント合成を
入れた。

・"Oh, yeah." と発音しています。



"oto 3"
2021/01/15
・ドラム音追加。旋律はのこぎり波。

・のちに、フォルマント合成を入れ
たいと思っているものの、GPU で
IIR ができる気がしないので
波形合成は全部 js にした。



"ami 2"
2021/01/07
・レインボーで。



"ami"
2021/01/06
・網点。(あみてん)



"kin"
2021/01/05
・24万ポリゴン。

・市松模様は和風。



"oto 2"
2021/01/02
・ループする瞬間、クリックノイズが
出ないように、ゼロクロス。
音量についてもループ。

・サスペンド時と、レジューム時の、
ノイズは消すことができなかった。

2021/01/01
・正弦波にした。色バリにした。

・プチプチ音が出ないように、
各フレームの頭の位相を GPU に
渡し、音量は瞬間的に変えないで
60 分の 1 秒かけて変化させて、
波形がずっと繋がるようにした。



"oto"
2020/12/30
・30 年前を思い出しながら MML。

・MML で用意した楽譜を、js で 60
分の 1 秒単位のデータに展開して
おいてさらに GPU で 48000 Hz
か 44100 Hz 程度に展開。
もちろん矩形波で。PSG 風。
懐かしすぎ。
メロディはデチューンで。

・スケーターズワルツ、
けっきょく南極大冒険。

・iOS のためにタッチを要求。

・アクリル板ぽく見えるシェーダを
書いた。

・PointLight が 24 個ぐらい以上
あると、iPad で表示できない
みたいだったので減らした。



"ferro 2"
2020/12/23
・反応拡散系をイキケイで。

・カクレクマノミ、ベニテングタケ。



"young 2"
2020/12/23
・渦。

・心理テスト、何色が強く見えるか。



"mb 2"
2020/12/23
・メタボールをイキケイで。

・斜線、版ズレ。

・gl_PointSize は、MacBook Pro
では 256 まで。iPhone や iPad
や iMac ではもっと大きくできる。



"vinyl 2"
2020/12/20
・核の数、500。
ボロノイのための texture2D の回数
は、通常の方法では、1フレーム
あたり 1億3000万回ぐらいだった
ところ、アルゴリズムを改良
(座標で区分け) したら、1200万回
ぐらいですむようになったので
GPU が熱くならなくなった。

・インデックスの格納は、
リトルエンディアン。
私はザイログ畑なので。

・GLSL は円形にも向いている。



"for S"
2020/12/17
・Mac OS X Leopard のように。


・圧力項なし。

・ここ十数年パソコンが浮動小数点
のものに思えていたけど、
GLSL をやっていると、やっぱり
デジタルだったんだと
思い直せるので安心する。



"fro"
2020/12/13
・ナビエストークス方程式も、
セミラグランジュ法も、
分からないけど、
要はこういうことかな?と、
想像しながらやってみた。

・格子法の流体。

・to and fro



"aka 2"
2020/12/10
・LiquidFun の流体をイキケイで。



"aka"
2020/12/08
・パーティクルが動いている方向に
伸びるようにした。

・閼伽。



"young"
2020/12/03
・THREE.MeshNormalMaterial で、
お手軽にカラフル。と思ったら、
フォグが効かなかったので、
フォグ付きで、色味シフトもできる
シェーダを書いた。

・通常の THREE.MeshNormal
Material の場合は、こんな色。




"picto 2"
2020/11/30
・Instagram のアイコンのように。


・まるくなったり平行になったり
するグラデーション。



"picto"
2020/11/29
・Tik Tok のアイコンのように。


・版ズレ、ゆがみ。



"nez"
2020/11/28
・readRenderTargetPixels() で、
GPGPU の演算結果を取得して、
オブジェクトの座標に使用。

・最新版の glTF ローダは、CORS
制限にひっかかるみたい(?)
なので古いバージョンを細工した。
module てなに?

・ガイコツは、以前 "skull" のために
作ってあったものを流用。



"blur"
2020/11/25
・ガウシアンぼかし。
モザイクぼかし。

・アニメーションを数式で補間。

・THREE.InstancedMesh で、
放射状の形状を自動的に作る。

・THREE.MeshPhongMaterial で、
ツヤ感を出す。

・THREE.HemisphereLight で、
陰側にも色付け。



"trypo"
2020/11/23
・より気持ち悪く見えるよう微調整。

2020/11/21
・trypophobia トライポフォビア。

・グラデーションを数式で補間。

・さらに GPGPU。すべての核の
組合せについて距離を計算して、
最短の相手を見つける。

・これぐらい計算量を増やすと
GPU が熱くなってくる。



"vinyl"
2020/11/19
・まさか頂点の計算をしないで
ボロノイ図を描けるとは。
GPU まかせ。ラクすぎ。

・加えて、核を動かすのも、GPU に
ぜんぶ丸投げで GPGPU。

・Uint8Array をやっていると、
Z80 のマシン語を思い出す。

・嶋正利氏。西和彦氏。



"zhu"
2020/11/16
・2D物理。液体の中に浮遊する物体。

・GLSL は グラデーションに向いて
いる。半透明にも。

・赤いストローは春水堂のイメージ。


・珍珠奶茶。



"mai 2"
2020/11/14
・2D物理。

・THREE.LineSegments で
DebugDraw を表示。

・iPad では、Uint8ClampedArray が
使えないので、(古い iPad だけ?)
自前で clamp して Uint8Array に。



"mai"
2020/11/13
・LiquidFun の流体を、
できるだけ簡素なコードで表示。

・メタボールで滑らかな液体表現。

・"Sprinkle" の表現もできそう。




"ferro"
2020/11/08
・THREE.FloatType は、iOS では
使用できない。
THREE.HalfFloatType にすれば、
大丈夫だけど iPhone と iPad で、
なぜか結果が異なるので、
THREE.UnsignedByteType
にした。整数好き。8ビット。

2020/11/06
・reaction-diffusion system
反応拡散系。

・ferrofluid 磁性流体ぽく。



"kuma"
2020/11/01
・比較(明)ブレンド。
フチだけ光と陰を付ける。

・偏微分、dFdx()・dFdy() が
とても便利。

・"Where's My Mickey" の表現も
できそう。


・隈笹。隈取。



"mb"
2020/11/01
・メタボール。

・中心からの距離の二乗に反比例した
濃度のボールたちを用意して、
加算ブレンドして、しきい値で
色分け。



"post"
2020/10/30
・ポストプロセッシング。



"osr"
2020/10/30
・オフスクリーンレンダリング。






"panels 2"
2020/09/14
・GL のために用意した Base64 の
画像を、ページ上にも表示。
"panels"、"textured" も同様に。

2020/08/28
・テクスチャ2枚重ね。

・自前でアルファブレンディング。



"panels"
2020/08/26
・パネルの配置を、Uint8Array の
データテクスチャとして渡す。
たった1枚の平面に全部のパネル
を、いっぺんに描画してくれる。
楽チンすぎ。

・レティナでも高速。






"clouded pink"
2020/06/17
・キューブの面に貼付け。

・css を別ファイルに分離。
いままで避けていた。



"textured"
2020/01/07
・png 画像を Base64 で
テクスチャとして読込んで、
フラグメントシェーダで使用。

・2枚のテクスチャを渡す。



"clouded"
2019/12/29
・Perlin noise、Simplex noise。

2019/12/28
・shadertoy.com のソースコードを
Three.js で実行。

・レイマーチング。



"blinker"
2019/12/16
shadertoy.com に、感動。
(たぶん初めて見た。)

・フラグメントシェーダ。