WebGL چیست؛ مزایا و کاربرد webgl

به صورت مختصر می توان گفت WebGL یک تکنولوزی جدید برای نمایش گرافیک ۳ بعدی در صفحات وب است که همراه با HTML5  ارایه شده و تحت Java  نوشته می شود. تا کنون نمایش گرافیک های  بعدی تنها در سیستم های قدرتمند ممکن بود و از طرفی نیاز به کدنویسی پیچیده ای داشت. با ارایه این تکنولوژی استفاده از گرافیک ۳ بعدی خصوصا در حوزه بازی ها در وب سایت ها به راحتی امکان پذیر شده است.حال در امتداد مقاله به بررسی تفصیلی تکنولوژی webgl چیست می پردازیم.

تکنولوژی WebGL چیست ؟

WebGL (Web Graphics Library) در اصل یکLibrary است که به شما اجازه می دهد تا گرافیک ۳ بعدی ایجاد کنید بطوری که با استفاده از بخشی از منابع کامپیوتر شما بصورت زنده رندر شود. Web GL یک تکنولوژی built-in در مرورگرهای جدید است و می‌توان بدون نیاز به هیچ افزونه یا Library خاصی آن را در مرورگر مشاهده کرد. این تکنولوژی کاملا Client Side بوده و بر روی مرورگر کاربر اجرا می شود.

در شکل زیر می توانید ساختار وب سایت های قدیمی را در کنار ساختار وب سایت های دارای تکنولوژی Web GL مشاهده کنید :

WebGL یک Javascript API برای رندر کردن گرافیک ۳ بعدی و ۲ بعدی با هر یک از مرورگرهای سازگار است و با هریک از استانداردهای مرورگر که اجازه استفاده از GPU  و پردازش تصویر را بدهد به  راحتی مجتمع می شود. اگرچه قابل استفاده بودن آن بستگی به این دارد که آیا کارت گرافیک سیستم مربوطه از آن پشتیبانی می کند یا خیر. با کلیک بر روی این لینک و ورد به سایت رسیمی Web GL می توانید بررسی کنید که آیا مرورگر و سیستم شما از این تکنولوژی پشتیبانی می کند یا خیر. به شما پیشنهاد می شود برای  کسب اطلاعات بیشتر مقاله ما با موضوع جاوا اسکریپت چیست را مطالعه نمایید.

 المان های WebGL را می توان با دیگر المان های html5 ترکیب کرد و آن را در بخش های مختلف صفحات به کار برد به شما پیشنهاد می شود برای  کسب اطلاعات بیشتر مقاله ما با موضوع html5 چیست را مطالعه نمایید. برنامه های WebGL شامل کد های کنترل هستند که تحت Java نوشته می شوند و کدهای Shader  آن نیز توسط کارت گرافیک کامپیوتر اجرا می شوند.  WebGL یک تکنولوژی تحت JavaScript از OpenGL است که از Canvas Element برای نمایش محتوا استفاده می کند. Web GL بر مبنای یکی از زیرمجموعه های OpenGL به نام۲.۰  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 شوند مسیر آشنایی است.

حال با در نظر گرفتن اینکه  در حال حاضر گزینه های زیادی برای طراحی ۳ بعدی وجود دارد (مانند انواع CSS ها، Canvas ، SVG و افزونه هایی مانند Silverlight و Flash)  شاید از خود بپرسید که WebGL چطور می تواند جایگزینی برای آنها باشد و چرا شما باید آن را یاد بگیرید.اگر شما با هیچ یک از این زبانها و تکنولوژی آشنا نیستید بهتر است از سایت ساز فروشگاهی ایران هاست استفاده نمایید.

منظور از اجرای Task ها در WebGL چیست؟

طراحی و اجرای task ها  در Web GL به گونه ای است  که در برخی از تکنولوژی های دیگر  قابل انجام نیست، و یا در برخی از آنها اجرای چنین task هایی بسیار پیچیده و زمان بر است، همانند نورپردازی  و افکت های انعکاسی در SVG.

عملکرد WebGL 

WebGL بطور باور نکردنی سریع است و به درستی از قدرت سخت افزاری سیستم کاربر استفاده می کند. همین ویژگی WebGL باعث شده  برای طراحی بازی ها و جلوه های ویژه بصری بسیار مناسب باشد.  طراحی WebGL  بر داشتن عملکرد بالا پایه گذاری شده و در بسیاری از موارد عملکرد آن بسیار بیشتر از تکنولوژی های دیگر است.

Shader در WebGL 

shader به سادگی برنامه ای است که در خط لوله گرافیکی اجرا می شود و به رایانه می گوید که چگونه هر پیکسل را نمایش دهد. این برنامه ها به دلیل اینکه معمولاً برای کنترل نور و جلوه های سایه زنی استفاده می شود به عنوان سایه بان شناخته می شوند.

اپلیکیشن های WebGL می توانند از برنامه های کوچکی که به نام Shaders شناخته می شوند و برای ایجاد جلوه های پیچیده استفاده کنند. با یک shader ساده شاید بتوان یک افکت رنگی sepia  را ایجاد کرد ولی در پیاده سازی یک طراحی پیچیده می توان جلوه هایی مانند آب یا یک آتش را شبیه سازی کرد.

ممکن است برنامه نویسان قدیمی به این نکته اشاره کنند که تا کنون تلاش های زیادی برای وارد کردن تکنولوژی های ۳ بعدی به مرورگرها انجام شده و  تمامی آنها نیز در حال حاضر به فراموشی سپرده شدند.

open gl چیست؟

OpenGL یک رابط نرم افزاری است که به یک برنامه نویس اجازه می دهد تا با سخت افزار گرافیکی ارتباط برقرار کند.

مزایا WebGL

•  نکته اول اینکه WebGL  بر مبنای OpenGL است.از جمله کاربرد OpenGL به عنوان یک فریم ورک برای طراحی اپلیکیشن های ۳بعدی معرفی شده که تا کنون آزمون خود را به خوبی پس داده است.
•  زمان عرضه WebGL همزمان با پیشرفت هایی در عملکرد مرورگرها، افزایش سرعت سیستم ها و ظهور انقلابی JavaScript بوده است.
• ترکیب پذیری – WebGl می تواند با دیگر تکنولوژی های تحت وب ترکیب شود.
•  Web GL این قابلیت را دارد که بر روی بسیاری از پلتفرم های متفاوت (لینوکس،ویندوز،مکینتاش و . . . ) و انواع مرور گرها اجرا شود. نکته ای که آن را برتر می کند این است که حتی در پلتفرم های دستگاه های موبایل مانند IOS 8 نیز از آن پشتیبانی می شود.
• یک پروژه کاملا منبع باز است و توسط عرضه کننده خاصی کنترل نمی شود.

کاربرد WebGL

داده های گرافیکی  

برخی از داده ها وقتی در فضای سه بعدی دیده می شوند کاربردی تر هستند، این موارد را میتوان در اسکن های MRI یا نقشه های مهندسی مشاهده کرد.

بازی ها

بازی های ۳ بعدی شاید واضح ترین مورد استفاده آن باشد. لازم به ذکر است که فریم ورک های طراحی بازی در آینده این قابلیت را خواهند داشت که بتوان آنها را در  WebGL به راحتی  Import کرد.

ایجاد  صفحات تعاملی

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

مواردی که تکنولوژی Web GL برای آنها مناسب نیست 

با این وجود با اینکه WebGL برای طراحی های گرافیکی بسیار مناسب است، اما مواردی وجود دارد که استفاده از تکنولوژی های دیگر (مانند  SVG) گزینه بهتری است. به موارد ذیل دقت کنید :

• اپلیکیشن ها و بازی های ۲ بعدی ساده. مطمئنا می توانید با استفاده از WebGL به طراحی های ۲ بعدی هم بپردازید، اما استفاده از Canvas شاید گزینه بهتری باشد زیرا پشتیبانی بهتری از آن می شود و Library های ۲ بعدی زیادی نیز مختص آن وجود دارد.
• جستجو – در حال حاضر محتوای WebGL توسط موتور های جستجو قابل فهم نیست بنابراین استفاده از SVG انتخاب بهتری است.
• ترکیب پذیری با DOM – می توان WebGL را در تمامی صفحات وب قرار داد  اما هیچ روشی برای اضافه کردن Handler ها مشابه SVG ندارد.
• مرورگرهای قدیمی – WebGL برای کاربرانی که مرورگرهای قدیمی و سیستم های ضعیفی دارند مناسب نیست.
• محیط های بسیار امن – WebGL نیز دارای ضعف های امنیتی است. بیشتر ضعف های امنیتی WebGL تاکنون برطرف شده اند ولی در محیط هایی که نیاز به امنیت بسیار بالایی دارند استفاده از آن توصیه نمی شود.

برای شروع کار با WebGL پیشنهاد می کنم با Library های آماده شروع کنید. در حال حاضر  دو Library برجسته WebGL به نام های Three.js  و Babylon.js هستند که می توانید در قدم اول از آنها استفاده کنید.