آموزش 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 خود.