WebGL به زبان ساده، تکنولوژی برای کشیدن، به نمایش در آرودن و تعامل سطح بالا و پیشرفته با گرافیک سهبعدی کامپیوتری از طریق مرورگرهای وب است. پیش از این، گرافیک سهبعدی تنها محدود به کامپیوترهای سطح بالا و قوی یا کنسولهای بازی بود و نیاز به برنامهنویسی پیچیدهای داشت. اما امروزه با پیشرفتهتر شدن کامپیوترهای شخصی و web browser ها، نمایش گرافیک سهبعدی از طریق تکنولوژیهای مدرن و شناختهشدهی وب، امکانپذیر شده است.
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 نیاز است.
pooria
16 April 2014
بسیار عالی و آموزنده
ممنون از شما
hsw.max
16 April 2014
mer30
ali bod
ریحا
17 April 2014
شدیدن منتظر دیدن هنرنماییهای شما در این زمینه هستم؛ ممنون از اینکه بیدریغ این آموزش هارو منتشر میکنین.
عماد
19 April 2014
بنده بسیار علاقه مند به این حوزه از وب هستم امیدوارم مطالب بیشتری در این باره از شما ببینم (همینطور آموزش) .
بسیار ممنون .
طراحی سایت
5 May 2014
تکنولوژی جالبی اما فکر می کنم هنوز خیلی فاصله داریم ازش
آربی
19 May 2014
سلام خسته نباشید
واقعا سایت خیلی خوبی دارید
سئو
3 June 2014
پست عالی بود
من از این ویژگی مرورگرها خبر نداشتم
هتل درویشی
3 July 2014
بسیار عالی ممنون
گروه طراحی وب سایت
26 July 2014
مقاله خوبی بود و اموزش های سایت شما کلا مفیده اون دسته سایت هایی هستید که مقاله مینویسید واقعا
گروه برنامه نویسی وثيقي دیزآین
31 July 2014
عالی تر از این هم مگه میشه
وحید
16 August 2014
قابلیت جالب و جدیدی در وب هست، از مقاله خوبتان ممنون
طراحی وب سایت
16 August 2014
تشکر عالی بود
زاده پاییز
21 August 2014
مرسیییییییییییییییییییییییییییییییییییییییییی
به این اطلاعات نیاز داشتم
ممنونم
محمد
21 August 2014
تو اینترنت اکسپلوررم که اجرا می شه!8.1
پوستک و تکنولوژی
18 September 2014
جالب بود
eve
4 October 2014
با تشکر از زحمات شما. مطالب بسیار خوبی و مفیدی بود
سیران
21 October 2014
سلام خسته نباشید من رشتم تکنولوژی اموزشی هستش سایتتون جالب بود امیدوارم بتونم ازش اشتفاده کنم
سیران
21 October 2014
سلام خسته نباشید من رشتم تکنولوژی اموزشی هستش سایتتون جالب بود امیدوارم بتونم ازش استفاده کنم
طراحی سایت
22 October 2014
بسیار عالی و کامل بود
سپاس فراوان
طراحی قالب وردپرس
12 November 2014
سلام وب سایت دیگه اپ نمیشه خیفه اموزش های خیلی خوبی میدادین
به هر حال ممنون از سایت خوبتون
محسن
12 November 2014
مطلب بسیار آموزنده و مفیدی بود
mostafa
28 December 2014
با سلام وخسته نباشید .سایت بسیار عالی و مفیدی دارین .خوشحال میشم به سایت ما هم سر بزنید(http://p30file.com)
مهک
1 January 2015
خیلی مطلب جالبی بود ممنون
کتابیم
9 February 2015
ممنون از سایت باکلاستون
امیر
11 February 2015
ایولاااااا…
مطلب مفیدی بود…
خیلی ممنون :)
masoud
12 February 2015
لایک!
عالی بود.
لطفا به کارتون ادامه بدید.
ممنون.
دیجی نقد
12 March 2015
مطلی مفیدی بود ممنون
مرکز اس ام اس
19 April 2015
تو اینترنت اکسپلوررم که اجرا می شه!۸٫۱
ممنون مقاله جالبی بود.
گل فروش آنلاین
26 April 2015
مرسی از سایت بسیاار خوبتون .
موفق باشید
طراحی وب سایت
14 May 2015
سلام
تکنولوژی فوق العاده ای است و این مورد جزء علاقه مندی های شخصی خود من هم میشود
خواهش میکنم در آینده مطالب بیشتری از این دست بارگزاری کنید
باتشکر از سایت خوبتون
علی
8 June 2015
واقعا خیلی حیف شد که دیگه سایت رو آپ نمیکنید…خیلی مطالب مفید بود
بی نام
4 August 2015
از فروردین 93 تا مرداد 94 سایت آپ نشده؛ با اینکه دیروز با سایتتون آشنا شدم ولی خیلی دلم گرفت این همه مدت به سایت نرسیدید..
امیدوارم جای بهتری مشغول باشید :)
مهک
18 August 2015
با تشکر از مطالب خوبتون
فروشگاه عروسک
19 September 2015
واقعا مطلب عالی و مفیدی بود ممنون
پارتیشن
16 November 2015
بسیار عالی و خوووب بووود….میشه لطفا منابعتووون هم بزارید
پارتیشن
17 November 2015
واقعا که بی نظررررررررید…..هیچ سایتی مثل شما نیس که اینهمه اموزش کامل بده بهموووووووووون…ممنووووووووووووووونم ازتوووووون
پمپ ایران
19 November 2015
با سلام و سپاس عالی بود مرسی
دوربین مداربسته
21 November 2015
سلام
ممنون از مطالب خوبتون , ارزوی بهترینها را براتون دارم
Amirmg
23 December 2015
سلام خدمت آقای مسعود درویشیان گل ، آقا شما حرف نداری کارت درسته درسته. اول اون سی شارپ فوق العاده الانم این آموزش فوق
العاده تر،
آقا مسعود من یک سوال خارج از بحث داشتم و از این بابت از شما عذر میخوام.
من تاره شروع به کار با یونیتی کردم و مشکلی که دارم اینه که یونیتی زبان جاوا اسکریپ رو اجرا نمی کنه ولی زبانه سی شارپ رو به خوبی اجرا میکنه، میخواستم ببینم به نظر شما ممکنه به خاطر این باشه که ویژوال استدیو رو سیستم نصب نیست و اگه این موضوع صدق میکنه از کجا میتونم یک کم حجمش رو دانلود کنم چون برنامه معمولیش دور رو بر6 گیگه!
ببخشید سوالم طولانی بود، منتظر پاسخ ارزشمندتون و همینطور آموزش های خیلی خیلی ارزشمندترتون هستم،
با تشکر.
مسعود درویشیان
25 December 2015
سلام ممنون از لطفتون. یونیتی خیلی راحت javaScript رو اجرا میکنه کافیه از MonoDevelop (که همراه خود یونیتی هست و IDE پیشفرض یونیتی هست) استفاده کنین. ویژوال استدیو javaSctipt مخصوص یونیتی رو اجرا نمیکنه حتا وقتی از پلاگین UnityVS هم (برای استفاده از ویژوال استدیو به عنوان IDE یونیتی) استفاده میکنید باز فقط سیشارپ رو پشتیبانی میکنه. ضمنا یونیتی ۶ گیگ نیست! شما حتی نسخه Pro هم که از سایتهای فارسی همراه با کرک دانلود کنید ۳ گیگ میشه
Amirmg
25 December 2015
از اون جایی که تازه شروع به یونیتی کردم متاسفانه من اطلاعات چندانی از یونیتی ندارم ولی میدونم که کد جاوای که می نویسم درست هست من وقتی در کامپایل مونو به زبان جاوا کدی می نویسم مثلا کد بسیار ساده ای مثل
Debug.Log(“this is a statement.”); a
اجرا نمی کنه و حتی وقتی در حال نوشتن هستم خواص متغیر هارو هم به هم نشون نمی ده ، وقتی ctrl و Space رو می زنم هیچ نوع خاصیتی
رو نشون نمی ده به نظر شما مشکل از یونیتی هست یا مونو ؟
اگه مشکل از یونیتی لطفا یک لینک یا ورژن بهم معرفی کنید یا هر راه کار دیگه ای که ممکنه
باتشکر از شما
مسعود درویشیان
25 December 2015
نباید مشکل داشته باشه! مطمئن هستید همه چیز رو چک کردین؟ اگه میدونین همهچیز رو چک کردین پس شاید مشکل از یونیتی باشه (که بعید میدونم).
از این لینک هم میتونید آخرین نسخه یونیتی رو دانلود کنید.
حسن علی احمدی
5 January 2016
جناب آقای مهندس درویشیان
باسپاس فراوان اززحمات شمادرخصوص آموزشها مختلف شماوهمچنین ساخت گرافیک 3بعدی وآشنایی باتاریخچه آن رادارم
هنگامه
15 March 2016
ممنون وب تارگت. مفید بود
علی
16 March 2016
سلام ممنون بابت این مطلب خوبتون، سایت رو هم زود تر بروز کنید
فرنوش
11 April 2016
سایتتون خوبه چرا دیر به دیر مطلب میزارید
kho3ro
12 November 2016
عاالی بود
متخصص ارتودنسی دندان
17 April 2018
خیلی مطلب مفیدی بود
ممنون از سایت خوبتون
موفق باشید