Playground logo

お試し置き場

いろいろな実験やサンプルを置いています。

GitHub変更自由！

2D エフェクト

画像加工や2Dビジュアルの実験

アクリルキーホルダー風エフェクト

ちょっとぷっくり感のあるエフェクト、ぷっくりシール的な

オーロラステッカージェネレーター

透過PNG画像を七色に輝くホログラム風ステッカーに変換

God Rays

Paper Design の God Rays を参考にした可変シェーダーデモ

Liquid Distortion

液体レンズのような屈折で中央カードをゆがませるWebGL2デモ

Soap Bubble Poster

パステルカード上でシャボン玉の質感と浮遊を再現するデモ

シミュレーション

パーティクルや挙動計算のシミュレーション

Shape Matching（呼吸メッシュ）

WebGLとフックの法則を使ったソフトボディ呼吸シミュレーション

Atmospheric Particle（大気パーティクル）

PixiJSを使った大気中の塵・パーティクルシミュレーション

Holographic Radiance Cascades (2D GI)

arXiv:2505.02041 をベースにした Holographic Radiance Cascades の 2D GI 実装

▶

Photoreal Ocean Simulation

フレネル反射と太陽スペキュラを組み込んだフォトリアル寄り海面シミュレーション

3D レンダリング

WebGL/WebGPU の3D描画やポストプロセス

GLB ASCII View

GLBをASCIIアートに変換して表示。各種パラメータをリアルタイム調整

City Fog (WebGPU)

three.js WebGPU + TSL で都市ビル群へカスタムフォグを適用したサンプル

Pixelate Post Processing

three.js のポストプロセスでピクセル化とアウトライン強調を行うデモ

Voxel Terrain Generator

React Three Fiber + drei で作ったボクセル地形ジェネレーター

Neon Waterfall (three.js)

three.js で発光する滝・飛沫・水面をスタイライズ描画するデモ

3D キャラクター

MMD/VRM のキャラクタービューアやモーション

MikuMikuMixed (MMD)

MikuMikuMixed をベースにした MMD モデル + モーション再生ビューア

Vroid (VRM) Viewer

three.js + @pixiv/three-vrm で Vroid(VRM) を表示

Vroid Auto Motion

VRM をコード生成モーションで自然に揺らす VTuber 風オートモーション

VRM MediaPipe Tracking

WebRTC カメラ + MediaPipe/Kalidokit で VRM の表情と全身姿勢をリアルタイム反映

FPS 0