تکنولوژی WebGL

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


مسعود درویشیان ۴۷ دیدگاه HTML , JavaScript , WebGL چهارشنبه, ۲۷ام فروردین , ۱۳۹۳ 31290 بازدید

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

WebGL

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

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

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

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

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

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

HTML5 که آخرین نسخه از HTML است، با ویژگی‌هایی مثل ۲D 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 توسعه یافت و در سال ۱۹۹۲ به‌صورت open standard منتشر شد. OpenGL تاکنون پیوسته در حال تکامل و پیشرفت بوده و حتی در تولید فیلم نیز از آن استفاده شده است. اکنون آخرین نسخه از OpenGL نسخه‌ی ۴٫۳ برای 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 است. این گروه در سال ۲۰۰۹ گروه کاری WebGL را راه انداخت و شروع به استاندارد کردن و توسعه دادن WebGL براساس OpenGL ES 2.0 کرد و اولین نسخه‌ی WebGL را در سال ۲۰۰۹ انتشار داد.

در 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 نیاز است.



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

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



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


  1. pooria
    ۲۷ فروردین ۱۳۹۳

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




  2. hsw.max
    ۲۷ فروردین ۱۳۹۳

    mer30
    ali bod




  3. ریحا
    ۲۸ فروردین ۱۳۹۳

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




  4. عماد
    ۳۰ فروردین ۱۳۹۳

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




  5. طراحی سایت
    ۱۵ اردیبهشت ۱۳۹۳

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




  6. آربی
    ۲۹ اردیبهشت ۱۳۹۳

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




  7. سئو
    ۱۳ خرداد ۱۳۹۳

    پست عالی بود

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




  8. هتل درویشی
    ۱۲ تیر ۱۳۹۳

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



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



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




  11. وحید
    ۲۵ مرداد ۱۳۹۳

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




  12. طراحی وب سایت
    ۲۵ مرداد ۱۳۹۳

    تشکر عالی بود




  13. زاده پاییز
    ۳۰ مرداد ۱۳۹۳

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




  14. محمد
    ۳۰ مرداد ۱۳۹۳

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




  15. پوستک و تکنولوژی
    ۲۷ شهریور ۱۳۹۳

    جالب بود




  16. eve
    ۱۲ مهر ۱۳۹۳

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




  17. سیران
    ۲۹ مهر ۱۳۹۳

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




  18. سیران
    ۲۹ مهر ۱۳۹۳

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




  19. طراحی سایت
    ۳۰ مهر ۱۳۹۳

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

    سپاس فراوان




  20. طراحی قالب وردپرس
    ۲۱ آبان ۱۳۹۳

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




  21. محسن
    ۲۱ آبان ۱۳۹۳

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




  22. mostafa
    ۷ دی ۱۳۹۳

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




  23. مهک
    ۱۱ دی ۱۳۹۳

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




  24. کتابیم
    ۲۰ بهمن ۱۳۹۳

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




  25. امیر
    ۲۲ بهمن ۱۳۹۳

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




  26. masoud
    ۲۳ بهمن ۱۳۹۳

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




  27. دیجی نقد
    ۲۱ اسفند ۱۳۹۳

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




  28. مرکز اس ام اس
    ۳۰ فروردین ۱۳۹۴

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




  29. گل فروش آنلاین
    ۶ اردیبهشت ۱۳۹۴

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




  30. طراحی وب سایت
    ۲۴ اردیبهشت ۱۳۹۴

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




  31. علی
    ۱۸ خرداد ۱۳۹۴

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




  32. بی نام
    ۱۳ مرداد ۱۳۹۴

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




  33. مهک
    ۲۷ مرداد ۱۳۹۴

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




  34. فروشگاه عروسک
    ۲۸ شهریور ۱۳۹۴

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




  35. پارتیشن
    ۲۵ آبان ۱۳۹۴

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




  36. پارتیشن
    ۲۶ آبان ۱۳۹۴

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




  37. پمپ ایران
    ۲۸ آبان ۱۳۹۴

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




  38. دوربین مداربسته
    ۳۰ آبان ۱۳۹۴

    سلام

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




  39. Amirmg
    ۲ دی ۱۳۹۴

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




    • مسعود درویشیان
      ۴ دی ۱۳۹۴

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




  40. Amirmg
    ۴ دی ۱۳۹۴

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




    • مسعود درویشیان
      ۴ دی ۱۳۹۴

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




  41. حسن علی احمدی
    ۱۵ دی ۱۳۹۴

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




  42. هنگامه
    ۲۵ اسفند ۱۳۹۴

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




  43. علی
    ۲۶ اسفند ۱۳۹۴

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




  44. فرنوش
    ۲۳ فروردین ۱۳۹۵

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




  45. kho3ro
    ۲۲ آبان ۱۳۹۵

    عاالی بود



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





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

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

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

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

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



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

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