WebGL چیست؟ – آموزش وب جی ال – به زبان ساده و گام به گام

WebGL استانداردی برای پیاده‌سازی گرافیک کامپیوتری سه‌بعدی در وب است. ممکن است برخی از افرادی که با یک کتابخانه رندرینگ گرافیک (Graphics Rendering) آشنایی دارند، چیزهایی راجع‌به WebGL شنیده باشند و حالا این سوال برایشان به وجود آمده است که WebGL چیست ؟ در این نوشته، به این سوال پاسخ داده شده است و علاوه بر آن، پیرامون سایر مباحث مربوط به WebGL، از جمله OpenGL، رندرینگ شتاب‌یافته با GPU، تاریخچه، کاربردها، کتابخانه‌ها و فریم‌ورک‌های WebGL بحث شده است. از همه مهم‌تر، آموزش وب جی ال در سطح مقدماتی و به بیان ساده در این مطلب پوشش داده شده است. دوره‌های آموزشی مرتبط برای یادگیری WebGL نیز در این مقاله معرفی شده‌اند.

OpenGL چیست ؟

فیلم آموزش گرافیک کامپیوتری با OpenGL در فرادرس

کلیک کنید

به این ترتیب OpenGL در سال ۱۳۷۰ متولد شد. موارد و نکات مهمی که پیرامون OpenGL و چیستی آن قابل بیان هستند، در ادامه مطلب «WebGL چیست» فهرست شده است:

• OpenGL یک API سطح پایین برای رندرینگ گرافیکی دو‌بُعدی و سه‌بُعدی گرافیک‌های برداری به حساب می‌آید.
• OpenGL با زبان C نوشته و خلق شده است. OpenGL در Fortran ،C++‎ ،C و جاوا وابستگی زبانی (Language Binding) دارد. به این معنی که کتابخانه‌های OpenGL در این زبان‌ها قابل استفاده است.
• OpenGL با GPU (واحد پردازش گرافیکی | Graphical Processing Unit) برای دست‌یابی به رندرینگ شتاب‌یافته سخت‌افزاری (Hardware Accelerated Rendering) تعامل برقرار می‌کند.
• OpenGL استانداردی برای رندر کردن تصاویر و ارسال آن به صفحه نمایش از طریق کارت گرافیک است.
• OpenGL این امکان را به وجود می‌آورد که تصاویر گرافیکی از سیستم عامل و سیستم پنجره‌ای مستقل باشند.

همان‌طور که بیان شد، یکی از کلیدی‌ترین ویژگی‌ها در OpenGL، شتاب‌یافتگی سخت‌افزاری است. در اینجا این سوال به وجود می‌آید که رندرینگ شتاب‌یافته سخت‌افزاری یا Hardware Accelerated Rendering چیست؟ به بیان ساده در پاسخ به این سوال می‌توان گفت که OpenGL از کارت گرافیک کامپیوتر (GPU) برای سرعت بخشیدن به عملیات پردازشی استفاده می‌کند. در ادامه مطلب «WegbGL چیست» توضیحات بیش‌تری پیرامون مفهوم Hardware Accelerated Rendering ارائه شده است.

Hardware Accelerated Rendering چیست ؟

فیلم آموزش گرافیک کامپیوتری با OpenGL در فرادرس

کلیک کنید

GPU چیست ؟

مقایسه GPU ‌با CPU

فیلم آموزش گرافیک کامپیوتری و مفاهیم کلیدی در فرادرس

کلیک کنید

شتاب سخت‌افزاری چیست‌؟

رندرینگ به چه معنا است؟

فیلم آموزش موتور رندرینگ آرنولد در Maya در فرادرس

کلیک کنید

رندرینگ شتاب‌یافته سخت‌افزاری چیست؟

بنابراین، GPU در یک رویکرد شتاب‌یافته سخت‌افزای، ابزار مناسبی برای انجام محاسبات (رندرینگ) روی تصاویر به حساب می‌آید. این مسئله بسیار جذاب به نظر می‌رسد، اما ارتباط آن با WebGL چیست ؟ در ادامه مطلب «WebGL چیست» به شرح مفهوم WebGL و ارتباط آن با GPU و Hardware Accelerated Rendering پرداخته شده است. پیش از آن، دوره آموزشی گرافیک کامپیوتری با OpenGL معرفی شده است.

WebGL چیست ؟

فیلم آموزش گرافیک کامپیوتری و مفاهیم کلیدی در فرادرس

کلیک کنید

واضح است که «Web» به عبارت «World Wide Web» به معنی «تارنمای جهان‌گستر» یا «شبکه جهانی وب» اشاره دارد. «GL» سرنامی برای عبارت «Graphics Library» به معنی «کتابخانه گرافیک» است. GL ریشه در عبارت دیگری به نام OpenGL دارد که در بخش قبل معرفی شد. به بیان ساده، WebGL استانداردی برای اجرای وظایف OpenGL در مرورگر است. در ادامه مطلب «WebGl چیست»، تاریخچه‌ای از WebGL ارائه شده است.

تاریخچه WebGL

WebGL از تجربیات و آزمایشات Canvas سه بُعدی پدید آمد و آغازگر آن ولادمیر وُکیچیویچ (Vladimir Vukićević) از شرکت موزیلا است. وُکیچیویچ ابتدا یک نمونه اولیه Canvas سه‌بُعدی را در سال ۱۳۸۵ به نمایش گذاشت. تا اواخر سال ۱۳۸۶ هم موزیلا و هم اوپِرا، پیاده‌سازی جداگانه مربوط به خودشان را از Canvas سه‌بُعدی ساخته بودند.

فیلم آموزش گرافیک کامپیوتری با OpenGL در فرادرس

کلیک کنید

کاربردهای WebGL چه هستند ؟

در ادامه مطب «WebGL چیست» به چگونگی اجرای WebGL اشاره شده است.

چطور می‌توان WebGL ‌را اجرا کرد ؟

فیلم آموزش گرافیک کامپیوتری با OpenGL در فرادرس

کلیک کنید

وب‌سایت رسمی WebGL یک صفحه آزمایش رسمی برای این منظور فراهم کرده است. در ادامه مطلب «WebGL چیست» به ارائه فهرستی از مرورگرهایی پرداخته شده است که می‌توانند کدهای مربوط به WebGL را رندر کنند و تصاویر ساخته شده با آن را نمایش دهند.

مرورگرهای پشتیبانی کننده از WebGL

در این بخش از مطلب «WebGL چیست»، فهرستی از مرورگرهایی آمده است که از اجرای WebGL پشتیبانی می‌کنند. ابتدا، فهرستی از مرورگرهای دسکتاپ و اطلاعاتی پیرامون نحوه پشتیبانی آن‌ها از WebGL ارائه و پس از آن، همین کار برای مرورگرهای موبایل انجام شده است.

مرورگرهای دسکتاپ

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

• گوگل کروم: WebGL 1.0 از اواخر سال ۱۳۸۹ در تمام پلتفرم‌هایی فعال شده است که دارای کارت گرافیک قادر به رندر کردن WebGL باشند. در ویندوز، کروم به صورت پیش‌فرض از رندر کننده ANGLE (موتور لایه گرافیکی شبه محلی) برای ترجمه «OpenGL ES» به «Direct X 9.0c» استفاده می‌کند. اگرچه، در لینوکس و Mac OS X رندر کننده پیش‌فرض OpenGL است. همچنین، در ویندوز این امکان وجود دارد که به اجبار OpenGL را به عنوان رندر کننده تعیین کرد. از اواسط سال ۱۳۹۲ کروم رندر کننده جدیدتر Direct3D 11 را به کار می‌برد که در هر صورت نیازمند یک کارت گرافیک جدیدتر است. از نسخه ۵۶ به بعد، کروم از WebGL 2.0 پشتیبانی می‌کند.
• موزیلا فایرفاکس: WebGL 1.0 از نسخه 4.0 موزیلا در تمامی پلتفرم‌هایی فعال است که دارای کارت گرافیک لازم به همراه درایورهای به‌روز شده باشد. از سال ۱۳۹۲ فایرفاکس در پلتفرم ویندوز به وسیله ANGLE از DirectX هم پشتیبانی می‌کند. همچنین، فایرفاکس از نسخه ۵۱ به بعد از WebGL 2.0 پشتیبانی می‌کند.
• سافاری: Safari 0.6 و نسخه‌های جدیدتری که در سیستم عامل Mac OS X Lion ،OS X Mountain Lion و سافاری نسخه ۵.۱ در Mac OS X Snow Leopard پشتیبانی برای WebGL 1.0 را پیاده‌سازی کرده‌اند. این پشتیبانی قبل از سافاری ۸ غیرفعال شده بود. در حال حاضر، سافاری نسخه ۱۲ که در سیستم عامل MacOS Mojave به صورت پیش‌فرض نصب شده، پشتیبانی برای WebGL 2.0 را به عنوان یک قابلیت آزمایشی در دسترس قرار داده است.
• اوپرا: WebGL 1.0 در اوپرا ۱۱ و ۱۲ پیاده‌سازی شده است، اگر چه در سال ۱۳۹۳ به صورت پیش‌فرض غیرفعال بود. نسخه ۴۳ به بعد اوپرا از WebGL 2.0 پشتیبانی می‌کند.
• اینترنت اکسپلورر: WebGL 1.0 تا حدودی در اینترنت اکسپلورر ۱۱ پشتیبانی می‌شود. در ابتدا، IE در اکثر تست‌های انطباق رسمی WebGL شکست خورد، اما بعدتر مایکروسافت به‌روزرسانی‌های بسیاری را منتشر کرد. نسخه 0.94 موتور WebGL تقریباً‌ تا ۹۷ درصد از آزمایش‌های کرونوس را با موفقیت پشت سر گذاشته است. همچنین، امکان اضافه کردن پشتیبانی WebGL‌ به نسخه‌های قدیمی‌تر اینترنت اکسپلورر به صورت دستی با استفاده از افزونه‌های شخص ثالث نظیر EWebGL وجود دارد.
• مایکروسافت اج: نسخه پایدار اولیه اج از WebGL نسخه 0.9۵ (نام زمینه: "experimental-webgl") با زبان GLSL متن‌باز و کامپایلر مبدأ به مبدأ HLSL پشتیبانی می‌کند.

در ادامه این بخش از مطلب «WebGL چیست» مرورگرهای دستگاه‌های همراهی معرفی شده‌اند که از WebGL پشتیبانی می‌کنند.

مرورگرهای موبایل

در این بخش از مطلب «WebGL چیست»، مرورگرهای تلفن همراه پشتیبانی کننده از WebGL به همراه توضیحات لازم فهرست شده است:

• مرورگر اندروید: به‌طور کلی از WebGL پشتیبانی نمی‌کند، اما سری Sony Ericsson Xperia قابلیت‌های WebGL را در پی یک به‌روزرسانی ثابت‌افزار (Firmware) ارائه می‌کردند.
• اینترنت اکسپلورر: WebGL 1.0 در Windows Phone 8.x در دسترس است.
• فایرفاکس برای موبایل: WebGL 1.0 برای دستگاه‌های اندرویدی و MeeGo از نسخه ۴ فایرفاکس در دسترس است.
• Firefox OS: وب‌جی‌ال برای سیستم عامل شرکت موزیلا به نام Firefox OS نیز در دسترس است.
  
• گوگل کروم: WebGL 1.0 برای دستگاه‌های اندرویدی از نسخه ۲۵ گوگل کروم در دسترس و به صورت پیش‌فرض از نسخه ۳۰ به بعد فعال است .
• مایکروسافت اج: WebGL 1.0 در ویندوز ۱۰ موبایل در دسترس است.
• اوپرا موبایل: نسخه ۱۲ اوپرا موبایل از WebGL 1.0 (تنها در اندروید) پشتیبانی می‌کند.
• iOS: وب‌جی‌ال نسخه ۱ برای سافاری موبایل از iOS 8 در دسترس است.

در ادامه مطلب «WebGl چیست» نوبت به آموزش WebGL می‌رسد که به زبان ساده ارائه شده است.

آموزش WebGL

در این بخش از مطلب «WebGL چیست» به آموزش WebGL ‌پرداخته شده است. در ابتدا نکاتی پیرامون شروع آموزش WebGL و فناوری‌های مربوط به آن ارائه خواهد شد. در ادامه، دستور کار ساده‌‌ای برای پیاده‌سازی WebGL برای آشنایی کلی با نحوه پیاده‌سازی آن شرح داده شده است.

فیلم آموزش گرافیک کامپیوتری با OpenGL در فرادرس

کلیک کنید

شروع کار با WebGL

در این بخش از آموزش WebGL با هدف ارائه پیش‌زمینه‌ای برای شروع کار با WebGL، نکات لازم شرح داده شده است. همان‌طور که بیان شد، WebGL امکان استفاده محتوای وب از یک API بر پایه OpenGL ES 2.0 را برای اجرای رندرینگ دوبعدی و سه‌بعدی با عنصر HTML5 Canvas در مرورگرهایی فراهم می‌کند که از آن بدون استفاده از افزونه پشتیبانی کنند.

استفاده از کتابخانه‌های سطح بالا برای پیاده‌سازی WebGL

فیلم آموزش گرافیک کامپیوتری و مفاهیم کلیدی در فرادرس

کلیک کنید

در واقع، این کتابخانه‌ها در نقش رابط بین کاربر و WebGL، امکانات این ابزار تولید گرافیک را در اختیار افراد قرار می‌دهند. در ادامه دو کتابخانه رایج، محبوب و کلیدی

فیلم آموزش گرافیک کامپیوتری و مفاهیم کلیدی در فرادرس

کلیک کنید

معرفی Three.js و p5.js

یکی دیگر از قابلیت‌های p5.js، یک رندر کننده (Renderer) برای WebGL است. در تاریخچه پردازش، یکی از ایده‌های اصلی و کلیدی این است که بتوان کدهایی را برای تولید و رندر کردن تصاویر دوبُعدی نوشت و بعد با یک قابلیت ساده و درست مثل فشردن یک دکمه، از همان کدها در فضای سه‌بُعدی به‌گونه‌ای استفاده کرد که امکان افزودن موارد بیش‌تر وجود داشته باشد.

در p5.js از چنین ایده‌ای برای رندر کردن تصاویر سه‌بعدی استفاده می‌شود؛ گرچه شیوه کار فناوری Three.js متفاوت است و این فرآیند به شکل کاملاً متفاوتی انجام می‌شود. هدف در p5.js این است که بتوان یک طراحی اولیه دوبُعدی انجام داد و سپس به گونه‌ای آن را به یک تصویر سه‌بُعدی تبدیل کرد و قابلیت‌های جدیدی را به آن افزود. در ادامه، ایده کلی استفاده از WebGL برای رندر کردن به صورت سه‌بُعدی در p5 شرح داده شده است.

چگونه می‌توان WebGL را در p5.js پیاده‌سازی کرد؟

فراهم کردن امکان استفاده از WebGL در p5.js بسیار ساده است. CreateCanvas تابعی است که در آن عرض و ارتفاع برای یک زمینه گرافیکی (Graphics Context) تعیین می‌شود. این زمینه گرافیکی همان زمینه‌ای است که قصد انجام ترسیم گرافیکی روی آن وجود دارد. به صورت پیش‌فرض این زمینه گرافیکی یک Canvas دوبُعدی در HTML5 است.

فیلم آموزش گرافیک کامپیوتری و مفاهیم کلیدی در فرادرس

کلیک کنید

در صورتی که یک آرگومان سوم با نام WEBGL به تابع CreateCanvas اضافه شود، زمینه Canvas تبدیل به یک زمینه سه‌بُعدی می‌شود و امکان فراخوانی توابع جدیدی به وجود می‌آید. از جمله مباحثی که در زمینه آموزش WebGL برای تولید تصاویر سه‌بعدی در p5.js مطرح می‌شوند، می‌توان به موارد زیر اشاره کرد:

• هندسه سه‌بُعدی (3D Geometry)
• مباحث مربوط به دوربین
• بافت‌ها (Texture)
• مواد (Material)
• نور (Light)

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

مثال ساده WebGL با p5.js

خروجی کدهای بالا به صورت زیر خواهد بود:

هدف از ارائه این مثال بیان این مسئله است که با به کارگیری آرگومان WEBGL، زمینه رندرینگ تغییر و به دنبال آن قابلیت‌های کاردکردی p5.js نیز تغییر کرده است. اما چرا رنگ تعیین شده در تصویر سه‌بُعدی دیده نمی‌شود؟ دلیلش این است که در فضای سه‌بُعدی امکان تشخیص رنگ بدون وجود نور ممکن نیست. چرا محل عنصر در Canvas به مختصات (0,0) تغییر کرده است؟ به این دلیل که p5 WebGL نقطه مبدأ را در مرکز Canvas و نه بالاترین قسمت سمت چپ در نظر می‌گیرد.

دستور کار ساده پیاده‌سازی WebGL

به زبان ساده و به طور خلاصه، برای پیاده‌سازی WebGL باید موارد زیر را انجام داد:

فیلم آموزش گرافیک کامپیوتری و مفاهیم کلیدی در فرادرس

کلیک کنید

• یک پنجره و زمینه برای رندر کردن باید ایجاد شود.
• باید داده‌های لازم فراهم شود (مثل راس شکل‌ها).
• یک برنامه کوچک برای GPU باید ایجاد شود.

در ادامه، هر یک از گام‌های ساده پیاده‌سازی WebGL آموزش داده شده است.

HTML: ایجاد یک پنجره جدید

برای ایجاد یک پنجره جدید از عنصر Canvas‌ در HTML‌ استفاده می‌شود. در تصویر زیر کدهای مربوط به ایجاد یک پنجره جدید با استفاده از عنصر Canvas نشان داده شده است.

در کدهای تصویر فوق، یک شناسه (ID) نیز به این عنصر Canvas نسبت داده شده است تا بعداً امکان ارجاع دادن به آن وجود داشته باشد.

JavaScript: ایجاد Context

ایجاد و ارسال یک برنامه به GPU

در این مقطع، باید یک برنامه برای GPU ایجاد شود. این برنامه باید شامل دو تابع باشد:

• Vertex Shader (سایه‌ساز رأس)
• Fragment Shader (سایه‌ساز قطعه)

فیلم آموزش گرافیک کامپیوتری با OpenGL در فرادرس

کلیک کنید

در ادامه هر یک از Shaderهای استفاده شده در برنامه GPU برای پیاده‌سازی WebGL شرح داده شده است.

Vertex Shader

Vertex Shader به نوعی موقعیت و محل رأس‌های آنچه باید رسم شود را تعیین می‌کند. Vertex Shader در WebGL‌ برای ایجاد اشکال اولیه (Primitive) استفاده می‌شود. اشکال اولیه زیربنای اشکال پیچیده‌تر به حساب می‌آیند. برخی از شکل‌های اولیه شامل موارد زیر است:

• POINT (نقطه)
• LINE (خط)
• LINE_LOOP (حلقه-خط)
• LINE_STRIP (نوار خط)
• TRIANGLE_FAN (مثلث)

در ادامه به تعریف و شرح Fragment Shader پرداخته شده است.

Fragment Shader

Fragment Shader رنگ‌ها را برای هر پیکسل مشخص می‌کند. ساختار Fragment Shader بسیار شبیه به Vertex Shader است. در ادامه مطلب «WeGL چیست» فرآیند ایجاد تصاویر در WebGL به صورت تصویری نمایش و شرح داده شده است.

فیلم آموزش گرافیک کامپیوتری و مفاهیم کلیدی در فرادرس

کلیک کنید

ارائه بصری فرآیند پیاده‌سازی WebGL

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

1. ایجاد یک Vertex Shader
2. سرهم‌بندی شکل (Shape Assembly)
3. تبدیل شکل به یک تصویر بیت‌مپ (Rasterization).
4. رنگ‌آمیزی تصویر به وسیله Fragment Shader
5. دریافت تصویر نهایی

در ادامه مطلب «WebGL چیست»، تصویر مربوط به کدهای HTML برای پیاده‌سازی دوبُعدی مثلث زرد رنگی آمده است که مراحل تولید آن در بالا شرح داده شد:

ممکن است این حجم زیاد از کد تنها برای تولید یک مثلث دوبُعدی تعجب‌آور باشد و کار با WebGL بسیار دشوار به نظر برسد. اما مثلاً‌ برای تولید هزار مثلث این چنینی، می‌توان تنها با وارد کردن داده‌های لازم، بسیاری از کدهای تولید شده برای GPU را مجدداً استفاده کرد. بنابراین، در WebGL حجم زیادی از کدها قابل استفاده مجدد هستند.

برخی مفاهیم پایه WebGL و گرافیک کامپیوتری

در فرآیند پیاده‌سازی WebGL به مفاهیمی اشاره شد که ممکن است برخی از افراد آشنایی کافی را با آن‌ها نداشته باشند، بنابراین در ادامه مطلب «WebGL چیست» و آموزش WebGL ، شرح مختصری از این مفاهیم پایه ارائه شده است. ابتدا، به شرح مفاهیمی از نظریه گرافیک کامپیوتری پرداخته شده است.

فیلم آموزش گرافیک کامپیوتری و مفاهیم کلیدی در فرادرس

کلیک کنید

Vertex چیست ؟

Vertex (رأس) ‌یک نقطه در فضای سه‌بُعدی است. بنابراین یک Vertex سه مؤلفه y ،x و z دارد. اما در سطح بالاتر، مفهوم مثلث (Triangle) مطرح می‌شود که در ادامه به شرح آن پرداخته شده است.

مثلث در گرافیک کامپیوتری

فیلم آموزش گرافیک کامپیوتری و مفاهیم کلیدی در فرادرس

کلیک کنید

نرمال

همان‌طور که در تصویر زیر مشخص شده است، خط عمود بر هر سه رأس مثلث، یک نرمال نامیده می‌شود. همچنین، لازم به ذکر است که هر رأس می‌تواند دارای یک نرمال باشد. در واقع این مؤلفه نرمال است که OpenGL از آن استفاده خواهد کرد. در ادامه مطلب «WebGL چیست» به شرح مفهوم Shader پرداخته شده است.

Shader در گرافیک کامپیوتری

به زبان ساده، Shader یک برنامه به حساب می‌آید و بنابراین، دارای خصوصیاتی شامل موارد زیر است:

فیلم آموزش گرافیک کامپیوتری و مفاهیم کلیدی در فرادرس

کلیک کنید

• Shader‌ دارای کد منبع است (فایل متنی).
• زبان‌های مختلفی برای نوشتن برنامه‌های Shader ‌وجود دارد. برخی از این برنامه‌ها شامل Cg (که چندپلتفرمی است)، زبان HLSL که مربوط به مایکروسافت است و همچنین GLSL که پیش‌تر معرفی شد.
• GLSL شباهت بسیاری به زبان C دارد. بنابراین کلمات کلیدی بسیاری در این زبان برای برنامه‌نویسان زبان C آشنا به نظر خواهد رسید.
• باید در نظر داشت که چون Shader یک برنامه به حساب می‌آید، کامپایل هم خواهد شد.
• وقتی برنامه Shader کامپایل شد، یک شناسه (ID) از نوع عدد صحیح (Integer | int) بازگردانده می‌شود.

انواع Shader

در خصوص انواع Shaderها (Vertex Shader و Fragment Shader) هم پیش‌تر و در مراحل پیاده‌سازی WebGL بحث شد. مسئولیت اصلی Vertex Shader تغییر موقعیت یک رأس است. این کار را می‌توان به روش‌های مختلفی مثل Translation ،Rotation ، Scaling و سایر موارد انجام داد. با وجود اینکه چندان رایج نیست، اما یک Vertex Shader می‌تواند رنگ رأس را هم مشخص کند. گاهی به Fragment Shader اصطلاح Pixel Shader هم اطلاق می‌شود. این نوع Shader رنگ نهایی یک پیکسل را معین می‌کند و این کار را با استفاده از مواردی از قبیل نورپردازی، متریال‌ها، نرمال‌ها و غیره انجام می‌دهد.

برنامه‌های Shader چگونه ایجاد می‌شوند؟

فیلم آموزش گرافیک کامپیوتری و مفاهیم کلیدی در فرادرس

کلیک کنید

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

فریم ورک ها و کتابخانه های WebGL

در این بخش از مطلب «WebGL چیست» فهرست‌هایی از فریم‌ورک‌ها و کتابخانه‌های WebGL ارائه شده است. این فهرست‌ها تنها به منظور آموزش و کسب اطلاعات فراهم شده‌اند، چرا که برخی از این کتابخانه‌ها قدیمی شده و دیگر از آن‌ها پشتیبانی نمی‌شود. در ادامه، برخی از کتابخانه‌ها و موتورهای پردازشی WebGL فهرست شده‌اند.

کتابخانه ها و موتورهای پردازشی WebGL

در این بخش از مطلب «WebGL چیست»، کتابخانه ها و موتورهای پردازشی WebGL فهرست شده‌اند:

• Three.js: کتابخانه سه‌بعدی جاوا
• stack.gl: یک محیط نرم‌افزاری متن‌باز برای WebGL است که بر اساس Browserify و npm ساخته شده است.
• PixiJS: موتور پردازش دوبُعدی فوق‌سریع HTML5 که از WebGL‌ به همراه Canvas رزرو شده استفاده می‌کند.
• Pex: یک کتابخانه/موتور سه‌بعدی جاوا اسکریپت که امکان توسعه بی‌دردسر بین فلسک و WebGL‌ را در مرورگر فراهم می‌کند.
• Babylon.js: یک فریم‌ورک کامل جاوا اسکریپت برای ساخت بازی‌های سه‌بعدی با HTML5 و WebGL
• Filament: یک موتور رندرینگ زمان واقعی مبتنی بر اصول فیزیکی برای اندروید، iOS، ویندوز، لینوکس، مک OS و WASM/WebGL است.
• ClayGL: یک کتابخانه گرافیکی WebGL که به ساخت اپلیکیشن‌های Web3D کمک می‌کند.
• AwayJS: یک کتابخانه گرافیک برای جاوا اسکریپت که به زبان تایپ اسکریپت نوشته شده است.
• SceneJS: یک موتور توسعه‌پذیر مبتنی بر WebGL تحت وب برای تصویر‌سازی سه‌بُعدی با جزئیات دقیق
• Blend4Web: ابزاری برای تصویرسازی سه‌بعدی تعاملی در اینترنت
• PlayCanvas: موتور بازی جاوا اسکریپت متکی بر WebGL و WebVR
• Turbulenz: یک فریم‌ورک بازی دوبعدی و سه‌بعدی ماژولار برای ساخت بازی‌های تحت HTML5 برای مرورگرها، دسکتاپ‌ها و دستگاه‌های موبایل
• Hilo3d: یک موتور رندرینگ WebGL
• litescene: یک کتابخانه موتور سه‌بعدی WebGL به همراه طبقه‌بندی مبتنی بر قطعه؛ استفاده شده در WebGLStudio
• Two.js: یک API ترسیم دوبعدی بدون نیاز به رندر کردن برای وب
• webgl-operate: یک فریم‌ورک رندرینگ WebGL مبتنی بر تایپ اسکریپت
• Rhodonite: کتابخانه Web3D در تایپ اسکریپت
• shree: یک Three.js سبُک
• Ashes: موتور سه‌بعدی WebGL2.0 و ECS و RayTracing
• Zogra: یک رندر کننده ساده WebGL2

در ادامه معرفی فریم‌ورک‌ها و کتابخانه‌های WebGL در مطلب «WebGL چیست»، به ارائه فهرستی از جعبه‌ابزارها و ریزفریم‌ورک‌های WebGL پرداخته شده است.

جعبه‌ابزارها و ریزفریم‌ورک‌های WebGL

در این بخش از مطلب «WebGL چیست»، فهرستی از جعبه‌ابزارها و ریزفریم‌ورک‌های WebGL آمده است:

• • regl: وب‌جی‌ال سریع کاربردی
  • lightgl.js: یک کتابخانه سبُک وزن WebGL
  • TWGL: یک کتابخانه کمکی کوچک WebGL
  • p5.js: یک دیدگاه و تفسیر جدید در پردازش؛ نه یک شبیه‌سازی یا درگاه (Port)
  • Four: یک API گرافیکی نسبتاً سطح بالا و مبتنی بر WebGL 1.0
  • TDL: یک کتابخانه سطح پایین برای اپلیکیشن‌های WebGL (رجوع شود به TWGL)
  • KickJS: یک موتور بازی WebGL برای مرورگرهای وب امروزی
  • nanogl: ریزفریم‌ورک WebGL
  • Alfrid: یک مجموعه ابزار WebGL
  • Medium: جعبه‌ابزار پیشرفته WebGL برای هنر

• • PicoGL.js: یک کتابخانه WebGL 2 تنها مختص رندرینگ

• O-GL: فریم‌ورک کوچک WebGL
• mini-webgl: کتابخانه کوچک ابزار WebGL
• phenomenon-px: سریع‌ترین راه برای ایجاد Pixel Shader
• zen-3d: کتابخانه سه‌بعدی جاوا اسکریپت
• GLOW: یک بسته WebGL است که بر ایجاد و استفاده آسان از Shaderها تمرکز دارد.
• Helix: یک موتور سه‌بعدی جاوا اسکریپت
• GrimoireJS: یک فریم‌ورک WebGL برای توسعه وب
• litegl.js: کتابخانه سبک‌وزن WebGL جاوا اسکریپت برای مدیریت زمینه، مِش‌ها، بافت‌ها و Shaderها
• CraZyPG: کتابخانه سطح پایین WebGL 2
• GLBoost: یک کتابخانه مفید و کاربردی WebGL برای Small Turning
• RedCube.js: کتابخانه رندرینگ WebGL 2
• RedGL2: کتابخانه سه‌بعدی جاوا اسکریپت
• gi-voxels: ردیابی مخروطی وکسل (Voxel Cone Tracing) با WebGL
• artgl: فریم‌ورک سه‌بعدی تایپ اسکریپت؛ زیربنا و زیرساختی برای کاربرد سه‌بعدی وب
• Squareroot.js: یک موتور 2D/3D برای WebGL و رندرینگ Canvas و انیمیشن
• gl3: کتابخانه کمکی WebGL
• wwg:  پوشش‌دهنده (Wrapper) ساده WebGL
• dan-shari-gl: فریم‌ورک مختصر WebGL توسعه داده شده با تایپ اسکریپت

به این ترتیب، بسیاری از کتابخانه‌ها و فریم‌ورک‌های WebGL معرفی و فهرست شدند. اگرچه همان‌طور که بیان شد، برخی از آن‌ها دیگر چندان استفاده نمی‌شوند. در واقع، می‌توان گفت که WebGL فناوری نسبتاً قدیمی به حساب می‌آید. این روزها سخن از فناوری جدیدتری به نام WebGPU به گوش می‌رسد. در ادامه مطلب «WebGL چیست»، راجع به WebGPU و دلایل مرگ قریب‌الوقوع WebGL بحث شده است.

آیا WebGL همچنان کاربرد دارد؟

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

فیلم آموزش گرافیک کامپیوتری و مفاهیم کلیدی در فرادرس

کلیک کنید

WebGL از گذشته تا حال

می‌توان ناشر اولیه WebGL را بنیاد موزیلا دانست. اما، در واقع WebGL توسط گروه غیرانتفاعی کرونوس سامان داده می‌شود. این گروه بیش از بیست سال است که فعالیت می‌کند و نقش پررنگی در مهم‌ترین زبان Shader برای کارت‌های گرافیک دارد. به طور خلاصه می‌توان گفت که از ابتدای دهه هشتاد و دهه نود شمسی تا زمان تدوین این مقاله، دو کتابخانه گرافیک وجود داشته که شامل OpenGL و Direct3D است. Direct3D موتور گرافیکی شرکت مایکروسافت به حساب می‌آید. در انتخاب یکی از این دو برای استفاده در مرورگرها، OpenGL پیروز میدان شناخته شد.

فیلم آموزش گرافیک کامپیوتری با OpenGL در فرادرس

کلیک کنید

بنابراین، این امکان به وجود آمد تا مرورگر بتواند از طریق OpenGL ‌به عنوان یک API با GPU ارتباط برقرار کند و به قابلیت‌های سریع GPU برای رندر کردن انیمیشن‌های سه‌بعدی، بازی‌های ویدیویی و سایر موارد دست یابد. بنابراین، به محض پدیدار شدن WebGL، توسعه‌دهندگان بسیاری شروع به بهره‌گیری از آن کردند و به یک باره کتابخانه‌هایی نظیر Three.js با پشتیبانی از قابلیت‌های WebGL پدید آمدند.

بنابراین، گذار به HTML5 Video آغاز شد و پس از آن هم، توسعه‌دهندگان شروع به استفاده مستقیم از WebGL در پیاده‌سازی آثار گرافیکی خود کردند. اما، تقریباً همه بازی‌های کامپیوتری ساخته شده با WebGL سازِکار قابل قبولی ندارند و تجربه محیط بازی در آن‌ها چندان خوشایند نیست. در واقع، به ندرت می‌توان بازی موفقی یافت که با WebGL ساخته شده باشد. اگرچه برخی از آن‌ها، بازی‌های موفقی به شمار می‌روند، اما تعداد آن‌ها در مقایسه با سایر پلتفرم‌ها و موتورهای بازی‌سازی برای دستگاه‌هایی نظیر پلی‌استیشن ۴ و کامپیوترهای دسکتاپ بسیار اندک است.

افول WebGL

بنابراین، با توقف رسمی پشتیبانی Unreal از HTML5، دیگر امکان انتقال محصولات تولید شده با Unreal به HTML5 و WebGL وجود نخواهد داشت. حتی در صورتی که این پشتیبانی از سر گرفته شود، اکنون قابل درک است که WebGL چندان جایگاهی در آینده گرافیک تحت وب نخواهد داشت و جانشین آن فناوری به نام WebGPU خواهد بود. اما، چرا نیاز به این فناوری جدید وجود دارد؟ برای پاسخ به این سوال، ابتدا بهتر است تعریف مختصری از WebGPU‌ ارائه شود. بنابراین، در ادامه مطلب «WebGL چیست» به این سوال پاسخ داده می‌شود که WebGPU ‌چیست؟

WebGPU چیست ؟

فیلم آموزش گرافیک کامپیوتری با OpenGL در فرادرس

کلیک کنید

چرا نیاز به WebGPU احساس می‌شود؟

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

آیا مرگ WebGL ‌اتفاق افتاده است؟

در آستانه سال ۱۴۰۰، WebGL همچنان یک فناوری رایج و محبوب به حساب می‌آید و هر آنچه پیرامون آن در حال وقوع است، در نقطه اوج خود قرار دارد. در آغاز سال ۱۴۰۰، WebGPU یک فناوری نوپا مجسوب می‌شود و ارائه آن به گونه‌ای که بتواند جایگزین مطمئن و قطعی برای WebGL شمرده شود، هنوز رخ نداده است. اگر چه این فناوری به سرعت در حال رشد است و به احتمال زیاد، در آینده جای WebGL را خواهد گرفت. بنابراین، به افرادی که قصد یادگیری و آموزش WebGL ‌را دارند، توصیه می‌شود تنها به یادگیری WebGL ‌بسنده نکرده، آموزش WebGPU و اخبار پیرامون آن را نیز دنبال کنند.

جمع‌بندی

در این مطلب به سوال «WebGL چیست» پاسخ داده شد، مقدمات و مفاهیم پایه برای شروع آموزش WebGL ارائه شدند و برخی از موضوعات مهم پیرامون WebGL از جمله تاریخچه، کاربردها و همچنین کتابخانه‌ها و فریم‌ورک‌های WebGL مورد بررسی قرار گرفتند.

فیلم مجموعه آموزش فتوشاپ، طراحی و گرافیک کامپیوتری – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

در انتها نیز پیرامون بقای WebGL و آینده آن بحث و فناوری جدیدتری به نام WebGPU معرفی شد. همچنین، بخش پایانی مطلب «WebGL چیست» به معرفی دوره‌های آموزشی مرتبط با فناوری WebGL برای علاقه‌مندان به این حوزه اختصاص داده شد.