آموزش Three.js

[saalek110]

پنجره Gui برای دسترسی به اعداد داخل برنامه:


استفاده از برنامه بالا در برنامه خودمان:

سالک:شاید شما هم پیش خودتون گفته باشید ، اینو به برنامه ام اضافه کنم ، خوب من هم همین فکر را کردم و این کار را انجام دادم. اون فایل را پیدا کردم و گذاشتم کنار برنامه ام و کدهای برنامه را وارد برنامه خود کردم.هر چی وسط تگ های script بود را کپی کردم بردم برنامه خودم.

نتیجه اینکه اون پنجره سیاه اومد روی برنامه من.




و وقتی در اون پنجره number را تغییر می دادم. در برنامه هم مقدار number تغییر می کرد. البته اسم کاملش را باید بنویسید:

alert(parameters.a);

یعنی کلمه parameters باید قبلش بیاید.
کد بالا را کجا بنویسیم؟ خیلی جاها میشه نوشت ولی من یک تابع ساختم که که با تابع setinterval هر ۱۰ ثانیه اجرا میشه ، اونجا نوشتم. قبلا در تاپیک کدش را گذاشتم.

پس ما یک پنجره کمکی روی برنامه خود داریم که کمک می کنه اعداد داخل برنامه را تغییر دهیم.

در انتهایش اگر ضربه بزنیم بسته میشه و دوباره اگر بزنیم باز میشه.

 

[saalek110]

جالا یک لحظه برگردیم به بحث قبلی:

یک نقلی کردیم از اون آقا در مورد shader ....
اجازه دهید چند خط دیگه بخونیم:

A shader is a program written in GLSL that is sent to the GPU. They are used to position each vertex of a geometry and to colorize each visible pixel of that geometry. The term "pixel" isn't accurate because each point in the render doesn't necessarily match each pixel of the screen and this is why we prefer to use the term "fragment" so don't be surprised if you see both terms.

Then we send a lot of data to the shader such as the vertices coordinates, the mesh transformation, information about the camera and its field of view, parameters like the color, the textures, the lights, the fog, etc. The GPU then processes all of this data following the shader instructions, and our
geometry appears in the render.
​

میگه shader یک برنامه است که با GLSL نوشته شده. که به GPU ارسال شده.
که هر ورتکس از جئومتری را مشخص می کند و هر پیکلس جئومتری را کالورایز می کند. احتمالا یعنی رنگ می کند.

سپس ما همه چیز را به shader می فرستیم.

سالک: حالا من خلاصه ترجمه کردم.اینم لینکش:

Shaders — Three.js Journey

The ultimate Three.js course whether you are a beginner or a more advanced developer

threejs-journey.com

سالک: من یک مقدار کدهای پوشه shader در پوشه js این بسته قدیمی را نگاه کردم..بعضی جاهاش شبیه زبان سی است ، مثلا کلمه main اومده و کلا حس و حال کدهای زبان سی را به من منتقل می کنه. حالا شاید کس دیگر چنین حسی پیدا نکند و حس من کاذب باش. پس گفتم GLSL را سرچ کنم ببینم چیه.

 

[saalek110]

OpenGL Shading Language (GLSL) is a high-level shading language with a syntax based on the C programming language. It was created by the OpenGL ARB (OpenGL Architecture Review Board) to give developers more direct control of the graphics pipeline without having to use ARB assembly language or hardware-specific languages.

OpenGL Shading Language - Wikipedia

en.wikipedia.org

سالک: انگار حس من درست می گفت. اولین زبانهایی که من کار کردم اسمبلی و سی بود. اسمبلی را در فروم گفتمان کار کروم. الان دیگه این فروم وجود نداره. اولین زبانی بود که آموزش دادم اسمبلی بود. بعدش سی پلاس کار کردم. بعدا سی شارپ و دلفی و php کار کردم.

در بالا گفته شده GLSL سینتکس زبان سی دارد. High level shading language است یعنی زبان سطح بالای shader نویسی . به وسیله فلان شرکت که در متن بالا گفته ایجاد شد تا به دولوپرها ، کنترل مستقیم بیشتر به گرافیک پیپ لاین بدهد ، بدون نیاز به ARB assembly یا زبانهای مختص سخت افزار.

پس GLSL یک راه راحت بوده و قبلش اون ARB assembly بوده.

سالک: فکر کنم به اندازه کافی در عمق ماجرا کنکاش کردیم.

خلاصه پس این شد که shader با زبان GLSL نوشته شده و GLSL هم یک زبانی شبیه سی است که به گرافیک پیپ لاین دست اندازی می کند و نیاز به زبانهای بدتر را برطرف کرده ، مثل ARB اسمبلی.

فکر نکنم بخواهید بفهمید گرافیک پیپ لاین چیه. می خواهید؟ دیگه دیر شد برای جواب دادن....


در گرافیک سه‌بعدی رایانه‌ای پایپ لاین گرافیک (به انگلیسی: graphics pipeline یا rendering pipeline) به سلسله‌ای از مراحل که برای ساختن صفحات ۲بعدی و برای نمایان کردن صحنه‌های ۳ بعدی استفاده می‌شود گویند. به زبان ساده وقتی یک نگاره ۳بعدی مانند تصاویری از یک بازی رایانه‌ای در رایانه ایجاد می‌گردد، پایپ لاین گرافیک به مجموعه پردازش‌هایی که این تصویر را بر نمایشگر قابل دیدن می‌سازد گویند.

پایپ‌لاین گرافیک - ویکی‌پدیا، دانشنامهٔ آزاد

fa.wikipedia.org

بهتره دیگه جلوتر نرویم و بحث را اینجا فعلا رها کنیم.
شاید یک روزی در این تاپیک و یا یک تاپیک دیگر، به این مسایل پرداختیم. فعلا برگردیم به ساخت برنامه three.js خود.

 

[saalek110]

GitHub - dataarts/dat.gui: Lightweight controller library for JavaScript.

Lightweight controller library for JavaScript. Contribute to dataarts/dat.gui development by creating an account on GitHub.

github.com

گویا dat gui مدت طولانی استفاده شده ، جایگزین امروزی اون فکر کنم اسمش lil gui است.

در بسته قبلی که برای ۸ سال پیش بود dat gui را داشت و من در پست زدم و به برنامه خودم هم افزودم و عکس گذاشتم. چند پست قبل.


حالا تاریخ این بسته برای دو سال پیش است. دکمه سبز را بزنید و دانلود زیپ را بزنید.

ممکن است همون باشه. شکلش که موقع اجرا همون است ، اسم فایلش هم همان است.

در پوشه تست اون یک برنامه است که وقتی اجرا میشه اینها را می نویسد:

Tests completed in 1339 milliseconds.
258 tests of 258 passed, 0 failed.

Color Math: rgb_to_hex (0, 1, 1)Rerun
Color Math: component_from_hex (0, 3, 3)Rerun
Color Math: hex_with_component (0, 3, 3)Rerun
Color Math: rgb_to_hsv (0, 9, 9)Rerun
Color Math: hsv_to_rgb (0, 6, 6)Rerun
Color Interpretations: CSS Strings (0, 20, 20)Rerun
Color Interpretations: Other (0, 36, 36)Rerun
Color Objects: Creation (0, 8, 8)Rerun
Color Objects: RGB Modification (0, 8, 8)Rerun
Color Objects: RGB Modification (0, 8, 8)Rerun
Color Objects: Setting RGB, Modifying HSV (0, 4, 4)Rerun
Color Objects: Setting HSV, Modifying RGB (0, 4, 4)Rerun
Color Objects: Grayscale Hue (0, 2, 2)Rerun
Color Objects: Black Hue (0, 1, 1)Rerun
Controller: Retrieves values (0, 4, 4)Rerun
Controller: Sets values (0, 1, 1)Rerun
BooleanController: Acknowledges original values (0, 2, 2)Rerun
BooleanController: Modifies values (starting true) (0, 6, 6)Rerun
BooleanController: Modifies values (starting false) (0, 6, 6)Rerun
OptionController: Populates with string array (0, 6, 6)Rerun
OptionController: Populates with map (0, 3, 3)Rerun
OptionController: Acknowledges original value (0, 1, 1)Rerun
OptionController: Modifies values (0, 2, 2)Rerun
StringController: Acknowledges original value (0, 1, 1)Rerun
StringController: Modifies values (0, 1, 1)Rerun
NumberController: Constraints (0, 3, 3)Rerun
NumberControllerBox: Acknowledges original value (0, 1, 1)Rerun
NumberControllerBox: Modifies value (0, 2, 2)Rerun
NumberControllerBox: Handles invalid input (0, 2, 2)Rerun
NumberControllerBox: Handles drag (0, 1, 1)Rerun
NumberControllerSlider: Acknowledges original value (0, 1, 1)Rerun
NumberControllerSlider: Modifies values (0, 5, 5)Rerun
ColorController: Get Color (0, 1, 1)Rerun
Controller Events: onChange (0, 6, 6)Rerun
Controller Events: onFinishChange (0, 6, 6)Rerun
GUI Appearance: Auto placement (0, 8, 8)Rerun
GUI Appearance: Auto placement scroll (0, 0, 0)Rerun
GUI Appearance: close/open button position (0, 3, 3)Rerun
GUI Appearance: Folders (0, 8, 8)Rerun
GUI Controller Methods: options (0, 20, 20)Rerun
GUI Controller Methods: name (0, 2, 2)Rerun
GUI Controller Methods: listen (0, 0, 0)Rerun
GUI Controller Methods: remove (0, 2, 2)Rerun
GUI Controller Methods: removeFolder (0, 2, 2)Rerun
GUI Controller Methods: min, max & step (0, 10, 10)Rerun
GUI Controller Augmentation: Adds NumberControllerBox to sliders (0, 1, 1)Rerun
GUI Controller Augmentation: Clickable rows for BooleanControllers (0, 3, 3)Rerun
GUI Controller Augmentation: Clickable rows for FunctionControllers (0, 3, 3)Rerun
GUI Saving: Remembering values (0, 4, 4)Rerun
GUI Saving: Presets (0, 18, 18)Rerun

لینک زیر برای رنگ روشن آن است. فایل css دارد:

GitHub - liabru/dat-gui-light-theme: a light theme for dat.gui

a light theme for dat.gui. Contribute to liabru/dat-gui-light-theme development by creating an account on GitHub.

github.com

 

[saalek110]

من حین ساخت دنیای خود ، کدهایش را اینجا میگم.

اگر بخواهید یک مکعب جلوی شما خلق بشود ، بسته به زاویه نگاه شما دارد. مثلا اگر به سمت شمال نگاه کنید مکعب باید در سمت شما شما ایجاد شود و با یک فاصله از دوربین. و اگر به شرق نگاه کنید ، مکعب باید در سمت شرق شما ایجاد شود ، با یک فاصله. در برنامه من اون فاصله را فعلا ۲۰ گرفتم.

    mesh.position.x = camera.position.x+Math.sin(rotation)*-20;
    mesh.position.y = camera.position.y-1;
    mesh.position.z = camera.position.z+Math.cos(rotation)*-20;

اون یک واحد که از y کم کردم ، بخاطر قد انسان است. چون می خواهید مکعب روی زمین خلق بشود نه روی هوا.

باقی کد را دیگه ننوشتم. از کدهای دیگر کمی کنید. شامل ایجاد جئومتری و ایجاد تکسچر و ایجاد متریال و ایجاد شی .
یادتون هست که شی از جئومتری و ماتریال ساخته میشد.
من فقط کد مکان نشستن شی را گفتم. کد افزودن به صحنه یا scene هم فراموش نشود.

الان در برنامه من با زدن یک دکمه ، جلوی دید او یک مکعب خلق می شود.
در مورد ساخت دکمه ها و کدش قبلا صحبت کردیم. از همون کدها من کپی کردم برای دکمه های جدید.

برای خیلی جاها کد بالا کاربرد دارد، مثلا شلیک گلوله. فوران آب شلنگ. و خیلی چیزهای دیگر.

 

[saalek110]

یک برنامه به نام حصار کشی ، چند پست قبل داشتیم ، که با حلقه یک سری آبجکت ساخت ،
در اخر ، ابجکت ها را در متغیر می ریخت.

من همین کارو کردم. و بعد توانستم با آوردن اسم متغیر و شماره ای که داخل آرایه ذخیره شده بود مقدار x آبجکت را تغییر دهم. شی هایی که به طور خودکار تولید می شود را داخل آرایه می ریزند تا قابل حرکت دادن باشد و کارهای دیگر هن بشود با آنها کرد.

در گام بعد خواستم ببینم شی قبلی را هم میشه حرکت داد ، پس نوشتم:

st[ct-1].position.x+=1;

و دیدم بله میشه.
یعنی با زدن دکمه ای ، دو شی خلق کردم و بعد با زدن دو دکمه متفاوت قادر بودم دو شی را جداگانه حرکت دهم.
پس کافیه شماره آبجکت در آرایه را بدانید تا بتوانید آن را حرکت دهید.

 

[saalek110]

خیابان کشی:

در تاپیک ، کد رسم چمن را داریم
و همچنین کد حصار کشی را.
من فکر می کنم خیابان کشی باید با روش رسم چمن باشد ، چون اگر بخواهیم هر تکه خیابان را جدا رسم کنیم برنامه سنگین میشه.

 

[saalek110]

نکته خیلی مهم:

اگر برنامه بزرگ است ، روی کپی برنامه اصلی کار کنید ، تا اگر خطایی ایجاد شد که نمی شود پیدا کرد ، کپی را دیلت کنید و یک کپی دیگر بگیرید و روی اون کار کنید.


این کار خیلی راحت تر از اینه که دقایق زیادی برای پیدا کردن خطا صرف کنید.

همچنین یک کپی از برنامه اصلی را در یک پوشه نگه دارید که اگر اشتباهی فایل دیلت شد کپی اش را داشته باشید. بهرحال هر اشتباهی ممکن است پیش بیاید ، باید از قبل برای هر اشتباهی تمهیداتی داشت.

همین تاپیک که کدها را من درش می زنم یک کپی از کل کدها برای من است. اگر کدی خراب شود از تاپیک کپی می کنم.

 

[saalek110]

نمایش مختصات بازیکن بالای برنامه:


قبلا گفتم چطوری تابعی بسازید که هر چند ثانیه اجرا بشود ، با setintervel در اول init

من بعد body یعنی اول برنامه یک پراگراف ساختم. این طوری:

    <p id="p1">hello</p>

بعد در تابع تایمر این را نوشتم:

       let q1 = document.getElementById("p1");
              q1.innerHTML ="welcome";

اسم q1 ساختگی و دلخواه است.
این کار باعث شد متن پاراگراف عوض بشه.

بعدش به کد زیر تبدیل کردم:

              q1.innerHTML =camera.position.x;

که x دوربین را بالای برنامه نمایش می دهد.

شاید بشه در تابع animate هم نوشت ولی تابع animate فرکانس اجرایش خیلی بالاست و به نظر من نباید یک پروسسی که هر دو ثانیه نیاز به اجرا داره را در تابع animate بیاندازیم. چون یک پردازش اضافه با سرعت تکرار بالاست و حیفه مشغولیت بی خودی برای سیستم ایجاد کنیم. تایمر کد بالا را میشه یک ثانیه یا نیم ثانیه یا حتی چند ثانیه تنظیم کرد. بنا به نیاز اون کار است. مثلا اگر گاهگاهی می خواهید ببینید کجای زمین هستید ، ده ثانیه هم خوبه. ولی برای بعضی کارها خوب باید زودتر اعلام بشه. این دیگه به موقعیت و نیاز شما بستگی دارد.

من مدتها قبل یک بازی دیدم که با همین ساخت تایمر ، افتادن بلوک ها را مدیریت می کرد. یعنی هر نیم ثانیه بررسی می کرد زیر بلوک خالی هست یا نه، اگر خالی بود سقوطش می داد. این جوری ازهدر رفتن سیستم با چک پشت سر هم و با فرکانس بالا جلوگیری کرده بود.

 

[saalek110]

یک نکته هم در مورد بازی سازی بگم..

نباید همه اشیای بازی را نمایش داد ، چون فشار بیخودی است.
اون اشایی را اجرا کنید که اطراف بازیکن است.
در یک سایت سه بعدی که بودم ، دورها را نمیشد دید ، باید می رفتی جلو تا ببینی اون جلو چیه. البته آزاردهنده بود چون خوب قضیه اجرا نشده بود.
مثلا یک کوه باید کلیاتش اجرا بشه ، چون کوه از دور دیدن داره. از نزدیک که میشه زمین.
بعضی بازی سازها بهتر این را اجرا کرده اند.
یک بازی ماشین بود ، باز ار یک فاصلهوای بیشتر را نمایش نمی داد و انگار اشیا از تاریکی بیرون می آمدند ، جوری بود که به جای اینکه حواس آدم به بازی باشه ، به یهو پدیدار شدن اشیا نگاه می کردی.

 

[saalek110]

لامبرت متریال و بیسیک متریال

https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene

https://codepen.io/rachsmith/pen/qbKvdd

در شکل بالا دو مکعبی که با فلش قرمز نشان داده ام ، یک تکسچر دارند ولی سمت راستی لامبرت متریال است و سمت چپی بیسیک متریال.

چمن هم لامبرت است. اثر منبع نور را روی چمن و مکعب سمت راستی می بینید.

light.intensity = 0.5;
light.color.setHex( 0xff0000 );

شدت و رنگ نور ، را در کد بالا می بینیم.

 

[saalek110]

کد چرخش:

    mesh.rotateZ(Math.PI/180 * 90);

کد بالا برای چرخش ۹۰ درجه ای است.
محیط دایره 2pr بود. مساحت pr^2 پی * آر به توان ۲.
ما اینجا با محیط کار داریم نه مساحت. پس اگر ۲p محیط بود ، نصف محیط میشه p و اگر تقسیم بر ۱۸۰ کنیم میشه درجه. در فرمول بالا نصف محیط را تقسیم بر ۱۸۰ کرده تا درجه بدست بیاید. ولی اگر یادتون باشه از ریاضی ، پی تقسیم بر دو همان ۹۰ درجه بود. در فرمول بالا ، هم ۹۰ را با ۱۸۰ ساده کنی ، یعنی هر دو را تقسیم بر ۹۰کنیم ، همون p/2 میشه. اون Z را اگر بزارید به جاش X یا Y میشه چرخش در جهات دیگر.



----------------------
برای چرخش ۹۰ درجه ، میشه ۶ تا ۱۵ درجه در نظر گرفت ، یعنی با ۶ بار دکمه زدن ، بشود ۹۰ درجه ، و ۱۵ درجه میشه یک ششم ۹۰ درجه که میشه عدد پی تقسیم بر ۱۲.چون ۹۰ درجه عدد پی تقسیم بر ۲ بود.

این ۶ بار دکمه زدن برای چرخش ۹۰ درجه را از یک محیط ۳ بعدی یادمه و بهش عادت کرده بودم. ولی نمیگم ایده آل است یا بد. فقط یک تصمیم بوده در یک طراحی.

 

[saalek110]

بازدید به ۸ هزار رسید.

 

[saalek110]

نرم افزارهای اسکن مدل در گوگل استور....
یک شی را از هر طرف فیلم یا عکس می گیریم. مدل سه بعدی آن تهیه می شود.

 

[saalek110]

من در اون محیط سه بعدی که دارم می سازم ، مشغول ذخیره آبجکت ها در دیتابیس هستم.
به نظرم ستون های جدول آبجکت ها، برای مختصات و سایز آبجکت ها باید float باشه نه int.
چون برای چیدن دقیق تر و سایز دقیق تر اجسام ، اعداد اعشاری است.

 

[saalek110]

تغییر سایز یک شکل ، مثلا دو برابر کردن:

mesh.scale.x = 500;

برای ابعاد دیگر به جای x حروف y و z را بگذارید.



منبع:

How to change width of CubeGeometry with Three.js?

I have a CubeGeometry and a mesh, and I don't know how to change the width (or height but I can change x, y and z though). Here is a snippet of what I have right now: const geometry = new THREE.

stackoverflow.com

 

[saalek110]

AVE3D - 3D Model Viewer and Ex - Apps on Google Play

3D model viewer that supports many formats. There is also a export feature.

play.google.com

نرم افزار لود مدل ها

 

[saalek110]

در جاوا اسکریپت هر متغیری بیرون تابع تعریف شود عمومی است.
یعنی تابع به متغیرهای بیرون تابع دسترسی دارد.
و متغیرهایی که درون تابع تعریف شود محلی است.

 

[saalek110]

استفاده از پسوند php و خارج کردن قطعاتی از برنامه:


سورس های three.js با پسوند html ذخیره می شوند.

ولی من فایلم را با پسوند php ذخیره می کنم. اگر فایل با پسوند php ذخیره شود روی هاست اجرا می شود و اگر می خواهید روی دستکاه شما اجرا شود نرم افزارهای خاص اون را باید استفاده کنید که من نرم افزار اون را در تاپیک های دیگر معرفی کرده ام ، مثل ksweb.

من خوب می خوام بتونم اطلاعات برنامه را در سرور ذخیره کنم ، و نیاز دارم که پسوند php باشه.
همچنین داشتن پسوند php به من کمک می کند که تکه هایی از برنامه را بیرون بذارم و include کنم داخل برنامه.

<?php $txt1="arz"; $id1="select_x"; include"my_select.php";?>

خط بالا ، یک خط برنامه من است.
و خط زیر ، فایلی است که در خط بالا inclue شده.

<?php
?>

<form id="myForm2">
  <?php echo $txt1; ?>
 <?php   echo'<select id="'.$id1.'">'; ?>
        <option>5</option>
        <option>4</option>
        <option>3</option>
        <option>2</option>
        <option>1</option>
        <option >0.5</option>
        <option>0.2</option>
        <option>0.1</option>
       </select>
  </form>
<?php
?>

چون من ۶ جا ، نیاز به فرم select از html داشتم و اگر ۶ جا ، این همه خط را در برنامه نگه می داشتم ، برنامه دراز میشد و باید مدام از روی این قسمت رد می شدم.
داخل فایل include شده می بینید که قسمتهایی با php جایگزین شده. مثلا id سلکت از داخل خود برنامه تعیین شده و نوشته بالای سلکت هم در همون خط داخل برنامه تعیین شده و فقط قسمت تکراری داخل فایل تعیین میشه.
کار فایل بالا ، نمایش دادن اعدادی است تا کاربر از میان اون اعداد ، عددی را انتخاب کند. و اون عدد با جاوا اسکریپت خونده میشه و وارد برنامه میشه.


خیلی قسمتهای برنامه را این طوری من از برنامه اصلی خارج کردم.
جایگزینش تابع است.که داخل فایل با پسوند js قرار بگیرد من از فایل با پسوند js که اصولی این کار است استفاده نمی کنم ، چون فایلهای با پسوند ‌js و css کچ می شوند و وقتی من داخلشون را عوض می کنم ، همون فایل قدیمی کچ شده باز استفاده میشه و باید کچ بروسر را با رفتن در تنظیمات بروسر خالی کرد و این دردسر داره.
فایلهای js برای برنامه نهایی خوبه ، چون با یک بار لود شدن دیگه لود نمیشه ، و صرفه جویی در لود است. ولی برنامه من در حال ساخت است و فعلا نهایی نشده.

 

[saalek110]

کوکی راه ارتباطی بین جاوا اسکریپت و php:

من با استفاده از کوکی ، اطلاعات برنامه را به قسمت php منتقل می کنم و کدهای ‌php می تواند اطلاعات را در دیتابیس ذخیره کند. مثلا وقتی کاربر یک مکعب می سازد ، داخل کوکی هم نوشته می شود و موقع ذخیره ،کدهای ‌php ، اطلاعات را از کوکی ها می خوانند و نمایش می دهند.

هر کوکی یک اسم داره و یک مقدار.
مثلا مکعب ۳ مقدار x و y و z داره. که با اسمهای x1 و y1 و z1 داخل کوکی ذخیره میشه. و کدهای php هم می آیند با ساختن همین اسمها ، مقادیر اونها را می خوانند. یک حلقه در php می سازیم و از x1 تا xn ، ایکس ها را می خوانیم.

for ($e = 1; $e <= $n; $e++)
{


$u=strval($e);
$cookie_name='x'.$u;  // sakhtane esme cookie




}  // for loop

اینکه ‌n چند است را هم قسمت جاوا اسکریپت در کوکی می نویسد، مثلا با اسم n ، ،مقدارش را در کوکی می نویسد. مثلا وقتی کاربر ۲۰ تا مکعب می سازد ، n میشه 20 و در کوکی ایکس های مکعب ها ، با اسمهای x1 تا x20 ذخیره می شود. برای y و z و و a و b و ‌c که ابعاد مکعب است و باقی اطلاعات مکعب هم همین طور عمل می شود.