آموزش پیشرفته Three.js: ابر نقاط، شیدرها و بهینه‌سازی - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• معرفی دوره Course Introduction

• نحوه برگزاری دوره How the Course Works

بخش 1: ساختار پروژه آماده برای تولید Part 1: Production-Ready Project Structure

• درس: راه‌اندازی پروژه، جلوگیری از خطاهای تایپی و الگوهای وضعیت Pub/Sub [Lecture] Project setup, avoiding pitfalls with types, & Pub/Sub state patterns

• تمرین: بازنویسی کد «جعبه چرخان» به ساختار آماده تولید [Exercise] Refactoring "spinning box" code to a production-ready structure

• بررسی: راهکار مدل، خطاهای رایج و چالش‌های تکمیلی [Review] Model solution, common errors, and challenge tasks

بخش 2: بهینه‌سازی عملکرد Part 2: Performance Optimization

• درس: هزینه‌های رندر، InstancedMesh و تحلیل با Chrome DevTools/stats.js [Lecture] Render costs, InstancedMesh, & Chrome DevTools/stats.js profiling

• تمرین: بهبود FPS برای 10,000 ذره با استفاده از InstancedMesh [Exercise] Improve FPS of 10,000 particles using InstancedMesh

• بررسی: راهکار مدل، خطاهای رایج و چالش‌های تکمیلی [Review] Model solution, common errors, and challenge tasks

بخش 3: بصری‌سازی ابر نقاط و داده‌های سنسور Part 3: Point Cloud & Sensor Data Visualization

• درس: مبانی Points/PointsMaterial، بارگذاری CSV و نگاشت رنگ عمق [Lecture] Points/PointsMaterial basics, CSV loading, & depth color mapping

• تمرین: ساخت یک «نمایشگر دوربین عمق» با استفاده از داده‌های مجازی سنسور عمق [Exercise] Build a "depth camera viewer" using mock depth sensor data

• بررسی: راهکار مدل، خطاهای رایج و چالش‌های تکمیلی [Review] Model solution, common errors, and challenge tasks

بخش 4: آشنایی با شیدرهای سفارشی Part 4: Introduction to Custom Shaders

• درس: ShaderMaterial، یونیفرم‌ها، نقش Vertex/Fragment و انیمیشن uTime [Lecture] ShaderMaterial, uniforms, vertex/fragment roles, & uTime animation

• تمرین: پیاده‌سازی شیدر موجی (Ripple) که به موقعیت ماوس واکنش می‌دهد [Exercise] Implement a ripple shader that reacts to the mouse position

• بررسی: راهکار مدل، خطاهای رایج و چالش‌های تکمیلی [Review] Model solution, common errors, and challenge tasks

بخش 5: پس‌پردازش (Post Processing) Part 5: Post-Processing

• درس: EffectComposer، افکت Bloom و هزینه‌های عملکردی افکت‌های متعدد [Lecture] EffectComposer, Bloom, & performance costs of multiple effects

• تمرین: افزودن افکت Bloom (درخشش) به نمایشگر ابر نقاط [Exercise] Add a Bloom (glow) effect to the point cloud viewer

• بررسی: راهکار مدل، خطاهای رایج و چالش‌های تکمیلی [Review] Model solution, common errors, and challenge tasks

بخش 6: ادغام داده‌های بلادرنگ Part 6: Real-Time Data Integration

• درس: WebSockets، رندر داده‌های زنده و پنل‌های کنترلی با lil gui [Lecture] WebSockets, rendering live data, & control panels with lil-gui

• تمرین: ساخت دموی زنده: تغییر رنگ‌های ابر نقاط از طریق داده‌های سنسور [Exercise] Build a live demo: changing point cloud colors via sensor data

• بررسی: راهکار مدل، خطاهای رایج و چالش‌های تکمیلی [Review] Model solution, common errors, and challenge tasks

بخش 7: خط لوله مدل و دارایی‌ها (Asset Pipeline) Part 7: Model and Asset Pipeline

• درس: GLTF/GLB، Draco، بهینه‌سازی تکسچر با KTX2 و بارگذاری تنبل (Lazy Loading) [Lecture] GLTF/GLB, Draco, texture optimization with KTX2, & lazy loading

• تمرین: تحلیل تفاوت‌های انواع ذخیره‌سازی مدل و اندازه‌های تکسچر [Exercise] Profile differences in model storage types & texture sizes

• بررسی: راهکار مدل، خطاهای رایج و چالش‌های تکمیلی [Review] Model solution, common errors, and challenge tasks

بخش 8: پروژه نهایی Part 8: Capstone Project

• درس: گردش کار، ادغام لایه وضعیت، تنظیمات نهایی و استقرار (Deployment) [Lecture] Workflow, state layer integration, tuning, & deployment

• تمرین: ادغام بخش‌های 1 تا 7 برای تکمیل «داشبورد سه بعدی سنسور» [Exercise] Integrate Parts 1–7 to complete a "3D Sensor Dashboard"

• بررسی: راهکار مدل، خطاهای رایج و چالش‌های تکمیلی [Review] Model solution, common errors, and challenge tasks