جلسه ۰۱ : معرفی WebGL

• جزئیات
• نوع محتواآموزشی

مقدمه

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

معرفی WebGL

معرفی WebGL: چند سال پیش، برنامه های جاوا – به عنوان ترکیبی از اپلت ها و JOGL – برای پردازش گرافیک های سه بعدی در وب با استفاده از پردازش گرافیکی GPU (واحد پردازش گرافیکی) مورد استفاده قرار گرفتند.

همانطور که اپلت ها برای اجرا نیاز به JVM دارند، تکیه به اپلتهای جاوا دشوار است. چند سال بعد مردم استفاده از اپلت های جاوا را متوقف کردند.
Stage3D APIs توسط Adobe (Flash، AIR) ،معماری سرعت سخت افزاری GPU معرفی شد.

با استفاده از این فن آوری، برنامه نویسان می توانند برنامه های کاربردی با قابلیت های ۲D و ۳D را در مرورگرهای وب و همچنین در IOS و سیستم عامل Android توسعه دهند.

از آن جا که فلش یک نرم افزار اختصاصی بود، به عنوان استاندارد وب مورد استفاده قرار نگرفت.
در مارس ۲۰۱۱، WebGL منتشر شد. این openware است که می تواند بدون JVM اجرا شود. این کاملا توسط مرورگر وب کنترل می شود.
نسخه جدید HTML 5 دارای چندین ویژگی برای پشتیبانی از گرافیک های ۳D مانند ۲D Canvas، WebGL، SVG، تبدیل ۳D CSS و SMIL است. در این آموزش، ما مبانی WebGL را پوشش خواهیم داد.

در ادامه ی معرفی WebGL خواهیم گفت که OpenGL و WebGL چیست؟

OpenGL چیست؟

 (Open Graphics Library) یک API زبان متقابل و پلت فرم متقابل برای گرافیک دو بعدی و سه بعدی است.

این مجموعه ای از دستورات است. OpenGL4.5 آخرین نسخه OpenGL است. جدول زیر لیستی از مجموعه ای از فن آوری های مربوط به OpenGL را لیست می کند.

توجه – در WebGL، ما از GLSL برای نوشتن شیدرها استفاده می کنیم. 

خب حالا می رسیم به اینکه WebGL چیست؟

WebGL چیست؟

WebGL (کتابخانه گرافیک وب) استاندارد جدیدی برای گرافیک ۳D در وب است، برای طراحی گرافیک ۲D و گرافیک سه بعدی تعاملی طراحی شده است.

این از کتابخانه OpenGL ES 2.0 مشتق شده است که API 3D سطح پایین برای گوشی ها و سایر دستگاه های تلفن همراه است.

WebGL عملکرد مشابهی از ES 2.0 (سیستم های جاسازی شده)را فراهم می کند و در سخت افزار گرافیکی مدرن ۳D خوب عمل می کند.
این API جاوااسکریپت است که می تواند با HTML5 مورد استفاده قرار گیرد. کد WebGL در تگ <canvas> HTML5 نوشته شده است.

این مشخصاتی است که به مرورگرهای اینترنتی امکان دسترسی به واحد پردازش گرافیکی (GPUs) را در رایانه هایی که از آن ها استفاده می شود، می دهد.

امیدوارم با این تفاسیر پاسخ خوبی برای سوال WebGL چیست؟ یافت کرده باشید.

چه کسانی WebGL را توسعه دادند

 بعد از فهمیدن پاسخ سوال WebGL چیست؟ میریم سراغ توسعه دهندگان WebGL .

یک مهندس نرم افزار آمریکایی صربستان به نام ولادیمیر ووکیسویچ کار پایه ای راانجام داد و ایجاد WebGL را هدایت کرد.
در سال ۲۰۰۷، ولادیمیر شروع به کار بر روی یک نمونه اولیه OpenGL برای عنصر Canvas سند HTML کرد.
در ماه مارس ۲۰۱۱ گروه Kronos Group WebGL را ایجاد کرد.

Rendering

Rendering فرایند تولید تصویر از یک مدل با استفاده از برنامه های کامپیوتری است.

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

خروجی این برنامه رندر یک تصویر دیجیتال است.
دو نوع رندر وجود دارد .
Rendering Software – تمام محاسبات رندرینگ با کمک پردازنده انجام می شود.
Hardware Rendering – تمام محاسبات گرافیکی توسط GPU (واحد پردازش گرافیکی) انجام می شود.
رندر می تواند به صورت محلی یا از راه دور انجام شود. اگر تصویر رندر بیش از حد پیچیده باشد، رندر از راه دور بر روی یک سرور اختصاصی با داشتن منابع سخت افزاری مورد نیاز کافی برای ارائه صحنه های پیچیده انجام می شود.

این به عنوان رندر مبتنی بر سرور یا server-based نامیده می شود. رندر را می توان به صورت محلی توسط CPU انجام داد. این به عنوان رندر مبتنی بر مشتری یا client-based نامیده می شود.
WebGL رویکرد رندر مبتنی بر مشتری را برای ارائه صحنه های ۳D دنبال می کند. تمام پردازش مورد نیاز برای به دست آوردن یک تصویر به صورت محلی با استفاده از سخت افزار گرافیکی کلاینت انجام می شود.

GPU

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

طبق گفته NVIDIA، یک GPU یک پردازنده تک تراشه با تبدیل یکپارچه، نورپردازی، تنظیم triangle / clipping و رندر کردن موتورها است که حداقل ۱۰ میلیون چندضلعی را در هر ثانیه پردازش می کند.

برخلاف پردازنده های چند هسته ای که با چند هسته برای پردازش پیوسته بهینه شده اند، یک پردازنده گرافیکی شامل هزاران هسته کوچکتر است که پردازش موازی موثر را انجام می دهند.

بنابراین، پردازنده گرافیکی، ایجاد تصاویر در یک بافر فریم (بخشی از RAM که حاوی داده های فریم کامل) است، برای خروجی به یک صفحه نمایش، شتاب می دهد.

GPU – معرفی WebGL

پردازنده سریع GPU

در محاسبات شتاب دهنده GPU، برنامه به CPU بارگذاری می شود. هر وقت که با یک بخش محاسباتی از کد روبرو می شود، آن قسمت از کد بارگذاری می شود و روی GPU اجرا می شود.

این سیستم توانایی پردازش گرافیک را به نحوی کارآمد انجام می دهد.

معرفی WebGL – پردازنده سریع GPU

GPU حافظه جداگانه ای خواهد داشت و چندین نسخه از یک قسمت کوچک از کد را در یک زمان اجرا می کند. GPU تمام داده هایی که در حافظه محلی است پردازش می کند و نه حافظه مرکزی .

بنابراین داده هایی که توسط GPU مورد پردازش قرار می گیرند باید به حافظه GPU بارگیری شوند و سپس پردازش شوند.
در سیستم هایی که دارای معماری بالا هستند، سربار ارتباط بین CPU و GPU باید برای رسیدن به پردازش سریع تر برنامه های ۳D کاهش یابد.

برای این کار، ما باید همه داده ها را کپی کنیم و آن را در GPU نگه داریم، نه به طور متناوب با GPU.

مرورگرهای پشتیبانی شده

جداول زیر لیستی از مرورگرهایی هستند که از WebGL پشتیبانی می کنند .

مرورگرهای وب

مرورگرهای موبایل

مزایای WebGL

در ادامه معرفی WebGL مزایای استفاده از WebGL را داریم.
۱. برنامه نویسی جاوا اسکریپت –

برنامه های WebGL در جاوا اسکریپت نوشته شده با استفاده از این برنامه ها، می توانید به طور مستقیم با دیگر عناصر سند HTML ارتباط برقرار کنید.

شما همچنین می توانید از دیگر کتابخانه های جاوا اسکریپت (مانند جی کوئری) و تکنولوژی های HTML برای غنی سازی برنامه WebGL استفاده کنید.
۲. افزایش پشتیبانی با مرورگرهای تلفن همراه –

WebGL همچنین از مرورگرهای موبایل مانند Safari iOS، Android Browser و Chrome for Android پشتیبانی می کند.
۳. منبع باز –

WebGL یک منبع باز است. شما می توانید به کد منبع کتابخانه دسترسی پیدا کنید و بدانید که چگونه کار می کند و چگونه توسعه یافته است.
۴. بدون نیاز به تدوین –

جاوا اسکریپت یک نیمه برنامه نویسی و نیمه HTML است. برای اجرای این اسکریپت، نیازی به کامپایل فایل نیست. در عوض، شما می توانید به طور مستقیم با استفاده از هر مرورگر فایل را باز کنید و نتیجه را بررسی کنید.

از آنجا که برنامه های WebGL با استفاده از جاوا اسکریپت توسعه یافته است، نیازی به کامپایل برنامه های WebGL نیز وجود ندارد.
۵. مدیریت حافظه خودکار –

جاوا اسکریپت از مدیریت حافظه خودکار پشتیبانی می کند. نیاز به ذخیره دستی حافظه لازم نیست. WebGL این ویژگی جاوا اسکریپت را به ارث می برد.
۶. آسان برای راه اندازی –

از آنجا که WebGL در HTML 5 یکپارچه شده است، نیازی به تنظیم اضافی وجود دارد. برای نوشتن یک برنامه WebGL، تمام آنچه که شما نیاز دارید یک ویرایشگر متن و یک مرورگر وب است.

تنظیم محیط

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

کلام پایانی

در قسمت معرفی WebGL متوجه شدیم که اصلا WebGL چیست؟ و در پاسخ به سوال WebGL چیست؟ گفتیم که WebGL برای طراحی گرافیک ۲D و گرافیک سه بعدی تعاملی طراحی شده است.

در ادامه جلسات توضیحات بیش تری راجع به این مطالب خواهیم داشت.