GLSL を勉強するページです。
"bon 5" 制作中。
2021/05/09
・制作中。
2021/05/09
・人数を増やした。
・カメラを動かした。
2021/05/08
・Diablada の衣装をモデリングした。
・わざとローレゾで。明暗なしで。
2021/05/04
・Ken Perlin 先生の "Violet" に敬意を
込めて。
・制作中。
2021/05/09
・人数を増やした。
・カメラを動かした。
2021/05/08
・Diablada の衣装をモデリングした。
・わざとローレゾで。明暗なしで。
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
・ガイコツをモデリングした。
2021/04/17
・"vitae" 祝日など。UI 改良。
・MML・BML にタイ追加。完成。
2021/05/01
・足を持ち上げられるようにした。
・やぐら方向に動けるようにした。
2021/04/30
・手首を曲げられるようにした。
2021/04/29
・「大東京音頭」を踊る。ニ長調。
・小島ゆみこ先生の踊りを参考に
させていただきました。
2021/04/27
・ハ行、を発声できるようにした。
2021/04/23
・盆踊りで手拍子を打つのは大切
だと思うのでしっかり作る。
・回転軸のことばかり考えている。
・コロナのせいで1年以上、盆踊りを
みていないけれど、上手な人の
動きを思い出しながら作る。
2021/04/18
・ガイコツをモデリングした。
2021/04/17
・"vitae" 祝日など。UI 改良。
"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"
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"
2020/12/23
・反応拡散系をイキケイで。
・カクレクマノミ、ベニテングタケ。
・反応拡散系をイキケイで。
・カクレクマノミ、ベニテングタケ。
"young 2"
2020/12/23
・渦。
・心理テスト、何色が強く見えるか。
・渦。
・心理テスト、何色が強く見えるか。
"mb 2"
2020/12/23
・メタボールをイキケイで。
・斜線、版ズレ。
・gl_PointSize は、MacBook Pro
では 256 まで。iPhone や iPad
や iMac ではもっと大きくできる。
・メタボールをイキケイで。
・斜線、版ズレ。
・gl_PointSize は、MacBook Pro
では 256 まで。iPhone や iPad
や iMac ではもっと大きくできる。
"vinyl 2"
2020/12/20
・核の数、500。
ボロノイのための texture2D の回数
は、通常の方法では、1フレーム
あたり 1億3000万回ぐらいだった
ところ、アルゴリズムを改良
(座標で区分け) したら、1200万回
ぐらいですむようになったので
GPU が熱くならなくなった。
・インデックスの格納は、
リトルエンディアン。
私はザイログ畑なので。
・GLSL は円形にも向いている。
・核の数、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"
2020/11/28
・readRenderTargetPixels() で、
GPGPU の演算結果を取得して、
オブジェクトの座標に使用。
・最新版の glTF ローダは、CORS
制限にひっかかるみたい(？)
なので古いバージョンを細工した。
module てなに？
・ガイコツは、以前 "skull" のために
作ってあったものを流用。
・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"
2020/11/19
・まさか頂点の計算をしないで
ボロノイ図を描けるとは。
GPU まかせ。ラクすぎ。
・加えて、核を動かすのも、GPU に
ぜんぶ丸投げで GPGPU。
・Uint8Array をやっていると、
Z80 のマシン語を思い出す。
・嶋正利氏。西和彦氏。
・まさか頂点の計算をしないで
ボロノイ図を描けるとは。
GPU まかせ。ラクすぎ。
・加えて、核を動かすのも、GPU に
ぜんぶ丸投げで GPGPU。
・Uint8Array をやっていると、
Z80 のマシン語を思い出す。
・嶋正利氏。西和彦氏。
"zhu"
2020/11/16
・2D物理。液体の中に浮遊する物体。
・GLSL は グラデーションに向いて
いる。半透明にも。
・赤いストローは春水堂のイメージ。
・珍珠奶茶。
・2D物理。液体の中に浮遊する物体。
・GLSL は グラデーションに向いて
いる。半透明にも。
・赤いストローは春水堂のイメージ。
・珍珠奶茶。
"mai 2"
2020/11/14
・2D物理。
・THREE.LineSegments で
DebugDraw を表示。
・iPad では、Uint8ClampedArray が
使えないので、(古い iPad だけ？)
自前で clamp して Uint8Array に。
・2D物理。
・THREE.LineSegments で
DebugDraw を表示。
・iPad では、Uint8ClampedArray が
使えないので、(古い iPad だけ？)
自前で clamp して Uint8Array に。
"mai"
2020/11/13
・LiquidFun の流体を、
できるだけ簡素なコードで表示。
・メタボールで滑らかな液体表現。
・"Sprinkle" の表現もできそう。
・LiquidFun の流体を、
できるだけ簡素なコードで表示。
・メタボールで滑らかな液体表現。
・"Sprinkle" の表現もできそう。
"ferro"
2020/11/08
・THREE.FloatType は、iOS では
使用できない。
THREE.HalfFloatType にすれば、
大丈夫だけど iPhone と iPad で、
なぜか結果が異なるので、
THREE.UnsignedByteType
にした。整数好き。8ビット。
2020/11/06
・reaction-diffusion system
反応拡散系。
・ferrofluid 磁性流体ぽく。
・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" の表現も
できそう。
・隈笹。隈取。
・比較(明)ブレンド。
フチだけ光と陰を付ける。
・偏微分、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枚重ね。
・自前でアルファブレンディング。
・GL のために用意した Base64 の
画像を、ページ上にも表示。
"panels"、"textured" も同様に。
2020/08/28
・テクスチャ2枚重ね。
・自前でアルファブレンディング。
"panels"
2020/08/26
・パネルの配置を、Uint8Array の
データテクスチャとして渡す。
たった1枚の平面に全部のパネル
を、いっぺんに描画してくれる。
楽チンすぎ。
・レティナでも高速。
・パネルの配置を、Uint8Array の
データテクスチャとして渡す。
たった1枚の平面に全部のパネル
を、いっぺんに描画してくれる。
楽チンすぎ。
・レティナでも高速。
"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"