Graphics

shader-dev は、ShaderToy 風のリアルタイム表現に使える実用的な GLSL シェーダースキルです。ray marching、SDF シーン、ライティング、パーティクル、流体表現、ポストプロセス、そして UI Design 向けの shader-dev を、汎用的なプロンプトよりも少ない試行錯誤で構築・デバッグしたいときに役立ちます。

フロントエンド開発向けの threejs-textures スキルは、テクスチャの読み込み、UVマッピング、colorSpace、ラッピング、フィルタリング、環境マップまでを扱い、Three.js のマテリアル上で画像を正しく表示するための実践的なガイドです。

threejs-shaders は、GLSL、ShaderMaterial、uniforms、頂点変形、フラグメント効果を使って Three.js のシェーダーを書くための実践ガイドです。フロントエンド開発で、動くシェーダーの基本形が必要なとき、マテリアル選びを明確にしたいとき、汎用的なプロンプトよりも迷いを減らしたいときに役立ちます。

threejs-materials は、メッシュのマテリアルを選定・設定・トラブルシュートするための Three.js マテリアル向けスキルです。リアルな PBR、アンライトのフラットシェーディング、トゥーン表現、デバッグ用ビュー、テクスチャ主導のスタイリング、カスタムシェーダーに使えます。より速く、より一貫したマテリアル判断が必要なフロントエンド開発チームに有用です。

フロントエンド開発向けの threejs-postprocessing 技能です。EffectComposer のパイプライン構築、bloom、被写界深度、blur、カラーグレーディング、独自のスクリーンスペースパス追加に対応します。このガイドでは、レンダー処理の流れを組み立て、エフェクトを調整し、既存の Three.js シーンに composer の描画を組み込む方法を確認できます。

threejs-loaders は、GLTF/GLB モデル、テクスチャ、HDR 環境、その他の非同期リソースを含む Three.js アセットを正しく読み込むのに役立ちます。信頼性の高い読み込み、進捗管理、シーン準備時の不具合削減が必要な Frontend Development で、この threejs-loaders skill を使ってください。

threejs-lighting は、Frontend Development 向けの実践的な Three.js ライティングスキルです。ライトの種類選び、影の設定、環境光の追加、そして平坦に見える・暗すぎる・白飛びするシーンの調整に役立ちます。より速く、より一貫性のあるシーンライティングが必要なときに threejs-lighting ガイドを活用してください。

threejs-geometry は、実際のシーンに合う Three.js の geometry を選び、組み立てるのに役立ちます。組み込み形状、BufferGeometry、カスタムメッシュ、インスタンシングまでカバーします。Frontend Development で、適切なコンストラクタ、引数の順序、パフォーマンスを意識した出力が必要なときに threejs-geometry スキルを使ってください。

threejs-fundamentals は、フロントエンド開発者が Three.js アプリの基本セットアップを構築・デバッグするのに役立ちます。対象は scene、camera、renderer、lights、meshes、transforms、object hierarchy。threejs-fundamentals のガイドを使えば、真っ白なキャンバスの原因切り分け、オブジェクトの正しい配置、最初の scene をきれいに仕上げるところまでスムーズに進められます。

threejs-animation は、Three.js のモーションシステム向けスキルです。キーフレーム、アニメーションクリップ、ミキサー、アクション、スケルタル再生、モーフターゲット、プロシージャルモーションを扱えます。GLTF アニメーションの再生、クリップのブレンド、試行錯誤を減らしたきれいなアニメーションループ構築が必要な Frontend Development に適しています。

makepad-2.0-vector は、SVGライクなUIデザイン作業のための Makepad 2.0 Vector グラフィックス用スキルです。Vector{} や Svg{} を使って、くっきりしたアイコン、バッジ、イラスト、グラデーション、フィルター、変形、アニメーションするベクター要素を作成するのに役立ちます。このガイドでは、makepad-2.0-vector の導入手順を押さえつつ、実装にそのまま使える出力を、迷いを減らしながら得られます。

makepad-2.0-shaders は、Makepad 2.0 の shader code を書き、デバッグするための Frontend Development スキルです。pixel: fn() と vertex: fn() ブロック、Sdf2d の形状、カスタム widget の描画、premultiplied alpha、そして実践的な導入・使用ガイダンスに、この makepad-2.0-shaders スキルを活用してください。