تکنولوژی WebGL

آشنایی با تکنولوژی WebGL و مروری بر تاریخچه و معماری نرم‌افزاری آن


مسعود درویشیان 48 دیدگاه HTML , JavaScript , WebGL Wednesday, 16th April , 2014 56666 بازدید

WebGL به زبان ساده، تکنولوژی‌ برای کشیدن، به نمایش در آرودن و تعامل سطح بالا و پیشرفته با گرافیک سه‌بعدی کامپیوتری از طریق مرورگرهای وب است. پیش از این، گرافیک سه‌­بعدی تنها محدود به کامپیوترهای سطح بالا و قوی یا کنسول‌­های بازی بود و نیاز به برنامه‌­نویسی پیچیده‌ای داشت. اما امروزه با پیشرفته‌تر شدن کامپیوتر‌های شخصی و web browser ها، نمایش گرافیک سه‌بعدی از طریق تکنولوژی‌های مدرن و شناخته‌شده‌ی وب، امکان‌پذیر شده است.

WebGL

WebGL هنگامی که با HTML5 و javaScript ترکیب می‌شود، گرافیک سه‌بعدی را از طریق web browser به کاربر نمایش می‌دهد. این تکنولوژی بدون شک نقش بسیار مهمی را user interface های نسل بعدی وب بازی خواهد کرد و طی سال‌های آینده می‌توان انتظار داشت که بیشتر از این تکنولوژی در وسایل الکترونیکی از جمله تلفن‌های هوشمند، تبلت‌ها و کامپیوترها (و در کل وسایلی که از web browser استفاده می‌کنند) به منظور به‌کار بردن گرافیک سه‌بعدی و بازی‌سازی استفاده شود.

اگر مرورگرهای شما مثل google chrome یا Firefox‌ پیشرفته است، می‌توانید چند نمونه از گرافیک سه‌بعدی ساخته شده توسط WebGL را در زیر مشاهده کنید:

برای مشاهده اینجا کلیک کنید

برای مشاهده اینجا کلیک کنید

برای مشاهده اینجا کلیک کنید

برای مشاهده اینجا کلیک کنید

HTML5 که آخرین نسخه از HTML است، با ویژگی‌هایی مثل 2D graphics، networking و local storage access موجب گسترش و پیشرفته‌تر شدن HTML سنتی شده و با ظهور HTML5 مرورگرها به‌سرعت در حال تحول هستند و دیگر به‌جای این‌که تنها یک صفحه‌ی ساده‌ی نمایش اطلاعات باشند، به پلتفرم‌های پیشرفته‌ای تبدیل شده‌اند. این تکامل به interface و قابلیت‌های گرافیکی فراتر از دو بعد نیازمند است و WebGL نیز برای همین منظور طراحی شده تا ساخت application های سه‌بعدی تحت وب را فراهم کند.

به‌دلیل این‌که WebGL به‌صورت پیش‌فرض یک تکنولوژی built-in در مرورگرهای مدرن است، شما می‌توانید مستقیماً و بدون نیاز به هیچ plugin یا library از WebGL استفاده کنید و نتایج آن را در مرورگر خود ببینید. جالب‌ترین نکته‌ی WebGL این‌جاست که این تکنولوژی، تحت وب است و بر روی مرورگر اجرا می‌شود. این بدان معناست که تنها به یک چیز برای اجرای برنامه‌های WebGL نیاز دارید و آن نیز یک مرورگر است. دیگر مهم نیست که این مرورگر روی تبلت، تلفن هوشمند، کامپیوتر شخصی یا کنسول بازی شما باشد. از طرف دیگر شما به هیچ‌گونه کامپایلری برای تولید گرافیک سه‌بعدی نیاز ندارید و تنها ابزار شما برای کدنویسی WebGL می‌تواند یک text editor  ساده مثل notepad باشد. پیش از این، گرافیک‌های سه‌بعدی از طریق زبان‌های برنامه‌‌نویسی مثل C یا ++C نوشته شده و سپس به باینری‌های قابل اجرا مخصوص یک پلتفرم، کامپایل می‌شدند. یعنی نسخه‌ی Macintosh یک برنامه سه‌بعدی بر روی Windows یا Linux قابل اجرا نبود. به‌علاوه این‌که، کاربرها علاوه‌بر نصب خود برنامه، نیاز داشتند که library های استفاده شده در برنامه را نصب کنند تا برنامه در نهایت اجرا شود. این‌کار باعث می‌شود تا به‌سختی بتوانید برنامه‌ها و بازی‌های خود را با دیگران به اشتراک بگذارید. اما اکنون به‌دلیل این‌که WebGL تشکیل شده از فایل‌های HTML و javaScript است، شما به راحتی می‌توانید برنامه‌های خود را با دیگران به اشتراک بگذارید و برای این‌کار تنها کافی است فایل‌های برنامه را‌ به روی یک host و domain آپلود کنید و فقط آدرس را به دیگران بدهید تا بازی یا برنامه شما را ببینند. برای مثال، می‌توانید از این آدرس چند برنامه WebGL که توسط گوگل انتشار یافته است را مشاهده کنید.

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

دو مورد از پر استفاده‌ترین تکنولوژی‌های نمایش گرافیک سه‌بعدی در کامپیوترهای شخصی، OpenGL و Direct3D هستند. Direct3D که بخشی از تکنولوژی DirectX مایکروسافت است، عمدتاً در پلتفرم ویندوز استفاده می‌شود و یک API اختصاصی‌ست که تحت کنترل مایکروسافت است. از طرف دیگر، OpenGL به دلیل داشتن ماهیت royalty-free در پلتفرم‌های مختلفی مثل Windows، Macintosh، Linux و device های مختلفی چون smart phones و tablet و کنسول‌های بازی، مورد استفاده قرار می‌گیرد.

OpenGL در ابتدا توسط Silicon Graphics توسعه یافت و در سال 1992 به‌صورت open standard منتشر شد. OpenGL تاکنون پیوسته در حال تکامل و پیشرفت بوده و حتی در تولید فیلم نیز از آن استفاده شده است. اکنون آخرین نسخه از OpenGL نسخه‌ی 4.3 برای desktop PC است. WebGL در واقعه از نسخه‌ی OpenGL ES 2.0 که برای embedded computers بهینه‌سازی شده بود، مشتق شده است.

تصویر زیر ارتباط بین OpenGL و OpenGL ES و WebGL را نشان می‌دهد:

همان‌طور که در تصویر بالا می‌بینید، با انتشار OpenGL 2.0 یک قابلیت جدید و مهم به نام programmable shader functions معرفی شد. این قابلیت به OpenGL ES 2.0 انتقال یافت و اکنون جزو بخش هسته‌ای WebGL 1.0 است.

shader functions یا shader برنامه‌های کامپیوتری هستند که امکان ساختن برنامه‌هایی با جلوه‌های بصری پیشرفته توسط یک زبان برنامه‌نویسی خاص (متشابه با زبان C)، را فراهم می‌سازند. زبان برنامه‌نویسی که برای ساخت shaders  مورد استفاده قرار می‌گیرد، shading language نامیده می‌شود. shading language مورد استفاده در OpenGL ES 2.0 بر اساس (OpenGL shading language (GLSL است که (OpenGL ES shading language (GLSL ES نیز نامیده می‌شود. به‌دلیل این‌که WebGL بر اساس OpenGL ES 2.0 است، از این‌رو برای ساخت shaders از GLSL ES استفاده می‌کند.

اکنون گروه Khronos مسئول تکامل بخشیدن و استاندارد کردن OpenGL است. این گروه در سال 2009 گروه کاری WebGL را راه انداخت و شروع به استاندارد کردن و توسعه دادن WebGL براساس OpenGL ES 2.0 کرد و اولین نسخه‌ی WebGL را در سال 2009 انتشار داد.

در HTML، صفحه‌های dynamic بر اساس ترکیب javaScript و HTML (صرف نظر از کد server-side) ساخته می‌شوند. با معرفی WebGL، می‌بایست GLSL ES نیز به آن دو اضافه شود. این بدین معناست، صفحاتی که شامل WebGL هستند از سه زبان HTML5، javaScript و GLSL ES استفاده می‌کنند.

در تصویر زیر، معماری نرم‌افزار web page های قدیمی و web page هایی که اکنون از WebGL استفاده می‌کنند را می‌بینید:

از آن‌جا که GLSL ES عموماً در خود javaScript نوشته می‌شود، برای تولید اپلیکیشن‌های WebGL فقط به فایل‌های HTML و javaScript نیاز است.



نویسنده / مترجم : مسعود درویشیان

علاقه مند به موسیقی و برنامه نویسی بازی



48 دیدگاه برای این نوشته ثبت شده است


  1. pooria
    16 April 2014

    بسیار عالی و آموزنده
    ممنون از شما




  2. hsw.max
    16 April 2014

    mer30
    ali bod




  3. ریحا
    17 April 2014

    شدیدن منتظر دیدن هنرنمایی‌های شما در این زمینه هستم؛ ممنون از اینکه بی‌دریغ این آموزش هارو منتشر میکنین.




  4. عماد
    19 April 2014

    بنده بسیار علاقه مند به این حوزه از وب هستم امیدوارم مطالب بیشتری در این باره از شما ببینم (همینطور آموزش) .
    بسیار ممنون .



  5. تکنولوژی جالبی اما فکر می کنم هنوز خیلی فاصله داریم ازش




  6. آربی
    19 May 2014

    سلام خسته نباشید
    واقعا سایت خیلی خوبی دارید




  7. سئو
    3 June 2014

    پست عالی بود

    من از این ویژگی مرورگرها خبر نداشتم



  8. بسیار عالی ممنون



  9. مقاله خوبی بود و اموزش های سایت شما کلا مفیده اون دسته سایت هایی هستید که مقاله مینویسید واقعا



  10. عالی تر از این هم مگه میشه




  11. وحید
    16 August 2014

    قابلیت جالب و جدیدی در وب هست، از مقاله خوبتان ممنون



  12. تشکر عالی بود




  13. زاده پاییز
    21 August 2014

    مرسیییییییییییییییییییییییییییییییییییییییییی
    به این اطلاعات نیاز داشتم
    ممنونم




  14. محمد
    21 August 2014

    تو اینترنت اکسپلوررم که اجرا می شه!8.1



  15. جالب بود




  16. eve
    4 October 2014

    با تشکر از زحمات شما. مطالب بسیار خوبی و مفیدی بود




  17. سیران
    21 October 2014

    سلام خسته نباشید من رشتم تکنولوژی اموزشی هستش سایتتون جالب بود امیدوارم بتونم ازش اشتفاده کنم




  18. سیران
    21 October 2014

    سلام خسته نباشید من رشتم تکنولوژی اموزشی هستش سایتتون جالب بود امیدوارم بتونم ازش استفاده کنم




  19. طراحی سایت
    22 October 2014

    بسیار عالی و کامل بود

    سپاس فراوان



  20. سلام وب سایت دیگه اپ نمیشه خیفه اموزش های خیلی خوبی میدادین
    به هر حال ممنون از سایت خوبتون




  21. محسن
    12 November 2014

    مطلب بسیار آموزنده و مفیدی بود




  22. mostafa
    28 December 2014

    با سلام وخسته نباشید .سایت بسیار عالی و مفیدی دارین .خوشحال میشم به سایت ما هم سر بزنید(http://p30file.com)




  23. مهک
    1 January 2015

    خیلی مطلب جالبی بود ممنون




  24. کتابیم
    9 February 2015

    ممنون از سایت باکلاستون




  25. امیر
    11 February 2015

    ایولاااااا…
    مطلب مفیدی بود…
    خیلی ممنون :)




  26. masoud
    12 February 2015

    لایک!
    عالی بود.
    لطفا به کارتون ادامه بدید.
    ممنون.




  27. دیجی نقد
    12 March 2015

    مطلی مفیدی بود ممنون




  28. مرکز اس ام اس
    19 April 2015

    تو اینترنت اکسپلوررم که اجرا می شه!۸٫۱
    ممنون مقاله جالبی بود.




  29. گل فروش آنلاین
    26 April 2015

    مرسی از سایت بسیاار خوبتون .
    موفق باشید



  30. سلام
    تکنولوژی فوق العاده ای است و این مورد جزء علاقه مندی های شخصی خود من هم میشود
    خواهش میکنم در آینده مطالب بیشتری از این دست بارگزاری کنید
    باتشکر از سایت خوبتون




  31. علی
    8 June 2015

    واقعا خیلی حیف شد که دیگه سایت رو آپ نمیکنید…خیلی مطالب مفید بود




  32. بی نام
    4 August 2015

    از فروردین 93 تا مرداد 94 سایت آپ نشده؛ با اینکه دیروز با سایتتون آشنا شدم ولی خیلی دلم گرفت این همه مدت به سایت نرسیدید..
    امیدوارم جای بهتری مشغول باشید :)




  33. مهک
    18 August 2015

    با تشکر از مطالب خوبتون




  34. فروشگاه عروسک
    19 September 2015

    واقعا مطلب عالی و مفیدی بود ممنون




  35. پارتیشن
    16 November 2015

    بسیار عالی و خوووب بووود….میشه لطفا منابعتووون هم بزارید




  36. پارتیشن
    17 November 2015

    واقعا که بی نظررررررررید…..هیچ سایتی مثل شما نیس که اینهمه اموزش کامل بده بهموووووووووون…ممنووووووووووووووونم ازتوووووون




  37. پمپ ایران
    19 November 2015

    با سلام و سپاس عالی بود مرسی



  38. سلام

    ممنون از مطالب خوبتون , ارزوی بهترینها را براتون دارم




  39. Amirmg
    23 December 2015

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




    • مسعود درویشیان
      25 December 2015

      سلام ممنون از لطف‌تون. یونیتی خیلی راحت javaScript رو اجرا می‌کنه کافیه از MonoDevelop (که همراه خود یونیتی هست و IDE پیش‌فرض یونیتی هست) استفاده کنین. ویژوال استدیو javaSctipt مخصوص یونیتی رو اجرا نمی‌کنه حتا وقتی از پلاگین UnityVS هم (برای استفاده از ویژوال استدیو به عنوان IDE یونیتی) استفاده می‌کنید باز فقط سی‌شارپ رو پشتیبانی می‌کنه. ضمنا یونیتی ۶ گیگ نیست! شما حتی نسخه‌ Pro هم که از سایت‌های فارسی همراه با کرک دانلود کنید ۳ گیگ می‌شه




  40. Amirmg
    25 December 2015

    از اون جایی که تازه شروع به یونیتی کردم متاسفانه من اطلاعات چندانی از یونیتی ندارم ولی میدونم که کد جاوای که می نویسم درست هست من وقتی در کامپایل مونو به زبان جاوا کدی می نویسم مثلا کد بسیار ساده ای مثل
    Debug.Log(“this is a statement.”); a
    اجرا نمی کنه و حتی وقتی در حال نوشتن هستم خواص متغیر هارو هم به هم نشون نمی ده ، وقتی ctrl و Space رو می زنم هیچ نوع خاصیتی
    رو نشون نمی ده به نظر شما مشکل از یونیتی هست یا مونو ؟
    اگه مشکل از یونیتی لطفا یک لینک یا ورژن بهم معرفی کنید یا هر راه کار دیگه ای که ممکنه
    باتشکر از شما




    • مسعود درویشیان
      25 December 2015

      نباید مشکل داشته باشه! مطمئن هستید همه چیز رو چک کردین؟ اگه می‌دونین همه‌چیز رو چک کردین پس شاید مشکل از یونیتی باشه (که بعید می‌دونم).
      از این لینک هم می‌تونید آخرین نسخه یونیتی رو دانلود کنید.




  41. حسن علی احمدی
    5 January 2016

    جناب آقای مهندس درویشیان
    باسپاس فراوان اززحمات شمادرخصوص آموزشها مختلف شماوهمچنین ساخت گرافیک 3بعدی وآشنایی باتاریخچه آن رادارم




  42. هنگامه
    15 March 2016

    ممنون وب تارگت. مفید بود




  43. علی
    16 March 2016

    سلام ممنون بابت این مطلب خوبتون، سایت رو هم زود تر بروز کنید




  44. فرنوش
    11 April 2016

    سایتتون خوبه چرا دیر به دیر مطلب میزارید




  45. kho3ro
    12 November 2016

    عاالی بود



  46. خیلی مطلب مفیدی بود
    ممنون از سایت خوبتون
    موفق باشید



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2024 وب‌تارگت

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