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 上げてみた。
・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" を考案した。振付の単位を
盆譜と呼ぶことにした。
・炭坑節を踊る。
・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 に混ぜ込んだ。
・浴衣(ゆかた)で、
初音ミクのコスプレをしている
人物を入れた。左前…。
・フォルマント合成で炭坑節を歌う。
ムリムリ母音のみで。
・歌声の記述は MML に混ぜ込んだ。
・浴衣(ゆかた)で、
初音ミクのコスプレをしている
人物を入れた。左前…。
"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"