GLSL を勉強するページです。
"oto 5" 制作中。
2021/01/20
・制作中。
・炭坑節を歌います。
・制作中。
・炭坑節を歌います。
"oto 4"
2021/01/19
・ひとまず、フォルマント合成を
入れた。
・"Oh, yeah." と発音しています。
・ひとまず、フォルマント合成を
入れた。
・"Oh, yeah." と発音しています。
"vitae" 制作中。
2021/01/18
・制作中。
・五反田の電波ビルの前で考案。
・制作中。
・五反田の電波ビルの前で考案。
"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
・MML で用意した楽譜を、js で 60
分の 1 秒単位のデータに展開して
おいてさらに GPU で 48000 Hz
程度に展開。もちろん矩形波で。
メロディはデチューンで。
PSG 風。懐かしすぎ。
・スケーターズワルツ、
けっきょく南極大冒険。
・iOS のためにタッチを要求。
・アクリル板ぽく見えるシェーダを
書いた。
・PointLight が 24 個ぐらい以上
あると、iPad で表示できない
みたいだったので減らした。
・MML で用意した楽譜を、js で 60
分の 1 秒単位のデータに展開して
おいてさらに GPU で 48000 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/05
・"textured" 改良。
2020/11/03
・過去のものも、表示サイズを拡大。
2020/11/01
・比較(明)ブレンド。
・"Where's My Mickey" の表現も
できそう。
・フチだけ光と陰を付ける。
・偏微分、dFdx()・dFdy() が
とても便利。
・"textured" 改良。
2020/11/03
・過去のものも、表示サイズを拡大。
2020/11/01
・比較(明)ブレンド。
・"Where's My Mickey" の表現も
できそう。
・フチだけ光と陰を付ける。
・偏微分、dFdx()・dFdy() が
とても便利。
"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"