Back to Browse

Three.js - TSL Terrain from a Single Plane #1 setup project

212 views
Oct 18, 2025
19:11

🎬 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 などのチュートリアルを随時更新しています。 チャンネル登録&高評価で応援していただけると嬉しいです!

Download

1 formats

Video Formats

360pmp426.4 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

Three.js - TSL Terrain from a Single Plane #1 setup project | NatokHD