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

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

WebGL (کتابخانه گرافیک وب | Web Graphics Library) یک API (رابط برنامه‌نویسی اپلیکیشن | Application Programming Interface) جاوا اسکریپت برای رندر کردن گرافیک کامپیوتری در هر مرورگر سازگار با آن و بدون استفاده از افزونه است. WebGL این کار را با معرفی یک API انجام می‌دهد که با OpenGL ES 2.0 مطابقت دارد و با عنصر Canvas در HTML5 قابل استفاده است. این سازگاری با OpenGL، بهره‌گیری از شتاب سخت‌افزاری فراهم شده در دستگاه کاربر را امکان‌پذیر می‌سازد.

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

OpenGL چیست ؟

OpenGL سرنامی برای Open Graphics Library به معنی کتابخانه گرافیک متن‌باز است. OpenGL استاندارد و کتابخانه‌ای‌ برای انجام کارهای گرافیک کامپیوتری به حساب می‌آید که در بسیاری از زبان‌ها، محیط‌ها و بسترها مورد استفاده قرار می‌گیرد. در دهه ۶۰ و اوایل دهه ۷۰ شمسی، نرم‌افزار‌ها برای یک سخت‌افزار گرافیکی خاص با رابط‌های (Interface) متفاوتی ساخته می‌شدند. این مسئله به نوعی مشکل‌ساز بود.

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

کلیک کنید

در آن زمان نیاز به یک استاندارد باز وجود داشت. شرکتی به نام SGI سیستم اختصاصی خود را به نام IrishGL معرفی کرده بود. در IrishGL هر چیزی که با گرافیک ارتباط نداشت (شامل ورودی‌های ماوس و کیبورد) کنار گذاشته شد و این فناوری در دسترس همگان قرار داده شد.

به این ترتیب 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 چیست ؟

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

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

کلیک کنید

GPU چیست ؟

به بیان ساده، GPU همان کارت گرافیک کامپیوتر است که در سطح پیشرفته‌ای مهندسی و بهینه‌سازی شده تا بتواند انجام محاسبات ماتریس‌های بزرگ، پیکسل‌ها، تصاویر و سایر موارد را بر عهده بگیرد. اکثر افراد با CPU (واحد پردازش مرکزی | Central Processing Unit) آشنایی کافی دارند.‌ بنابراین، در ادامه پیش از تعریف رندرینگ شتاب‌یافته سخت‌افزاری در مطلب «WebGL چیست»، نیاز به ارائه مقایسه‌ای میان CPU و GPU وجود دارد.

مقایسه GPU ‌با CPU

CPU و GPU در کامپیوترها وظایف پردازشی متفاوتی را برعهده دارند. CPU بسیار سریع است، اما تعداد هسته‌های (Core) پردازنده آن کم است. چرخه‌های ساعت در GPU نسبت به CPU کمی کندتر هستند، اما GPU تعداد هسته‌های بیش‌تری دارد. بنابراین، GPU می‌تواند داده‌ها را به صورت موازی دریافت و عملیات یکسانی را به صورت همزمان روی آن‌ها اجرا کند. این ویژگی باعث می‌شود که GPU در برخی از کاربردهای خاص عملکرد بسیار مطلوبی را از خود نشان دهد.

از جمله کاربردهایی که استفاده از GPU در آن‌ها منجر به عملکرد بهتری نسبت به CPU می‌شود می‌توان به محاسبات ماتریسی سه‌بعدی و ضرب تعداد زیادی از اعداد ممیز شناور اشاره کرد. بنابراین GPU در انجام وظایفی که در آن‌ها تخصص دارد نسبت به CPU سریع‌تر و بهینه‌تر است. یکی از این موارد، وظایف مرتبط با کارهای گرافیکی است. در ادامه مطلب «» اصطلاح شتاب سخت‌افزاری در مفهوم کلی آن به اختصار تعریف شده است.

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

کلیک کنید

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

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

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

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

فیلم آموزش موتور رندرینگ سه بعدی آرنولد مایا – موتور Arnold در Maya در فرادرس

کلیک کنید

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

رندرینگ شتاب‌یافته سخت‌افزاری یا «Hardware Accelerated Rendering» را می‌توان انجام عملیات رندرینگ به کمک فناوری شتاب سخت‌افزاری تعریف کرد. این شتاب سخت‌افزاری در رندرینگ تصاویر دو یا سه‌بُعدی، از طریق GPU انجام می‌شود. هر تصویر از چندین پیکسل تشکیل شده است و هر پیکسل را می‌توان درایه یک ماتریس در نظر گرفت که میزان روشنایی آن با یک عدد مشخص می‌شود.

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

WebGL چیست ؟

«WebGL» اقتباسی از OpenGL محسوب می‌شود. در واقع، WebGL یک API گنجانده شده در جاوا اسکریپت و مشابه «OpenGL ES 2.0» (نسخه دوم OpenGL برای سیستم‌های تعبیه شده) است. بنابراین، WebGL همان امکانات OpenGL ‌را به همراه رندرینگ شتاب‌یافته سخت‌افزاری در مرورگر فراهم می‌سازد. عبارت WebGL از دو بخش Web و GL تشکیل شده است.

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

کلیک کنید

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

تاریخچه WebGL

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

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

کلیک کنید

در اواسط سال ۱۳۸۷، کنسرسیوم غیرانتفاعی به نام «گروه کرونوس» (Khronos Group)، «کارگروه WebGL» را راه‌اندازی کردند. قواعد و مشخصه‌های نسخه شماره یک (1.0) WebGL با مشارکت اولیه اپل، گوگل، موزیلا، اوپرا و سایرین در ابتدای سال ۱۳۹۰ منتشر شد. از اوایل سال ۱۳۹۱، کِن راسل (Ken Russel) ریاست کارگروه WebGL را برعهده دارد.

از جمله‌ کاربردهای ابتدایی WebGL می‌توان به ZygoteBody اشاره کرد که یک وب اپلیکیشن برای رندر سه‌بُعدی مدل‌های آناتومی بدن انسان و حیوانات به شمار می‌رود. در اواسط سال ۱۳۹۱ شرکت Autodesk اعلام کرد که آن‌ها بیش‌تر اپلیکیشن‌های خود را به فضای ابری منتقل کرده‌اند که قابل اجرا روی کلاینت‌های محلی WebGL است.

این برنامه‌ها شامل Fusion 360 و AutoCAD 360 می‌شود. توسعه مشخصه‌های نسخه دوم WebGL در سال ۱۳۹۲ آغاز و انتشار نهایی آن در اواخر سال ۱۳۹۵ انجام شد. این نسخه، مبتنی بر OpenGL ES 3.0 است. اولین پیاده‌سازی‌های آن در فایرفاکس ۵۱، کروم ۵۶ و اوپرا ۴۳ اتفاق افتاد. به این ترتیب تاریخچه کلی از فناوری WebGL ارائه شد. در ادامه مطلب «WebGL چیست» شرح مختصری از کاربردهای WebGL ارائه شده است.

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

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

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