WebGL به زبان ساده، تکنولوژی برای کشیدن، به نمایش در آرودن و تعامل سطح بالا و پیشرفته با گرافیک سه‌بعدی کامپیوتری از طریق مرورگرهای وب است. پیش از این، گرافیک سه‌بعدی تنها محدود به کامپیوترهای سطح بالا و قوی یا کنسول‌های بازی بود و نیاز به برنامه‌نویسی پیچیده‌ای داشت. اما امروزه با پیشرفته‌تر شدن کامپیوترهای شخصی و web browser ها، نمایش گرافیک سه‌بعدی از طریق تکنولوژی‌های مدرن و شناخته‌شده‌ی وب، امکان‌پذیر شده است.
WebGL (Web Graphics Library) در اصل یکLibrary است که به شما اجازه می دهد تا گرافیک 3 بعدی ایجاد کنید بطوری که با استفاده از بخشی از منابع کامپیوتر شما بصورت زنده رندر شود. Web GL یک تکنولوژی built-in در مرورگرهای جدید است و میتوان بدون نیاز به هیچ افزونه یا Library خاصی آن را در مرورگر مشاهده کرد. این تکنولوژی کاملا Client Side بوده و بر روی مرورگر کاربر اجرا می شود.
WebGL یک javascript API برای رندر کردن گرافیک 3 بعدی و 2 بعدی با هر یک از مرورگرهای سازگار است و با هریک از استانداردهای مرورگر که اجازه استفاده از GPU و پردازش تصویر را بدهد به راحتی مجتمع می شود. اگرچه قابل استفاده بودن آن بستگی به این دارد که آیا کارت گرافیک سیستم مربوطه از آن پشتیبانی می کند یا خیر. با کلیک بر روی این لینک و ورد به سایت رسیمی Web GL می توانید بررسی کنید که آیا مرورگر و سیستم شما از این تکنولوژی پشتیبانی می کند یا خیر.
المان های WebGL را می توان با دیگر المان های HTML ترکیب کرد و آن را در بخش های مختلف صفحات به کار برد. برنامه های WebGL شامل کد های کنترل هستند که تحت Java نوشته می شوند و کدهای Shader آن نیز توسط کارت گرافیک کامپیوتر اجرا می شوند. WebGL یک تکنولوژی تحت javascript از OpenGL است که از Canvas Element برای نمایش محتوا استفاده می کند. Web GL بر مبنای یکی از زیرمجموعه های OpenGL به نام2.0 OpenGL ES است که ویژه دستگاه های موبایل ساخته شده است. لذا WebGL با هر پلتفرمی که از Open GL پشتیبانی کند کار می کند.
WebGL از OpenGL ES 2.0 مشتق شده و توابع رندر مشابه با آن را ارایه می کند اما در قالب محتوای html. به عبارت دیگر WebGL برای رندر کردن المان های Canvas در HTML طراحی شده است. ضمن اینکه ویژگی بلادرنگ بودن (پردازش در لحظه) آن همانند دیگر API های تحت وب است. با این توصیف، به خاطر اینکه Web GL ویژگی های خود را از OpenGL ES 2 به ارث می برد، برای برنامه نویسانی که با Open GL در کامپیوترهای دسکتاپ و یا کد نویسی وب تحت OpenGl ES آشنا هستند و می خواهند وارد حوزه WebGL شوند مسیر آشنایی است.
حال با در نظر گرفتن اینکه در حال حاضر گزینه های زیادی برای
طراحی سایت 3 بعدی وجود دارد (مانند انواع CSS ها، Canvas ، SVG و افزونه هایی مانند Silverlight و Flash) شاید از خود بپرسید که WebGL چطور می تواند جایگزینی برای آنها باشد و چرا شما باید آن را یاد بگیرید. بدین خاطر مهم ترین مزایای Web GL در ادامه تشریح شده اند :
- اجرای Task ها
طراحی سایت و اجرای task ها در Web GL به گونه ای است که در برخی از تکنولوژی های دیگر قابل انجام نیست ، و یا در برخی از آنها اجرای چنین task هایی بسیار پیچیده و زمان بر است، همانند نورپردازی و افکت های انعکاسی در SVG.
عملکرد
WebGL بطور باور نکردنی سریع است و به درستی از قدرت سخت افزاری سیستم کاربر استفاده می کند. همین ویژگی WebGL باعث شده برای
طراحی سایت و بازی ها و جلوه های ویژه بصری بسیار مناسب باشد.
طراحی WebGL بر داشتن عملکرد بالا پایه گذاری شده و در بسیاری از موارد عملکرد آن بسیار بیشتر از تکنولوژی های دیگر است.
Shader
اپلیکیشن های WebGL می توانند از برنامه های کوچکی که به نام Shaders شناخته می شوند (برنامه های کوچکی که برای ساخت جلوه های ویزه استفاده می شوند) برای ایجاد جلوه های پیچیده استفاده کنند. با یک shader ساده شاید بتوان یک افکت رنگی sepia را ایجاد کرد ولی در پیاده سازی یک
طراحی سایت پیچیده می توان جلوه هایی مانند آب یا یک آتش را شبیه سازی کرد.
ممکن است برنامه نویسان قدیمی به این نکته اشاره کنند که تا کنون تلاش های زیادی برای وارد کردن تکنولوژی های 3 بعدی به مرورگرها انجام شده و تمامی آنها نیز در حال حاضر به فراموشی سپرده شدند. اما در ذیل دلایلی را برایتان مطرح می کنم که چرا WebGL آمده است تا بماند :
1. نکته اول اینکه WebGL بر مبنای OpenGL است. OpenGL به عنوان یک فریم ورک برای
طراحی اپلیکیشن های 3 بعدی معرفی شده که تا کنون آزمون خود را به خوبی پس داده است.
2. زمان عرضه WebGL همزمان با پیشرفت هایی در
عملکرد مرورگرها، افزایش سرعت سیستم ها و ظهور انقلابی javascript بوده است.
3. ترکیب پذیری : WebGl می تواند با دیگر تکنولوژی های تحت
طراحی سایت ترکیب شود.
4. Web GL این قابلیت را دارد که بر روی بسیاری از پلتفرم های متفاوت (لینوکس،ویندوز،مکینتاش و . . . ) و انواع مرور گرها اجرا شود. نکته ای که آن را برتر می کند این است که حتی در پلتفرم های دستگاه های موبایل مانند IOS 8 نیز از آن پشتیبانی می شود.
5. یک پروژه کاملا منبع باز است و توسط عرضه کننده خاصی کنترل نمی شود.
مواردی که در آن باید حتما از WebGL استفاده کرد :
داده های گرافیکی
برخی از داده ها وقتی در فضای سه بعدی دیده می شوند کاربردی تر هستند، این موارد را میتوان در اسکن های MRI یا نقشه های مهندسی مشاهده کرد.
بازی ها
بازی های 3 بعدی شاید واضح ترین مورد استفاده آن باشد. لازم به ذکر است که فریم ورک های طراحی بازی در آینده این قابلیت را خواهند داشت که بتوان آنها را در WebGL به راحتی Import کرد.
ایجاد صفحات تعاملی
این امر به کاربران شما این امکان را میدهد که بتوانند محصولاتتان را از هر زاویه مشاهده کنند.
مواردی که Web GL برای آنها مناسب نیست
با این وجود با اینکه WebGL برای طراحی های گرافیکی بسیار مناسب است، اما مواردی وجود دارد که استفاده از تکنولوژی های دیگر (مانند SVG) گزینه بهتری است. به موارد ذیل دقت کنید :
1. اپلیکیشن ها و بازی های 2 بعدی ساده.: مطمئنا می توانید با استفاده از WebGL به طراحی های 2 بعدی هم بپردازید، اما استفاده از Canvas شاید گزینه بهتری باشد زیرا پشتیبانی بهتری از آن می شود و Library های 2 بعدی زیادی نیز مختص آن وجود دارد.
2. جستجو : در حال حاضر محتوای WebGL توسط
موتور های جستجو قابل فهم نیست بنابراین استفاده از SVG انتخاب بهتری است.
3. ترکیب پذیری با DOM : می توان WebGL را در تمامی صفحات وب قرار داد اما هیچ روشی برای اضافه کردن Handler ها مشابه SVG ندارد.
4. مرورگرهای قدیمی : WebGL برای کاربرانی که مرورگرهای قدیمی و سیستم های ضعیفی دارند مناسب نیست.
5. محیط های بسیار امن : WebGL نیز دارای ضعف های امنیتی است. بیشتر ضعف های امنیتی WebGL تاکنون برطرف شده اند ولی در محیط هایی که نیاز به امنیت بسیار بالایی دارند استفاده از آن توصیه نمی شود.
برای شروع کار با WebGL پیشنهاد می کنم با Library های آماده شروع کنید. در حال حاضر دو Library برجسته WebGL به نام های Three.js و Babylon.js هستند که می توانید در قدم اول از آنها استفاده کنید. در این لینک می توانید نمونه های متنوعی از گرافیک های 3 بعدی را مشاهده کنید.
