GLSL を勉強するページです。
"young"
2020/12/03
・THREE.MeshNormalMaterial で、
お手軽にカラフル。と思ったら、
フォグが効かなかったので、
シェーダを書いた。
・THREE.MeshNormalMaterial で、
お手軽にカラフル。と思ったら、
フォグが効かなかったので、
シェーダを書いた。
"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。
・まさか頂点の計算をしないで
ボロノイ図を描けるとは。
GPU まかせ。ラクすぎ。
・加えて、核を動かすのも、GPU に
丸投げで GPGPU。
"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 の液体を、
できるだけ簡素なコードで表示。
・メタボールで滑らかな液体表現。
・LiquidFun の液体を、
できるだけ簡素なコードで表示。
・メタボールで滑らかな液体表現。
"ferro"
2020/11/08
・THREE.FloatType は、iOS では
使用できない。
THREE.HalfFloatType にすれば、
大丈夫だけど iPhone と iPad で、
なぜか結果が異なるので、
THREE.UnsignedByteType
にした。整数好き。
2020/11/06
・reaction-diffusion system
反応拡散系。
・ferrofluid 磁性流体ぽく。
・THREE.FloatType は、iOS では
使用できない。
THREE.HalfFloatType にすれば、
大丈夫だけど iPhone と iPad で、
なぜか結果が異なるので、
THREE.UnsignedByteType
にした。整数好き。
2020/11/06
・reaction-diffusion system
反応拡散系。
・ferrofluid 磁性流体ぽく。
"kuma"
2020/11/05
・"textured" 改良。
2020/11/03
・過去のものも、表示サイズを拡大。
2020/11/01
・比較(明)ブレンド。
・フチだけ光と陰を付ける。
・偏微分、dFdx()・dFdy() が
とても便利。
・"textured" 改良。
2020/11/03
・過去のものも、表示サイズを拡大。
2020/11/01
・比較(明)ブレンド。
・フチだけ光と陰を付ける。
・偏微分、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"
2019/12/16
・shadertoy.com に、感動。
(たぶん初めて見た。)
・フラグメントシェーダ。
・shadertoy.com に、感動。
(たぶん初めて見た。)
・フラグメントシェーダ。