go back to Monkey Circus


GLSL を勉強するページです。




"young"
2020/12/03
・THREE.MeshNormalMaterial で、
お手軽にカラフル。と思ったら、
フォグが効かなかったので、
シェーダを書いた。



"picto_2"
2020/11/30
・Instagram のアイコンのように。



"picto"
2020/11/29
・Tik Tok のアイコンのように。



"nez"
2020/11/28
・readRenderTargetPixels() で、
GPGPU の演算結果を取得して、
オブジェクトの座標に使用。

・最新版の glTF ローダは、CORS
制限にひっかかるみたい(?)
なので古いバージョンを細工した。
module てなに?

・ガイコツは、以前 "skull" のために
作ったものを流用。



"blur"
2020/11/25
・ガウシアンぼかし。
モザイクぼかし。

・THREE.InstancedMesh で、
放射状の形状を自動的に作る。
・THREE.MeshPhongMaterial で、
ツヤ感を出す。
・THREE.HemisphereLight で、
陰側にも色付け。



"trypo"
2020/11/23
・より気持ち悪く見えるよう微調整。

2020/11/21
・trypophobia トライポフォビアぽく。

・さらに GPGPU。すべての核の
組合せについて距離を計算して、
最短の相手を見つける。

・これぐらい計算量を増やすと
GPU が熱くなってくる。



"vinyl"
2020/11/19
・まさか頂点の計算をしないで
ボロノイ図を描けるとは。
GPU まかせ。ラクすぎ。

・加えて、核を動かすのも、GPU に
丸投げで GPGPU。



"zhu"
2020/11/16
・2D物理。

・液体の中に浮遊する物。

・グラデーションは GLSL に向いて
いる。半透明も。



"mai_2"
2020/11/14
・2D物理。

・THREE.LineSegments で
DebugDraw を表示。

・iPad では、Uint8ClampedArray が
使えないので、(古い iPad だけ?)
自前で clamp して Uint8Array に。



"mai"
2020/11/13
・LiquidFun の液体を、
できるだけ簡素なコードで表示。

・メタボールで滑らかな液体表現。



"ferro"
2020/11/08
・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() が
とても便利。



"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枚重ね。

・自前でアルファブレンディング。



"panels"
2020/08/26
・パネルの配置を、Uint8Array の
データテクスチャとして渡す。
たった1枚の平面に全部のパネル
を、いっぺんに描画してくれる。
楽チンすぎ。

・レティナでも高速。



"clouded_pink"
2020/06/17
・キューブの面に貼付け。

・css を別ファイルに分離。
いままで避けていた。



"textured"
2020/01/07
・png 画像を Base64 で
テクスチャとして読込んで、
フラグメントシェーダで使用。

・2枚のテクスチャを渡す。



"clouded"
2019/12/29
・Perlin noise、Simplex noise。


2019/12/28
・shadertoy.com のソースコードを
Three.js で実行。

・レイマーチング。



"blinker"
2019/12/16
・shadertoy.com に、感動。
(たぶん初めて見た。)

・フラグメントシェーダ。