مقدمه
Three.js کارهای زیادی انجام می دهد و می تواند تا حدودی گیج کننده باشد که چگونه با سایر فیلدهای سه بعدی ارتباط دارد. دامنه آن نیز یک چیز همیشه در حال تکامل است، بنابراین خلاصه کردن آن خیلی ساده نیست، و این مشاهدات ذهنی هستند.
کتابخانه سه بعدی جاوا اسکریپت
هدف از این پروژه ایجاد یک کتابخانه سه بعدی، سبک وزن و آسان برای استفاده است. این کتابخانه رندرهای <canvas>، <svg>، CSS3D و WebGL را ارائه می دهد.
این توضیحات رسمی از مخزن github است. در واقع آن را به خوبی خلاصه می کند، اما هر موضوعی در این جمله به تنهایی یک موضوع گسترده است و این تمام کاری نیست که three.js انجام می دهد.
خود کتابخانه به زبان جاوا اسکریپت نوشته شده است و برای استفاده در محیط جاوا اسکریپت در نظر گرفته شده است. در بیشتر موارد این بدان معنی است که در سمت کلاینت – در یک مرورگر وب در برخی از دستگاه ها اجرا می شود. اما با node.js و مرورگرهای هدلس می توان از سمت سرور نیز استفاده کرد. اولین فکری که به ذهن می رسد رندر است – شاید برخی از تصاویر پیش نمایش روی سرور، اما می تواند فقط یک محاسبات سه بعدی باشد، زیرا three.js یک کتابخانه ریاضی غنی دارد.این یک اصطلاح فوق العاده گسترده است. سه بعدی می تواند معانی زیادی داشته باشد. در بیشتر موارد ما به “گرافیک” فکر می کنیم.
اکثر پروژه‌های three.js که می‌بینیم شامل گرافیک‌های سه‌بعدی بلادرنگ هستند که در آن تعامل کاربر منجر به بازخورد بصری فوری می‌شود. نوع دیگر گرافیک سه بعدی یا افکت‌های مختلف یا شخصیت‌های مصنوعی در فیلم‌ها، یا «رندرهای» مختلفی هستند که ممکن است به صورت چاپ شده یا در یک کاتالوگ وب مشاهده کنید (مثلاً، وب‌سایت IKEA مملو از گرافیک‌های سه‌بعدی است، زیرا تمام عکس‌های محصول آنها توسط رایانه ساخته شده‌اند. ).
زیر مجموعه ای از همه اینها ریاضی سه بعدی است. گرافیک سه بعدی را نمی توان بدون ریاضیات انجام داد و زبان های رایانه به طور پیش فرض مفاهیم سه بعدی را درک نمی کنند. اینجا جایی است که یک کتابخانه وارد می‌شود، آن عملیات ریاضی را انتزاع می‌کند، شاید آنها را بهینه می‌کند و یک رابط سطح بالا مانند Matrix4 یا .dot() را نشان می‌دهد.
Three.js با کتابخانه ریاضی خود با کلاس‌های خاص برای ریاضیات سه بعدی همراه است. کتابخانه های مستقلی وجود دارند که به تنهایی با این ریاضی سروکار دارند، اما با سه مورد، این فقط زیرمجموعه ای از یک سیستم بسیار بزرگتر است.
رندر یکی دیگر از مسئولیت های بزرگ کتابخانه است، اما در اینجا نیز همه چیز کمی پیچیده می شود. WebGL بسیار خاص است و از این گروه متمایز است.
با canvas، svg و css، مسئولیت رندر کاملاً سه بعدی است. این APIها کتابخانه‌های زیادی برای ترسیم چیزهای غیر سه بعدی دارند، یا در واقع این کار را به‌طور پیش‌فرض انجام می‌دهند (css مستطیل‌های دوبعدی را ترسیم می‌کند، شکل‌های دو بعدی مختلف را بوم می‌کند)، اما برای انجام واقعی رندر سه‌بعدی به یک لمس جادویی و ریاضیات سه بعدی نیاز دارند.
لمس سحر و جادو بیشتر به شکل انتزاع رابط می آید. به عنوان مثال، مدیریت حالت سه بعدی عنصر <div> که از طریق CSS به سه بعدی تبدیل می شود، بسیار مشکل است. منطق زیادی لازم است تا بوم API چیزی شبیه به سه بعدی ترسیم کند. WebGL به مراتب بیشتر درگیر است.
Three تمام این APIها را در چیزی به سادگی render() انتزاع می‌کند، اما برای انجام این کار نیاز به یک نمایش عمومی از آنچه “دنیای سه بعدی” است دارد.
نمودار صحنه
می توان ناحیه ای از three.js را که به عنوان این انتزاع عمومی «جهان سه بعدی» عمل می کند، تشخیص داد. نمودار صحنه یک ساختار داده است که برای توصیف نحوه ارتباط اشیاء در برخی صحنه های سه بعدی (جهان) با یکدیگر استفاده می شود. در واقع لازم نیست سه بعدی باشد، زیرا این روشی مناسب برای توصیف هر سلسله مراتب گرافیکی برداری است. این به طور خاص یک “درخت” است که از “گره ها” با یک “گره ریشه” منشعب شده است. در three.js کلاس پایه برای این ساختار داده Object3D است.
این تقریباً دقیقاً مشابه درخت DOM است. THREE.Scene مشابه <body> خواهد بود و هر چیز دیگری شاخه است. در DOM می‌توانیم چیزها را در جای خود قرار دهیم اما نسبتاً محدود هستند. چرخش معمولا حول یک محور اتفاق می افتد و ما چیزها را به چپ/راست یا بالا/پایین حرکت می دهیم. در یک نمودار صحنه سه بعدی درجات آزادی بیشتری داریم.
صحنه سه بیشتر شبیه یک DOM مجازی است. ما عملیات خود را انجام می‌دهیم و حالت را روی آن درخت تنظیم می‌کنیم، و زمانی که می‌خواهیم یک عکس فوری بصری از آن حالت داشته باشیم (مثلاً در یک حلقه پیوسته، یا برخی از تعامل کاربر/تغییر وضعیت)، رندر (صحنه) را فراخوانی می‌کنیم. وقتی چیزی تغییر می کند، نمی خواهید کل درخت DOM را به روز کنید، در حالی که با عنصر <canvas>، باید کل نمای را پاک کنیم، سپس همه چیز را دوباره ترسیم کنیم، حتی اگر تنها یک عنصر موقعیت خود را تغییر دهد.
یک <div> در یک <div> مشابه رابطه فرزند والدین THREE.Mesh(‘sun’)->THREE.Mesh(‘earth’) خواهد بود. یک قانون CSS می تواند مشابه یک THREE.Material باشد که در آن توصیفی مانند color:’red’ باعث می شود جادو اتفاق بیفتد و چیزی قرمز رنگ شود. در نهایت فراخوانی threeRenderer.render (صحنه) می تواند شبیه به مرورگر باشد که برخی از صفحات html را با برخی قوانین CSS بارگذاری می کند.
Mesh، Scene، Camera و Light همگی زیر کلاس های این کلاس عمومی هستند. این چیزی است که به شما امکان می دهد () یک “جعبه” را به “صحنه” اضافه کنید، یا یک “light” را دنبال “دوربین” کنید.
یک ساختار ساده می تواند بسیار مسطح باشد. گره ریشه می تواند به عنوان “جهان” دیده شود و می تواند “ground”، “house”، “sun” و “camera” را به عنوان فرزندان خود داشته باشد.
THREE.Scene('world')
|-THREE.Mesh('ground')
|-THREE.Mesh('house')
|-THREE.Light('sun')
|-THREE.Camera('main')این اطلاعات کافی برای ارائه به یک رندر برای به دست آوردن یک نتیجه بصری است. نسبت به برخی صحنه‌ها، دو شبکه وجود دارد که نشان‌دهنده چیزهای مختلف است، زمین و خانه روی تپه. یک نور که نحوه روشن شدن آنها را مشخص می کند (صبح در مقابل ظهر در مقابل نور فلاش) و یک شی (دوربین) که نقطه نظر ما را مشخص می کند، نمایی از این جهان.
نتایج ممکن است متفاوت باشد، برای مثال CSS به یک رندر بسیار سبک محدود می شود، در حالی که WebGL می تواند سایه ها و به طور کلی وفاداری بالا را ارائه دهد.
از طریق این ساختار، دنیای سه بعدی مدیریت می شود. اگر بخواهیم نحوه تاثیر نور روز بر خانه را در فصول مختلف سال شبیه سازی کنیم، موقعیت و جهت نور را در جهان به صورت برنامه ای تغییر می دهیم. وظیفه نمودار صحنه این است که این قلاب یعنی “موقعیت” را آشکار کند، اما برای اینکه واقعاً آن را متحرک کنید، باید منطق خود را پیاده سازی کنید. یک راه ساده برای متحرک سازی یک صحنه 3 بعدی three.js با یک کتابخانه “tweening” است.
همه اینها احتمالاً فقط در تئوری صادق است و شما ممکن است نتوانید به دلخواه رندرهای صحنه را تغییر دهید. اما این بیشتر به دلیل همپوشانی “مواد” با نمودار صحنه و جفت شدن آنها با رندرها است. به عنوان مثال، هیچ راهی برای سایه انداختن یک <div> یا ظاهر شدن به عنوان فلز وجود ندارد، چیزی که یک ماده WebGL می تواند توصیف کند، اما می توان آن را به رنگ قرمز درآورد که کاری است که همه مواد می توانند انجام دهند.
در زیر آن همه Object3D هنوز عمومی است، و رابطه فضایی و سلسله مراتبی گره ها با یکدیگر از طریق “گراف صحنه” توصیف شده است.
به زبان انگلیسی ساده، این متغیر صحنه ای است که پس از تماس چندین بار با scene.add(my_foo) در نهایت با آن مواجه می شوید.
WebGL
Webgl فوق العاده خاص است و احتمالاً در چیزی در حدود 99٪ از برنامه های three.js موجود استفاده می شود. این یک موضوع بزرگ است، بنابراین ممکن است ارزش آن را داشته باشد که ابتدا یک مرور کلی از جایگزین ها انجام دهیم.
canvas, css, svg
اینها همه API هستند. این رابطی است که شما به عنوان یک برنامه نویس می توانید از آن استفاده کنید تا به مرورگر بگویید چیزهای خاصی را ترسیم کند.CSS رایج ترین رابط در وب است، زیرا بدون آن، همه چیز مانند متن ساده به نظر می رسد. از لحاظ تاریخی هیچ ربطی به سه بعدی نداشت.
Canvas در واقع از همان عنصر WebGL برای طراحی استفاده می کند، اما زمینه متفاوتی دارد. زمینه در واقع “2d” نامیده می شود، اما از آنجایی که به هر حال 3d جعلی است و ما همیشه به نوعی صفحه دو بعدی خواه واقعی یا مجازی می کشیم، می توانیم از این زمینه برای ترسیم گرافیک های 3 بعدی نیز استفاده کنیم.
SVG یک API غیر سه بعدی دیگر است که معمولاً برای توصیف مواردی مانند لوگوها یا نمادها استفاده می شود. با این حال، از آنجایی که می‌تواند چیزهای ابتدایی مانند خطوط را توصیف کند، می‌توان آنها را در زمینه سه بعدی نیز ارائه کرد (مانند پوشش روی نقشه، یا عناصر UI یا HUD آگاه از فضا).
یک موضوع رایج در اینجا این است که هیچ یک از اینها برای استفاده سه بعدی در نظر گرفته نشده است. یکی دیگر از ویژگی های مهم این است که همه آنها سطح بالایی دارند – قبلاً قصد انجام کار دیگری را داشتند. به عنوان مثال، هر سه می دانند چگونه یک “دایره” بکشند. با بوم، این یک شکل صریح است، با CSS ممکن است مجبور شوید از شعاع های مرزی استفاده کنید، اما نتیجه نهایی دسترسی بسیار مستقیم به یک دایره است.
WebGL سطح بسیار پایینی دارد، در مورد مفهوم گرافیک سه بعدی اطلاعات زیادی ندارد. گرافیک سه بعدی نیاز به انجام محاسبات ریاضی خاصی دارد و به تعداد زیادی از آنها نیاز دارد. فقط برای یک ثانیه به صفحه نمایش با وضوح بالا و تعداد پیکسل های آن فکر کنید. اگر باید برای هر پیکسل محاسباتی انجام دهید تا تعیین کنید چگونه مقداری نور بر روی سطح تأثیر می گذارد و باید این کار را 60 بار در ثانیه انجام دهید، این عدد جمع می شود.
پردازنده گرافیکی
اکثر رایانه‌ها مانند لپ‌تاپ‌ها، رایانه‌های رومیزی، تلفن‌های همراه و حتی ساعت‌ها نوعی دستگاه سخت‌افزاری دارند که می‌تواند به طور مؤثر این عملیات سه‌بعدی را محاسبه کند و امکان نمایش گرافیک‌های تعاملی را فراهم کند. به این واحد پردازش گرافیکی می گویند.
این با پردازنده اصلی متفاوت است زیرا برای اهداف متفاوتی ساخته شده است – عملیات ریاضی خاصی که به صورت موازی اجرا می شوند.
همانطور که از جاوا اسکریپت برای برنامه نویسی مرورگر استفاده می کنیم، از WebGL برای برنامه ریزی کارت گرافیک استفاده می کنیم.
خوب، این در مفهوم درست است، اما در عمل این دو جانور بسیار متفاوت هستند. WebGL هم از کد جاوا اسکریپت (دستورات) و هم از زبان کاملاً متفاوتی تشکیل شده است که در واقع محاسبات را انجام می دهد (GLSL). می‌توان تا حدودی شباهتی بین HTML و جاوا اسکریپت و نحوه کار آنها در یک صفحه با هم ترسیم کرد.
دو بعدی و سه بعدی
نه فقط سه بعدی از این شتاب سخت افزاری سود می برد. پردازش ویدئو نیز کاندیدای خوبی است. می‌توانید کارت گرافیک را طوری برنامه‌ریزی کنید که رنگ‌ها را تغییر دهد یا تصویر را در یک فید ویدیوی زنده تغییر دهد.
WebGL که سطح بسیار پایینی دارد، عمومی است. در مورد 2d یا 3d نمی داند، اما در مورد حافظه، بافرها، صف های فرمان، سایه زن ها و غیره می داند.
سر و کار داشتن با برنامه نویسی موازی با نحوه برنامه نویسی در جاوا اسکریپت متفاوت است. یک مشکل رایج این است که چگونه رشته های مختلف به یک متغیر مشترک دسترسی داشته باشند.
این پارادایم متفاوت به این معنی است که یک زبان کاملاً دیگر به نام GLSL وجود دارد. این یک زبان سایه زن است که به نوعی در هر API گرافیکی سطح پایین وجود دارد. به این صورت است که شما منطق واقعی را برای این اعداد بزرگ می نویسید، و تنها کمکی که می کنید این است که نیازی به نوشتن کد ماشین ندارید.
بخش دیگر WebGL api اتصالات جاوا اسکریپت است که از طریق آنها به GPU می‌گویید که کارها را انجام دهد. یک سایه زن “محاسبات A را انجام دهید” و اتصال “میلیون بار اجرا کنید”.
این به برنامه نویس بستگی دارد که محاسبه کند A است. ممکن است چیزی سه بعدی مرتبط باشد یا هسته ای باشد که ویدیو را محو می کند.
وقتی شروع به انتزاع این محاسبات و این دستورات می کنید، در نهایت به three.js می رسید.
رندرهایی که با هم کار می کنند
یکی از موارد استفاده که بسیار منطقی است، استفاده از ترکیبی از رندرها برای ترسیم چیزهایی است که آنها در “سه بعدی” خوب هستند. WebGL می تواند تعداد زیادی اعداد را خرد کند و تصاویر واقعی واقعی بسازد، اما در مدیریت متن و حتی برخی از خطوط ضعیف است. یک متن رندر لایه اضافی را می توان از طریق CSS و رندرهای بوم کنترل کرد، در حالی که مسیرها و خطوط مختلف از طریق SVG.
THREE.WebGLRenderer
همه این موارد سطح پایین از طریق یک WebGLRenderer کلاس three.js انتزاع می شوند. این همان چیزی است که مکعب را به دسته ای از اعداد در حافظه GPU تبدیل می کند.
از قضا، این تنها رندر سه.js است که نیازی به انجام گرافیک سه بعدی ندارد، اما بهترین گزینه برای آن است. بقیه با استفاده از APIهای دوبعدی سه بعدی را جعلی می کنند، WebGL عمداً با استفاده از یک API محاسباتی موازی عمومی سه بعدی را انجام می دهد. اما این هنوز سناریویی را رد نمی کند که بتوانید از آن به طور انحصاری برای پردازش آن جریان ویدیوی زنده استفاده کنید. به اندازه کافی WebGL را انتزاع می کند تا برای این کار مفید باشد، اما احتمالاً از یک سوم کتابخانه استفاده می کنید.می‌توانید یک لایه رابط کاربری فوق‌العاده پاسخ‌گو با WebGL بسازید، یا یک بازی پلتفرم از نوع سوپر ماریو که در آن three.js هنوز هم ابزاری عالی خواهد بود.
این واقعیت که شما فقط از یک سوم کتابخانه استفاده می کنید به این معنی است که ابزار متفاوتی می تواند برای آن مورد استفاده مناسب تر باشد، یا اینکه می توانید فقط زیر مجموعه ای از three.js بسازید. هم نمونه‌های سوپر ماریو و هم نمونه‌های پردازش ویدیو شاید فقط به PlaneGeometry و شاید یک نوع ماده نیاز داشته باشند.
three-ریاضی
کد جاوا اسکریپت که عملیات ریاضی خاصی را به صورت سه بعدی انجام می دهد. JS به طور پیش فرض Math.pow() دارد اما Quaternion.inverse() ندارد. با این کلاس‌ها می‌توانیم الگوریتم‌هایی بنویسیم که نیازی به رندر ندارند – به عنوان مثال یک سرور بازی که تأیید می‌کند چه کسی شلیک می‌کند چه کسی پرتوهای زیادی انجام می‌دهد اما چیزی نمی‌کشد.
three صحنه-گراف
خانواده ای از زیر کلاس های Object3D که یک ساختار داده درختی را تشکیل می دهند که یک “دنیای سه بعدی” و رابطه اشیاء درون آن را توصیف می کند. از نظر مفهومی انتزاعی است، اما می تواند تا حدودی با رندر خاص همراه شود، پس از فرو رفتن در کد.
three رندر
لایه ای که آن نمودار عمومی را به یک نمایش بصری روی صفحه یا برخی بافر ترجمه می کند (مثلاً شما آن را در سمت سرور ایجاد می کنید). برای رسیدن به این هدف از فناوری های مختلفی استفاده می کند.
THREE-WebGLRenderer
یک رندر خاص که امکان شتاب سخت افزاری را فراهم می کند و بسیاری از مفاهیم سه بعدی را می داند اما می تواند برای دو بعدی (و حتی محاسبات عمومی) نیز استفاده شود.اینها بلوک های اصلی ساختمان three.js IMO هستند. من تمایل دارم که “3D” را با “Graphics” جایگزین کنم، اما این فقط در مورد WebGLRenderer اعمال می شود.
Three.js یک موتور بازی نیست
همه کسانی که به سه بعدی (یا گرافیک) در وب نیاز دارند، بازی نمی سازند. موتورهای بازی معمولاً بهینه سازی های زیادی را علاوه بر توصیف جهان های سه بعدی و نمایش آنها انجام می دهند. بازی‌های مختلف نیازهای متفاوتی دارند، سیستم‌های فیزیک و رندر برای استراتژی زمان واقعی و تیراندازی اول شخص احتمالاً نیازهای بسیار متفاوتی دارند.همه این موارد به معنای کد بیشتری است، و برای کسی که فقط می خواهد یک مدل سه بعدی را به عنوان بخشی از یک کاتالوگ محصول بچرخاند، این نه تنها غیر ضروری بلکه نامطلوب است.البته می توانید یک موتور بازی بسازید و از سه تا برای رندرینگ و برای ساخت بلوک های موتور استفاده کنید.
Three.js زیاد بارگیری نمی شود
مطمئناً هسته برای برخی از دارایی‌ها چند باردار دارد، اما همه فرمت‌های رایج مانند gltf یا fbx مستقل هستند. threejs اهمیتی نمی دهد که چگونه دارایی های خود را به دست آورید، تا زمانی که آنها را به درستی تجزیه کنید و 3D شیء ایجاد کنید.تا آنجا که به threejs مربوط می شود، هیچ تفاوتی بین مش از یک فایل gltf و حوزه رویه ای وجود ندارد. بسیاری از نمونه‌های خلاقانه از مکعب‌ها و کره‌ها استفاده می‌کنند و چیزی غیر از خود three.js بارگذاری نمی‌کنند.بارگذارهای هسته بسیار عمومی هستند، تصاویر و فایل‌ها را بارگیری می‌کنند و نمایش مستقیمی از threejs شی مانند Material یا Texture دارند. بارگیری های فرمت های خاص با این بلوک های ساختمانی ساخته می شوند.
