🎬 Three.js - TSL Terrain from a Single Plane #1 Setup Project
今回は、1枚のPlaneGeometryから地形(Terrain)を生成するプロジェクトのセットアップを行います。
TSL(Three Shader Language)を使って、ノードベースで地形を動的に変形していくシリーズの第1回目です。
WebGPU対応のThree.js環境を構築し、Planeをベースに地形生成の土台を整えます。
▼今回の内容
プロジェクトの初期セットアップ(Vite + TypeScript + Three.js)
WebGPUレンダラーの有効化
TSLノードを使った基本構成の確認
📘 ソースコード
🔗 https://github.com/shuya-tamaru/terrain-tsl
🌄 実際のデモ
🔗 https://www.styublog.com/shader/terrain
📖 参考資料
https://threejs.org/examples/?q=tsl#webgpu_tsl_procedural_terrain
https://developer.nvidia.com/gpugems/gpugems3/foreword
📺 シリーズ一覧
▶️ 次の動画(Part 2 Background)
👉 https://youtu.be/iFav9keYQ20
※シリーズ全体は再生リストからまとめて視聴できます。
👉 https://www.youtube.com/playlist?list=PLU4q25K0aBQ4JcSfmWUPw_gNw4tX5OsAr
==========================
🌐 Web site
https://www.styublog.com
🐦 X (Twitter)
https://twitter.com/tama20013
📸 Instagram
https://www.instagram.com/tamarushuya
📌 Pinterest
https://pin.it/4tue2fI
==========================
💡 Grasshopper / Rhino / Three.js などのチュートリアルを随時更新しています。
チャンネル登録&高評価で応援していただけると嬉しいです!