آموزش Three.js

saalek110 · امروز در 8:31 قبل از ظهر

سالک: اینکه three.js مقداری یا همش برپایه webgl است یک بحث است.
اون اقا یا خانم هم در ۳ پست قبل می گفت اگر webgl شروع می کردید ، shader ها اولین چیزهایی بود که باید کار می کردید.

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

پس کمی در مورد shader ااطلاعات کسب کردیم.

saalek110 · امروز در 9:03 قبل از ظهر

بسته فوق ، یک پوشه داره به نام mathbox

نتیجه اجرای یک از اونها عکس زیر است:

اولش داریم:

JavaScript:

    <script src="dat.gui.js"></script>

کلش هم اینه:

JavaScript:

<!doctype html>
<html lang="en">
<head>
    <title>DAT.GUI</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="dat.gui.js"></script>
</head>
<body>

<script>

var gui = new dat.GUI();

// Note: variables used by dat.gui do not need to be declared within an object;
//  they can be global variables, in which case replace the object name ("parameters" in this example)
//  by "this" when adding the controls to the gui object below.

var parameters =
{
    a: 200, // numeric
    b: 200, // numeric slider
    c: "Hello, GUI!", // string
    d: false, // boolean (checkbox)
    e: "#ff8800", // color (hex)
    f: function() { alert("Hello!") },
    g: function() { alert( parameters.c ) },
    v : 0,    // dummy value, only type is important
    w: "...", // dummy value, only type is important
    x: 0, y: 0, z: 0
};

gui.add( parameters, 'a' ).name('Number');
gui.add( parameters, 'b' ).min(128).max(256).step(16).name('Slider');
gui.add( parameters, 'c' ).name('String');
gui.add( parameters, 'd' ).name('Boolean');

gui.addColor( parameters, 'e' ).name('Color');

var numberList = [1, 2, 3];
gui.add( parameters, 'v', numberList ).name('List');

var stringList = ["One", "Two", "Three"];
gui.add( parameters, 'w', stringList ).name('List');

gui.add( parameters, 'f' ).name('Say "Hello!"');
gui.add( parameters, 'g' ).name("Alert Message");

var folder1 = gui.addFolder('Coordinates');
folder1.add( parameters, 'x' );
folder1.add( parameters, 'y' );
folder1.close();
gui.open();

</script>

</body>
</html>

saalek110 · امروز در 9:18 قبل از ظهر

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

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

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

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

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

JavaScript:

alert(parameters.a);

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

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

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

saalek110 · امروز در 11:41 قبل از ظهر

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

یک نقلی کردیم از اون آقا در مورد 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 · امروز در 11:56 قبل از ظهر

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 · امروز در 5:29 بعد از ظهر

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 را داشت و من در پست زدم و به برنامه خودم هم افزودم و عکس گذاشتم. چند پست قبل.

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

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

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

JavaScript:

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 دارد: