GLSL を勉強するページです。
"nez 3"
2021/09/19
・イルカのようなピッチ方向の動き。
2021/09/18
・ベクトルの内積と外積を勉強した。
動きが滑らかになった。
2021/09/17
・Craig W. Reynolds 先生 の "Boids"
に敬意を込めて。
・イルカのようなピッチ方向の動き。
2021/09/18
・ベクトルの内積と外積を勉強した。
動きが滑らかになった。
2021/09/17
・Craig W. Reynolds 先生 の "Boids"
に敬意を込めて。
"vinyl 3"
2021/09/13
・ボロノイ図を丸く描画する方法、
アプレット時代からベジェ曲線を
使って何度も挑戦してきたけど、
辺の数が変化した瞬間にチラつい
たり、短い辺があると鋭角になっ
てしまったり…。
・今回の方法は、GPU の「力技」で
多角形を「ぼかし」で丸めるだけ！
数学的なことは一切考えずに、
超簡単に丸くできる。
・Boids 的なステアリングも入れた。
・ボロノイ図を丸く描画する方法、
アプレット時代からベジェ曲線を
使って何度も挑戦してきたけど、
辺の数が変化した瞬間にチラつい
たり、短い辺があると鋭角になっ
てしまったり…。
・今回の方法は、GPU の「力技」で
多角形を「ぼかし」で丸めるだけ！
数学的なことは一切考えずに、
超簡単に丸くできる。
・Boids 的なステアリングも入れた。
"fro 4"
2021/09/11
・ピクトグラムをけむにまく。
・ラテアートもできそう。
・ピクトグラムをけむにまく。
・ラテアートもできそう。
"fro 3"
2021/09/01
・イキケイにしてみた。
・地下アイドルのミュージックビデオ
のエヘクトみたい。村上隆さんの
液体表現みたい(？)
・イキケイにしてみた。
・地下アイドルのミュージックビデオ
のエヘクトみたい。村上隆さんの
液体表現みたい(？)
"fro 2"
2021/08/29
・ブルームと、天使のはしごを追加
した。一匹の魚が不思議な世界
に迷い込んだみたい。
・毎日、金魚とミナミヌマエビの
水槽を掃除しながら homogeneous
な流体に想いを馳せている。
2021/08/28
・浮動小数点テクスチャを勉強した。
iOS では、OES_texture_float は
あるので texture2D 等できるけど、
WEBGL_color_buffer_float がない
ので書込みは無理かと思ったけど、
できた。ケチって half float にして
いたから動いただけなのかも。
・洗剤やシャンプーのパッケージが
美しくて見とれてしまう。
・ブルームと、天使のはしごを追加
した。一匹の魚が不思議な世界
に迷い込んだみたい。
・毎日、金魚とミナミヌマエビの
水槽を掃除しながら homogeneous
な流体に想いを馳せている。
2021/08/28
・浮動小数点テクスチャを勉強した。
iOS では、OES_texture_float は
あるので texture2D 等できるけど、
WEBGL_color_buffer_float がない
ので書込みは無理かと思ったけど、
できた。ケチって half float にして
いたから動いただけなのかも。
・洗剤やシャンプーのパッケージが
美しくて見とれてしまう。
"cou 2"
2021/08/26
・紙に弾力を持たせた。
2021/08/22
・InstancedMesh なので、花びらを
一枚だけ操作すれば全部が動く。
2021/08/20
・紙で実際にいろいろ折ってみた。
・道端の花を、つい観察してしまう。
・ずっと気になっていた、SK-II の
2015年春のスペシャルパッケージ
を真似させていただきました。
・紙に弾力を持たせた。
2021/08/22
・InstancedMesh なので、花びらを
一枚だけ操作すれば全部が動く。
2021/08/20
・紙で実際にいろいろ折ってみた。
・道端の花を、つい観察してしまう。
・ずっと気になっていた、SK-II の
2015年春のスペシャルパッケージ
を真似させていただきました。
"nez 2"
2021/08/18
・フォースフィールド。
遠心力。表面張力。ドットモアレ。
ウイルスの顕微鏡写真ぽく。
2200 パーティクル程度。
・一匹だけスイミー。
・当初は桔梗信玄餅のパッケージぽく
するつもりだった。
・フォースフィールド。
遠心力。表面張力。ドットモアレ。
ウイルスの顕微鏡写真ぽく。
2200 パーティクル程度。
・一匹だけスイミー。
・当初は桔梗信玄餅のパッケージぽく
するつもりだった。
"mb 5"
2021/08/16
・スクリーントーン。
・一色だけ黒い部分は、金ラメ入り
ラバライトのイメージ。
・スクリーントーン。
・一色だけ黒い部分は、金ラメ入り
ラバライトのイメージ。
"mb 4"
2021/08/14
・色分け。
・五味太郎さん風の色づかい。
sRGB の色空間に収まらない。
・色分け。
・五味太郎さん風の色づかい。
sRGB の色空間に収まらない。
"mb 3"
2021/08/13
・モコモコ。
・乱数を加えた重力井戸テクスチャ
を、texture2D でリニア補間して、
アクセントフィールドも加味した。
・モコモコ。
・乱数を加えた重力井戸テクスチャ
を、texture2D でリニア補間して、
アクセントフィールドも加味した。
"cou"
2021/08/12
・1万枚の桜の花びらが舞う。
・ナカメアルカスでいつも流れて
いる映像のイメージ。
・coumarin
2021/08/09
・Float32 を格納するピクセルの vec4
と、GLSL の float を、双方向に
型変換する関数を書いた。
2021/08/08
・Matrix4 の回転行列と、行列どうし
の積について勉強した。
・1万枚の桜の花びらが舞う。
・ナカメアルカスでいつも流れて
いる映像のイメージ。
・coumarin
2021/08/09
・Float32 を格納するピクセルの vec4
と、GLSL の float を、双方向に
型変換する関数を書いた。
2021/08/08
・Matrix4 の回転行列と、行列どうし
の積について勉強した。
"qr 2"
2021/08/07
・グライダー銃とパルサーを入れた。
2021/08/05
・GPGPU の結果を、転送しないで
直接 InstancedMatrix で受け取る。
リトルエンディアン限定なので、
環境によっては動作しないかも。
2021/08/04
・Float32 のビット構造を勉強した。
・グライダー銃とパルサーを入れた。
2021/08/05
・GPGPU の結果を、転送しないで
直接 InstancedMatrix で受け取る。
リトルエンディアン限定なので、
環境によっては動作しないかも。
2021/08/04
・Float32 のビット構造を勉強した。
"qr"
2021/07/27
・Suzanne にした。
2021/07/24
・FOV を徐々に変化させた。
2021/07/22
・GPGPU の結果を、ループで転写
するのではなく、set 命令だけで
THREE.InstancedMesh の
Matrix4 配列に転送した。
・Suzanne にした。
2021/07/24
・FOV を徐々に変化させた。
2021/07/22
・GPGPU の結果を、ループで転写
するのではなく、set 命令だけで
THREE.InstancedMesh の
Matrix4 配列に転送した。
"bon 12"
2021/08/01
・伴奏のベースを入れた。
・振付は盆踊りではなく、動作試験。
2021/07/28
・"Ievan Polkka" を何度も聴いて
歌詞を書き取った。
2021/07/25
・ト音記号はソ、ヘ音記号はファ、
の位置から書きはじめる。
2021/07/20
・スワイプで回せるようにした。
・肩の euler を reorder。←便利。
2021/07/17
・踊り手の前方に妄想した「田」の字
に向けて、ひじも含めた手全体の
軸を貫通させる方式を考案した。
2021/07/10
・ずっと悩み続けていた肩の回転が
解決。脳内がモルワイデ図法。
2021/07/08
・電子キーボードを弾きまくり。
でも囃子詞の音階が分からない。
民謡・律・都節・琉球。
・伴奏のベースを入れた。
・振付は盆踊りではなく、動作試験。
2021/07/28
・"Ievan Polkka" を何度も聴いて
歌詞を書き取った。
2021/07/25
・ト音記号はソ、ヘ音記号はファ、
の位置から書きはじめる。
2021/07/20
・スワイプで回せるようにした。
・肩の euler を reorder。←便利。
2021/07/17
・踊り手の前方に妄想した「田」の字
に向けて、ひじも含めた手全体の
軸を貫通させる方式を考案した。
2021/07/10
・ずっと悩み続けていた肩の回転が
解決。脳内がモルワイデ図法。
2021/07/08
・電子キーボードを弾きまくり。
でも囃子詞の音階が分からない。
民謡・律・都節・琉球。
"bon 11"
2021/06/29
・エリックカール風のテクスチャを
Photoshop で描いた。
2021/06/27
・「鍵盤」を付け加えた。
2021/06/26
・「さくら音頭」を踊る。耳コピ
採譜。七・七・九の部分は、
音階が分からず割愛した。
秋田音頭や会津磐梯山も調べた。
2021/06/25
・エリックカール風のテクスチャを
紙に描いてみた。
・エリックカール風のテクスチャを
Photoshop で描いた。
2021/06/27
・「鍵盤」を付け加えた。
2021/06/26
・「さくら音頭」を踊る。耳コピ
採譜。七・七・九の部分は、
音階が分からず割愛した。
秋田音頭や会津磐梯山も調べた。
2021/06/25
・エリックカール風のテクスチャを
紙に描いてみた。
"bon 10"
2021/06/22
・胴・腕・脚の長さを変えられる
ようにした。子孫ボーンの長さ
には影響しないように、直後に
逆倍率のノードをはさみ込んだ。
・逆 quaternion で world の回転を
ローカルに変換した。
2021/06/17
・KOSÉ の広告の NiziU の衣装を
真似させていただきました。
2021/06/15
・肩の回転は 4 軸なので、オイラー
だと計算が複雑になるので
quaternion にした。
2021/06/12
・テクスチャ入りの glb ファイルは、
CORS 制限に引っかかるので、
テクスチャを使いたい場合は、
JSON にする必要があると思って
いたけど、別ファイルで読込んで
マテリアルに入れれば大丈夫だと
分かった。Base64 化は必要。
・胴・腕・脚の長さを変えられる
ようにした。子孫ボーンの長さ
には影響しないように、直後に
逆倍率のノードをはさみ込んだ。
・逆 quaternion で world の回転を
ローカルに変換した。
2021/06/17
・KOSÉ の広告の NiziU の衣装を
真似させていただきました。
2021/06/15
・肩の回転は 4 軸なので、オイラー
だと計算が複雑になるので
quaternion にした。
2021/06/12
・テクスチャ入りの glb ファイルは、
CORS 制限に引っかかるので、
テクスチャを使いたい場合は、
JSON にする必要があると思って
いたけど、別ファイルで読込んで
マテリアルに入れれば大丈夫だと
分かった。Base64 化は必要。
"bon 9"
2021/06/11
・昨日の問題の原因は、Web Audio
の AudioParam インターフェイス
をいじる度に、その指示が蓄積
していくことだと分かった。
オートメーションしないように
〜AtTime() 系を避けて、value に
じかに値を代入しても同じ結果。
cancelScheduledValues( 0) で
直った。Web Audio のバグか。
2021/06/10
・AudioBufferSourceNode を
ループ再生していると、だんだん
CPU の負荷が上がってきて、
音にディストーションがかかる。
ページをリロードすれば直る。
2021/06/09
・グミっぽい人物をモデリングした。
2021/06/05
・初めてボーンを使った。
Blender の Vertex Groups が、
three.js の SkinnedMesh になる。
・昨日の問題の原因は、Web Audio
の AudioParam インターフェイス
をいじる度に、その指示が蓄積
していくことだと分かった。
オートメーションしないように
〜AtTime() 系を避けて、value に
じかに値を代入しても同じ結果。
cancelScheduledValues( 0) で
直った。Web Audio のバグか。
2021/06/10
・AudioBufferSourceNode を
ループ再生していると、だんだん
CPU の負荷が上がってきて、
音にディストーションがかかる。
ページをリロードすれば直る。
2021/06/09
・グミっぽい人物をモデリングした。
2021/06/05
・初めてボーンを使った。
Blender の Vertex Groups が、
three.js の SkinnedMesh になる。
"bon 8"
2021/05/30
・パ行、タ行、の破裂音を入れた。
ビートボックスぽくなった。
歌声も楽器の音も全部プログラム
で波形を生成している。
(サンプリング音源不使用。)
2021/05/29
・「ドンパン節」を踊る。
2021/05/27
・熱対策でポリゴン数を削減した。
・ポストプロセスでクロマキー的に
プロシージャルな模様を入れた。
星条旗ぽくした。
・テクスチャが物体とともに移動
せず、スクリーン座標に従うのは
"Eggggg" ぽい。
・パ行、タ行、の破裂音を入れた。
ビートボックスぽくなった。
歌声も楽器の音も全部プログラム
で波形を生成している。
(サンプリング音源不使用。)
2021/05/29
・「ドンパン節」を踊る。
2021/05/27
・熱対策でポリゴン数を削減した。
・ポストプロセスでクロマキー的に
プロシージャルな模様を入れた。
星条旗ぽくした。
・テクスチャが物体とともに移動
せず、スクリーン座標に従うのは
"Eggggg" ぽい。
"bon 7"
2021/05/24
・ナ行、マ行、ラ行、を発声できる
ようにした。
・ブライスに敬意を込めて。
代官山 Junie Moon を連日訪れた。
2021/05/22
・「東京音頭」を踊る。
2021/05/20
・X→Y→Z→X だったジンバルを、
X→Z→Y→X に変えた。
2021/05/19
・正十二面体から変形して、いちご
をモデリングした。
2021/05/16
・肩に 4 自由度のジンバルを組込む
機構を考案した。
パチッと嵌合させるエラストマー
のインジェクション成型を妄想。
・ナ行、マ行、ラ行、を発声できる
ようにした。
・ブライスに敬意を込めて。
代官山 Junie Moon を連日訪れた。
2021/05/22
・「東京音頭」を踊る。
2021/05/20
・X→Y→Z→X だったジンバルを、
X→Z→Y→X に変えた。
2021/05/19
・正十二面体から変形して、いちご
をモデリングした。
2021/05/16
・肩に 4 自由度のジンバルを組込む
機構を考案した。
パチッと嵌合させるエラストマー
のインジェクション成型を妄想。
"bon 6"
2021/05/15
・音階をシフトできるようにした。
・伴奏を入れた。
2021/05/14
・ひざでためられるようにした。
・手をグーにして、いいねができる
ようにした。可動部を増やす度、
コードがどんどん冗長に。
2021/05/12
・「ビューティフルサンデー」
を踊る。
・New Order の "Blue Monday"
みたいな太鼓を入れた。
・腕の向きの偏微分で手首を
ヒラヒラさせた。
・音階をシフトできるようにした。
・伴奏を入れた。
2021/05/14
・ひざでためられるようにした。
・手をグーにして、いいねができる
ようにした。可動部を増やす度、
コードがどんどん冗長に。
2021/05/12
・「ビューティフルサンデー」
を踊る。
・New Order の "Blue Monday"
みたいな太鼓を入れた。
・腕の向きの偏微分で手首を
ヒラヒラさせた。
"bon 5"
2021/05/09
・7人に増やした。古いマシンでは
歌も動きも遅〜くなって情趣。
・カメラも動かした。
2021/05/08
・Diablada の衣装をモデリングした。
・Java アプレットぽく見せるため、
わざと明暗なしで、ローレゾで。
2021/05/04
・Ken Perlin 先生の "Violet" に敬意を
込めて。
・7人に増やした。古いマシンでは
歌も動きも遅〜くなって情趣。
・カメラも動かした。
2021/05/08
・Diablada の衣装をモデリングした。
・Java アプレットぽく見せるため、
わざと明暗なしで、ローレゾで。
2021/05/04
・Ken Perlin 先生の "Violet" に敬意を
込めて。
"bon 4"
2021/05/02
・MML・BML にタイを追加した。
2021/05/01
・足を持ち上げられるようにした。
・やぐら方向に動けるようにした。
2021/04/30
・手首を曲げられるようにした。
2021/04/29
・「大東京音頭」を踊る。ニ長調。
・小島ゆみこ先生の踊りを参考に
させていただきました。
2021/04/27
・ハ行、を発声できるようにした。
2021/04/23
・盆踊りで手拍子を打つのは大切
だと思うのでしっかり作った。
・回転軸のことばかり考えている。
・コロナのせいで1年以上、盆踊りを
みていないけれど、上手な人の
動きを思い出しながら作っている。
2021/04/18
・ガイコツをモデリングした。
・MML・BML にタイを追加した。
2021/05/01
・足を持ち上げられるようにした。
・やぐら方向に動けるようにした。
2021/04/30
・手首を曲げられるようにした。
2021/04/29
・「大東京音頭」を踊る。ニ長調。
・小島ゆみこ先生の踊りを参考に
させていただきました。
2021/04/27
・ハ行、を発声できるようにした。
2021/04/23
・盆踊りで手拍子を打つのは大切
だと思うのでしっかり作った。
・回転軸のことばかり考えている。
・コロナのせいで1年以上、盆踊りを
みていないけれど、上手な人の
動きを思い出しながら作っている。
2021/04/18
・ガイコツをモデリングした。
"bon 3"
2021/04/14
・まだいろいろおかしいけど、
ここで完成とする。完成。
2021/04/13
・「よこはまアラメヤ音頭」を
最後まで踊れるようになった。
変ホ長調。
2021/04/10
・チ、ツ、を発声できるようにした。
・長い AudioBufferSourceNode の
再生に合わせて動くのではなく、
音も動きもフレーム主導にした。
・フォルマント合成を、Web Audio に
ぜんぶ任せた。マキシマイズも
してくれるし、高速。楽チン。
2021/04/04
・パンダのオセロの、あの親子が
盆踊りの練習を始めました。
2021/03/21
・なんと、Web Audio の biquad filter
を使えば、自力で IIR する必要
ないんじゃん。
2021/03/14
・カ行、サ行、を発声できるように
した。
2021/03/07
・MML・BML 内にループも記述。
解析強化。
・まだいろいろおかしいけど、
ここで完成とする。完成。
2021/04/13
・「よこはまアラメヤ音頭」を
最後まで踊れるようになった。
変ホ長調。
2021/04/10
・チ、ツ、を発声できるようにした。
・長い AudioBufferSourceNode の
再生に合わせて動くのではなく、
音も動きもフレーム主導にした。
・フォルマント合成を、Web Audio に
ぜんぶ任せた。マキシマイズも
してくれるし、高速。楽チン。
2021/04/04
・パンダのオセロの、あの親子が
盆踊りの練習を始めました。
2021/03/21
・なんと、Web Audio の biquad filter
を使えば、自力で IIR する必要
ないんじゃん。
2021/03/14
・カ行、サ行、を発声できるように
した。
2021/03/07
・MML・BML 内にループも記述。
解析強化。
"bon 2"
2021/03/04
・CORS 制限対策のため、
glb ファイルを Base64 にして、
Data URI scheme で読込んだ。
2021/03/03
・三人で輪踊りにした。一つの BML
で、三人の個性を変えて踊る。
・厚澄会様の炭坑節を参考に
させていただきました。
2021/03/02
・分散シャドウマップ VSM は、
古い iPad で表示できなかったの
で PCFSoftShadowMap にした。
・データに normal が無い場合、
影を受けるためには、
computeVertexNormals() が必要。
・セルフシャドウのモアレを防ぐ
ためには、light の shadow.bias
を微調整。
・DPR 上げてみた。
・CORS 制限対策のため、
glb ファイルを Base64 にして、
Data URI scheme で読込んだ。
2021/03/03
・三人で輪踊りにした。一つの BML
で、三人の個性を変えて踊る。
・厚澄会様の炭坑節を参考に
させていただきました。
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
・MML の展開を一気に処理すると
1秒間ぐらい動作が固まるので、
時分割化した。
2021/01/25
・盆踊りの振付を記述する言語、
"BML" を考案した。振付の単位を
盆符と呼ぶことにした。
・「炭坑節」を踊る。
・BML は、炭坑節以外の振付のこと
も考慮して設計している。
・パラメータを変えれば踊り手の
個性が出せるようにした。
2021/02/22
・足の振付を入れた。余弦定理。
・BML は、実際の動きではなく、
人間の感覚に近い形で記述。
2021/02/20
・ヨナ抜き音階は、ファとシが無い。
2021/02/18
・手の振付を入れた。
2021/02/14
・手を上げた時に、袖がスライドする
ようにした。
・動き始めと終わりは裏拍。
おもての拍は通過点。
2021/02/06
・MML の展開を一気に処理すると
1秒間ぐらい動作が固まるので、
時分割化した。
2021/01/25
・盆踊りの振付を記述する言語、
"BML" を考案した。振付の単位を
盆符と呼ぶことにした。
・「炭坑節」を踊る。
"vitae"
sequel - 2021/04/17
・祝日追加。UI 改良。
2021/01/22
・だいぶ入力したので完成とする。
・五反田の電波ビルの前で考案した。
・祝日追加。UI 改良。
2021/01/22
・だいぶ入力したので完成とする。
・五反田の電波ビルの前で考案した。
"oto 5"
2021/01/21
・フォルマント合成で炭坑節を歌う。
ムリムリ母音のみで。
・歌声の記述は MML に混ぜ込んだ。
・浴衣(ゆかた)で、
初音ミクのコスプレをしている
人物を入れた。左前…。
・daniwell さんの動画を参考に
させていただきました。
・@riseriseri37 さんの造形を参考に
させていただきました。
・フォルマント合成で炭坑節を歌う。
ムリムリ母音のみで。
・歌声の記述は MML に混ぜ込んだ。
・浴衣(ゆかた)で、
初音ミクのコスプレをしている
人物を入れた。左前…。
・daniwell さんの動画を参考に
させていただきました。
・@riseriseri37 さんの造形を参考に
させていただきました。
"oto 4"
2021/01/19
・ひとまず、フォルマント合成を
入れた。
・"Oh, yeah." と発音しています。
・ひとまず、フォルマント合成を
入れた。
・"Oh, yeah." と発音しています。
"oto 3"
2021/01/15
・ドラム音追加。旋律はのこぎり波。
・のちに、フォルマント合成を入れ
たいと思っているものの、GPU で
IIR ができる気がしないので
波形合成は全部 js にした。
・ドラム音追加。旋律はのこぎり波。
・のちに、フォルマント合成を入れ
たいと思っているものの、GPU で
IIR ができる気がしないので
波形合成は全部 js にした。
"ami 2"
2021/01/07
・レインボーで。
・レインボーで。
"ami"
2021/01/06
・網点。(あみてん)
・網点。(あみてん)
"kin"
2021/01/05
・24万ポリゴン。
・市松模様は和風。
・24万ポリゴン。
・市松模様は和風。
"oto 2"
2021/01/02
・ループする瞬間、クリックノイズが
出ないように、ゼロクロス。
音量についてもループ。
・サスペンド時と、レジューム時の、
ノイズは消すことができなかった。
2021/01/01
・正弦波にした。色バリにした。
・プチプチ音が出ないように、
各フレームの頭の位相を GPU に
渡し、音量は瞬間的に変えないで
60 分の 1 秒かけて変化させて、
波形がずっと繋がるようにした。
・ループする瞬間、クリックノイズが
出ないように、ゼロクロス。
音量についてもループ。
・サスペンド時と、レジューム時の、
ノイズは消すことができなかった。
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 で表示できな
かったので減らした。
・30 年前を思い出しながら MML。
・MML で用意した楽譜を、js で 60
分の 1 秒単位のデータに展開して
おいてさらに GPU で 48000 Hz
か 44100 Hz 程度に展開。
もちろん矩形波。PSG 風。
懐かしすぎ。
メロディはデチューンで。
・スケーターズワルツ、
けっきょく南極大冒険。
・iOS のためにタッチを要求。
・アクリル板ぽく見えるシェーダを
書いた。
・PointLight を 24 個ぐらい以上に
すると、古い iPad で表示できな
かったので減らした。
"ferro 2"
sequel - 2021/08/16 update
2020/12/23
・反応拡散系をイキケイで。
・カクレクマノミ、ベニテングタケ。
2020/12/23
・反応拡散系をイキケイで。
・カクレクマノミ、ベニテングタケ。
"young 2"
2020/12/23
・渦。
・心理テスト、何色が強く見えるか。
・渦。
・心理テスト、何色が強く見えるか。
"mb 2"
sequel - 2021/08/13 ・THREE.Points やめて平面に。
2020/12/23
・メタボールをイキケイで。
・斜線、版ズレ。
・古い MacBook Pro で gl_PointSize
を 256 より大きくできない。
iPhone や、古い iPad や iMac では
もっと大きくできる。
2020/12/23
・メタボールをイキケイで。
・斜線、版ズレ。
・古い MacBook Pro で gl_PointSize
を 256 より大きくできない。
iPhone や、古い iPad や iMac では
もっと大きくできる。
"vinyl 2"
sequel - 2021/09/12 update
2020/12/20
・核の数、500。
ボロノイのための texture2D の回数
は、通常の方法では、1フレーム
あたり 1億3000万回ぐらいだった
ところ、アルゴリズムを改良
(座標で区分け) したら、1200万回
ぐらいですむようになったので
GPU が熱くならなくなった。
・インデックスの格納は、
リトルエンディアン。
私はザイログ畑なので。
・GLSL は円形にも向いている。
2020/12/20
・核の数、500。
ボロノイのための texture2D の回数
は、通常の方法では、1フレーム
あたり 1億3000万回ぐらいだった
ところ、アルゴリズムを改良
(座標で区分け) したら、1200万回
ぐらいですむようになったので
GPU が熱くならなくなった。
・インデックスの格納は、
リトルエンディアン。
私はザイログ畑なので。
・GLSL は円形にも向いている。
"for S"
2020/12/17
・Mac OS X Leopard のように。
・圧力項なし。
・ここ十数年、パソコンがデジタル
ではなくなって浮動小数点のもの
になってしまった感じがしていた
けど、GLSL を扱っていると、
やっぱりデジタルだったんだと
思えて安心する。
・Mac OS X Leopard のように。
・圧力項なし。
・ここ十数年、パソコンがデジタル
ではなくなって浮動小数点のもの
になってしまった感じがしていた
けど、GLSL を扱っていると、
やっぱりデジタルだったんだと
思えて安心する。
"fro"
2020/12/13
・ナビエストークス方程式も、
セミラグランジュ法も、
分からないけれど、
要はこういうことかな？と、
想像しながらやってみた。
・格子法の流体。
・to and fro
・ナビエストークス方程式も、
セミラグランジュ法も、
分からないけれど、
要はこういうことかな？と、
想像しながらやってみた。
・格子法の流体。
・to and fro
"aka 2"
2020/12/10
・LiquidFun の流体をイキケイで。
・LiquidFun の流体をイキケイで。
"aka"
2020/12/08
・パーティクルが動いている方向に
伸びるようにした。
・閼伽。
・パーティクルが動いている方向に
伸びるようにした。
・閼伽。
"young"
2020/12/03
・THREE.MeshNormalMaterial で、
お手軽にカラフル。と思ったら、
フォグが効かなかったので、
フォグ付きで、色味シフトもできる
シェーダを書いた。
・通常の THREE.MeshNormal
Material の場合は、こんな色。
・THREE.MeshNormalMaterial で、
お手軽にカラフル。と思ったら、
フォグが効かなかったので、
フォグ付きで、色味シフトもできる
シェーダを書いた。
・通常の THREE.MeshNormal
Material の場合は、こんな色。
"picto 2"
2020/11/30
・Instagram のアイコンのように。
・まるくなったり平行になったり
するグラデーション。
・Instagram のアイコンのように。
・まるくなったり平行になったり
するグラデーション。
"picto"
2020/11/29
・Tik Tok のアイコンのように。
・版ズレ、ゆがみ。
・Tik Tok のアイコンのように。
・版ズレ、ゆがみ。
"nez"
sequel - 2021/08/18 update
2020/11/28
・readRenderTargetPixels() で、
GPGPU の演算結果を取得して、
オブジェクトの座標に使用。
・最新版の glTF ローダは、CORS
制限にひっかかるみたい(？)
なので古いバージョンを細工した。
module てなに？
・ガイコツは、以前 "skull" のために
作ってあったものを流用。
2020/11/28
・readRenderTargetPixels() で、
GPGPU の演算結果を取得して、
オブジェクトの座標に使用。
・最新版の glTF ローダは、CORS
制限にひっかかるみたい(？)
なので古いバージョンを細工した。
module てなに？
・ガイコツは、以前 "skull" のために
作ってあったものを流用。
"blur"
2020/11/25
・ガウシアンぼかし。
モザイクぼかし。
・アニメーションを数式で補間。
・THREE.InstancedMesh で、
放射状の形状を自動的に作る。
・THREE.MeshPhongMaterial で、
ツヤ感を出す。
・THREE.HemisphereLight で、
陰側にも色付け。
・ガウシアンぼかし。
モザイクぼかし。
・アニメーションを数式で補間。
・THREE.InstancedMesh で、
放射状の形状を自動的に作る。
・THREE.MeshPhongMaterial で、
ツヤ感を出す。
・THREE.HemisphereLight で、
陰側にも色付け。
"trypo"
2020/11/23
・より気持ち悪く見えるよう微調整。
2020/11/21
・trypophobia トライポフォビア。
・グラデーションを数式で補間。
・さらに GPGPU。すべての核の
組合せについて距離を計算して、
最短の相手を見つける。
・これぐらい計算量を増やすと
GPU が熱くなってくる。
・より気持ち悪く見えるよう微調整。
2020/11/21
・trypophobia トライポフォビア。
・グラデーションを数式で補間。
・さらに GPGPU。すべての核の
組合せについて距離を計算して、
最短の相手を見つける。
・これぐらい計算量を増やすと
GPU が熱くなってくる。
"vinyl"
sequel - 2021/09/12 update
2020/11/19
・まさか辺や交点の計算をしないで
ボロノイ図を描けるとは。
GPU まかせ。ラクすぎ。
・加えて、核を動かすのも、GPU に
ぜんぶ丸投げで GPGPU。
・Uint8Array を扱っていると、
Z80 のマシン語を思い出す。
・嶋正利氏。西和彦氏。
2020/11/19
・まさか辺や交点の計算をしないで
ボロノイ図を描けるとは。
GPU まかせ。ラクすぎ。
・加えて、核を動かすのも、GPU に
ぜんぶ丸投げで GPGPU。
・Uint8Array を扱っていると、
Z80 のマシン語を思い出す。
・嶋正利氏。西和彦氏。
"zhu"
"mai 2"
sequel - 2021/08/16 update
2020/11/14
・2D物理。
・THREE.LineSegments で
DebugDraw を表示。
・古い iPad では Uint8ClampedArray
が使えなかったので、自分で
clamp した値を Uint8Array へ。
2020/11/14
・2D物理。
・THREE.LineSegments で
DebugDraw を表示。
・古い iPad では Uint8ClampedArray
が使えなかったので、自分で
clamp した値を Uint8Array へ。
"mai"
sequel - 2021/08/16 update
2020/11/13
・LiquidFun の流体を、
できるだけ簡素なコードで表示。
・メタボールで滑らかな液体表現。
・"Sprinkle" の表現もできそう。
2020/11/13
・LiquidFun の流体を、
できるだけ簡素なコードで表示。
・メタボールで滑らかな液体表現。
・"Sprinkle" の表現もできそう。
"ferro"
sequel - 2021/08/13 update
2020/11/08
・THREE.FloatType は、iOS では
使用できない。
THREE.HalfFloatType にすれば、
大丈夫だけど iPhone と iPad で、
なぜか結果が異なるので、
THREE.UnsignedByteType
にした。整数好き。8ビット♡
2020/11/06
・reaction-diffusion system
反応拡散系。
・ferrofluid 磁性流体ぽく。
2020/11/08
・THREE.FloatType は、iOS では
使用できない。
THREE.HalfFloatType にすれば、
大丈夫だけど iPhone と iPad で、
なぜか結果が異なるので、
THREE.UnsignedByteType
にした。整数好き。8ビット♡
2020/11/06
・reaction-diffusion system
反応拡散系。
・ferrofluid 磁性流体ぽく。
"kuma"
sequel - 2021/08/13 ・THREE.Points やめて平面に。
2020/11/01
・比較(明)ブレンド。
フチだけ光と陰を付ける。
・偏微分 dFdx()・dFdy() が役立つ。
・"Where's My Mickey" の表現も
できそう。
・隈笹。隈取。
2020/11/01
・比較(明)ブレンド。
フチだけ光と陰を付ける。
・偏微分 dFdx()・dFdy() が役立つ。
・"Where's My Mickey" の表現も
できそう。
・隈笹。隈取。
"mb"
sequel - 2021/08/13
・M1 チップの MacBook Air では、
最大の gl_PointSize が 64 ぐらい
に下げられてしまったみたい
なので、もう THREE.Points は
やめて平面オブジェクトにした。
2020/11/01
・メタボール。
・中心からの距離の二乗に反比例した
濃度のボールを用意して、
加算ブレンドして、しきい値で
色分け。
・M1 チップの MacBook Air では、
最大の gl_PointSize が 64 ぐらい
に下げられてしまったみたい
なので、もう THREE.Points は
やめて平面オブジェクトにした。
2020/11/01
・メタボール。
・中心からの距離の二乗に反比例した
濃度のボールを用意して、
加算ブレンドして、しきい値で
色分け。
"post"
2020/10/30
・ポストプロセッシング。
・ポストプロセッシング。
"osr"
2020/10/30
・オフスクリーンレンダリング。
・オフスクリーンレンダリング。
"panels 2"
2020/09/14
・GL のために用意した Base64 の
画像を、ページ上にも表示。
"panels"、"textured" も同様に。
2020/08/28
・テクスチャ2枚重ね。
・自前でアルファブレンディング。
・GL のために用意した Base64 の
画像を、ページ上にも表示。
"panels"、"textured" も同様に。
2020/08/28
・テクスチャ2枚重ね。
・自前でアルファブレンディング。
"panels"
2020/08/26
・パネルの配置を、Uint8Array の
データテクスチャとして渡す。
たった一枚の平面に全部のパネル
を、いっぺんに描画してくれる。
楽チンすぎ。
・レティナでも高速。
・パネルの配置を、Uint8Array の
データテクスチャとして渡す。
たった一枚の平面に全部のパネル
を、いっぺんに描画してくれる。
楽チンすぎ。
・レティナでも高速。
"clouded pink"
2020/06/17
・キューブの面に貼付け。
・css を別ファイルに分離。
いままで避けていた。
・キューブの面に貼付け。
・css を別ファイルに分離。
いままで避けていた。
"textured"
2020/01/07
・png 画像を Base64 で
テクスチャとして読込んで、
フラグメントシェーダで使用。
・2枚のテクスチャを渡す。
・png 画像を Base64 で
テクスチャとして読込んで、
フラグメントシェーダで使用。
・2枚のテクスチャを渡す。
"clouded"
2019/12/29
・Perlin noise、Simplex noise。
2019/12/28
・shadertoy.com のソースコードを
Three.js で実行。
・レイマーチング。
・Perlin noise、Simplex noise。
2019/12/28
・shadertoy.com のソースコードを
Three.js で実行。
・レイマーチング。
"blinker"