WebGPU مرگ OpenGL و تولد گرافیکهای جدید وب!

بهبود عملکرد گرافیکی OpenGL در درایور جدید AMD با ویندوز 22H2 سخت افزار مگ

دوره‌های آموزشی مرتبط برای یادگیری WebGL نیز در این مقاله معرفی شده‌اند. بنابراین، GPU در یک رویکرد شتاب‌یافته سخت‌افزای، ابزار مناسبی برای انجام محاسبات (رندرینگ) روی تصاویر به حساب می‌آید. این مسئله بسیار جذاب به نظر می‌رسد، اما ارتباط آن با WebGL چیست ؟ در ادامه مطلب «WebGL چیست» به شرح مفهوم WebGL و ارتباط آن با GPU و Hardware Accelerated Rendering پرداخته شده است. برای دسترسی به محتوای تولید شده با WebGL نیاز به مرورگری وجود دارد که از WebGL پشتیبانی کند. WebGL به میزان گسترده‌ای به وسیله مرورگرهای امروزی پشتیبانی می‌شود. اگرچه، در دسترس بودن آن به موارد دیگری از جمله پشتیبانی GPU نیز بستگی دارد.

مدیر مشهورترین موتور جستجوی جهان می‌گوید با اضافه شدن این بخش امکان تعامل و صحبت با هوش مصنوعی در کنار جستجوی ساده برای کاربران فراهم شده و راه‌های بیشتری برای رسیدن به پاسخ سوالات بوجود می‌آید. ممکن است این حجم زیاد از کد تنها برای تولید یک مثلث دوبُعدی تعجب‌آور باشد و کار با WebGL بسیار دشوار به نظر برسد. اما مثلاً‌ برای تولید هزار مثلث این چنینی، می‌توان تنها با وارد کردن داده‌های لازم، بسیاری از کدهای تولید شده برای GPU را مجدداً استفاده کرد. در تصویر زیر کدهای مربوط به ایجاد یک پنجره جدید با استفاده از عنصر Canvas نشان داده شده است. با استفاده از WebGL‌ باید تا حدودی آن کنترل پیکسل به پیکسلی که در رسم دوبُعدی انجام می‌شود را از بین برده و یک موتور پردازشی را برای ایجاد توهم چشم‌انداز سه‌بُعدی به کار گرفت. P5.js بیش‌تر روی رسم دو‌بعدی تمرکز دارد اما علاوه بر آن، امکانات متعدد دیگری را هم ارائه می‌دهد.

WebGL و OpenGL هر دو کتابخانه گرافیکی برای ارائه گرافیک دو بعدی و سه بعدی هستند. WebGL بیشتر در تگ canvas در  HTML مورد استفاده قرار می گیرد ، به این معنی که می تواند با زبان HTML درج شود. برای استفاده از OpenGL اما باید دانش خوبی از توسعه برنامه داشته باشید. انتخاب کتابخانه گرافیکی می تواند بر اساس الزامات، مقیاس پذیری و نیاز شما در آینده در مورد برنامه صورت بپذیرد. به‌دلیل این‌که WebGL به‌صورت پیش‌فرض یک تکنولوژی built-in در مرورگرهای مدرن است، شما می‌توانید مستقیماً و بدون نیاز به هیچ plugin یا library از WebGL استفاده کنید و نتایج آن را در مرورگر خود ببینید. جالب‌ترین نکته‌ی WebGL این‌جاست که این تکنولوژی، تحت وب است و بر روی مرورگر اجرا می‌شود.

در این بخش از مطلب «WebGL چیست»، فهرستی از مرورگرهایی آمده است که از اجرای WebGL پشتیبانی می‌کنند. ابتدا، فهرستی از مرورگرهای دسکتاپ و اطلاعاتی پیرامون نحوه پشتیبانی آن‌ها از WebGL ارائه و پس از آن، همین کار برای مرورگرهای موبایل انجام شده است. توسعه مشخصه‌های نسخه دوم WebGL در سال ۱۳۹۲ آغاز و انتشار نهایی آن در اواخر سال ۱۳۹۵ انجام شد. اولین پیاده‌سازی‌های آن در فایرفاکس ۵۱، کروم ۵۶ و اوپرا ۴۳ اتفاق افتاد. در ادامه مطلب «WebGL چیست» شرح مختصری از کاربردهای WebGL ارائه شده است.

اما، ناگهان در اقدامی غافل‌گیر کننده، جامعه Unreal Engine پشتیبانی از HTML5 را به طور کامل متوقف کرد. در نتیجه، اجتماع Unreal Engine دیگر هیچ یک از تولیدات خود را به WebGL منتقل نمی‌کنند. Unreal Engine یک مجموعه کامل از ابزارهای توسعه برای هر فردی است که با فناوری‌های زمان واقعی (Real Time | بلا‌درنگ) کار می‌کند. از تجربیات سینمایی تا بازی‌های کامپیوتری برای PC، کنسول، گوشی هوشمند، واقعیت مجازی و سایر موارد، Unreal Engine تمام آنچه برای تولید نیاز است را ارائه می‌دهد. این گروه بیش از بیست سال است که فعالیت می‌کند و نقش پررنگی در مهم‌ترین زبان Shader برای کارت‌های گرافیک دارد.

همچنین، افراد بسیاری از شرکت‌هایی مثل موزیلا، اینتل، AMD و سایر شرکت‌ها در مشخصه‌های جدید WebGPU دخیل هستند. با وجود ارائه عملکرد بهتر، WebGPU شباهت‌های بسیاری با WebGL خواهد داشت. به این ترتیب آیا می‌توان منسوخ شدن WebGL را تایید کرد یا خیر؟ در ادامه مطلب «WebGL چیست» به این سوال پاسخ داده شده است. دلیل اینکه نیاز به یک فناوری جایگزین برای WebGL وجود دارد، این است که معماری مدرن با مشخصه‌های OpenGL به خوبی کار نمی‌کند و به طور کلی سازگاری چندانی بین این دو وجود ندارد. همچنین، فناوری دیگری به نام Vulkan پدید آمده است که WebGPU با آن بهتر کار می‌کند.

در ادامه، ایده کلی استفاده از WebGL برای رندر کردن به صورت سه‌بُعدی در p5 شرح داده شده است. شتاب سخت‌افزاری به فرآیندی گفته می‌شود که در آن یک اپلیکیشن وظایف محاسباتی خاصی را به اجزای سخت‌افزاری تخصصی (در این مورد GPU) می‌سپارد. در انتها نیز پیرامون بقای WebGL و آینده آن بحث و فناوری جدیدتری به نام WebGPU معرفی شد. همچنین، بخش پایانی مطلب «WebGL چیست» به معرفی دوره‌های آموزشی مرتبط با فناوری WebGL برای علاقه‌مندان به این حوزه اختصاص داده شد. بنابراین، در این مدت کتابخانه‌هایی به وجود آمده‌اند و کدنویسان، برنامه‌های WebGL بسیاری را تولید کرده‌اند. فریم‌ورک‌های مختلفی نیز بر اساس WebGL در دسترس است تا انجام کارهای گرافیکی را با WebGL ساده‌‌تر سازند.

به طور خلاصه می‌توان گفت که از ابتدای دهه هشتاد و دهه نود شمسی تا زمان تدوین این مقاله، دو کتابخانه گرافیک وجود داشته که شامل OpenGL و Direct3D است. در انتخاب یکی از این دو برای استفاده در مرورگرها، OpenGL پیروز میدان شناخته شد. در فرآیند پیاده‌سازی WebGL به مفاهیمی اشاره شد که ممکن است برخی از افراد آشنایی کافی را با آن‌ها نداشته باشند، بنابراین در ادامه مطلب «WebGL چیست» و آموزش WebGL ، شرح مختصری از این مفاهیم پایه ارائه شده است. واضح است که «Web» به عبارت «World Wide Web» به معنی «تارنمای جهان‌گستر» یا «شبکه جهانی وب» اشاره دارد. «GL» سرنامی برای عبارت «Graphics Library» به معنی «کتابخانه گرافیک» است.

بنابراین در مطلب «WebGL چیست»، آشنایی کامل با WebGL و نکات مهم آن حاصل خواهد شد. همان‌طور که بیان شد، WebGL ارتباط مستقیمی با OpenGL دارد و در واقع WebGL همان OpenGL ‌است با این تفاوت که می‌توان آن را در وب و مرورگر به کار گرفت. بنابراین، برای پاسخ به این سوال که «WebGL چیست» ابتدا باید به این سوال پاسخ داده شود که OpenGL چیست؟ در ادامه مطلب «WebGL چیست» به معرفی OpenGL و شرح آن پرداخته شده است. به بیان ساده، GPU همان کارت گرافیک کامپیوتر است که در سطح پیشرفته‌ای مهندسی و بهینه‌سازی شده تا بتواند انجام محاسبات ماتریس‌های بزرگ، پیکسل‌ها، تصاویر و سایر موارد را بر عهده بگیرد. اکثر افراد با CPU (واحد پردازش مرکزی | Central Processing Unit) آشنایی کافی دارند.‌ بنابراین، در ادامه پیش از تعریف رندرینگ شتاب‌یافته سخت‌افزاری در مطلب «WebGL چیست»، نیاز به ارائه مقایسه‌ای از CPU و GPU وجود دارد. WebGPU نام یک استاندارد جدید وب و یک API جاوا اسکریپت برای گرافیک شتاب‌یافته و محاسبات به حساب می‌آید.

این فهرست‌ها تنها جهت آموزش و کسب اطلاعات فراهم شده‌اند، چرا که برخی از این کتابخانه‌ها قدیمی شده و دیگر از آن‌ها پشتیبانی نمی‌شود. در این مرحله باید به سراغ جاوا اسکریپت رفته و یک Context ایجاد کرد. در کدهای تصویر زیر یک تابع مقداردهی اولیه وجود دارد که عنصر Canvas ایجاد شده در مرحله قبل را با استفاده از شناسه آن برمی‌دارد و به Canvas می‌گوید که قصد استفاده از WebGL را در آنجا دارد. از جمله‌ کاربردهای ابتدایی WebGL می‌توان به ZygoteBody اشاره کرد که یک وب اپلیکیشن برای رندر سه‌بُعدی مدل‌های آناتومی بدن انسان و حیوانات به شمار می‌رود. در اواسط سال ۱۳۹۱ شرکت Autodesk اعلام کرد که آن‌ها بیش‌تر اپلیکیشن‌های خود را به فضای ابری منتقل کرده‌اند که قابل اجرا روی کلاینت‌های محلی WebGL است. با عرضه این آپدیت جدید درایور مایکروسافت WDDM 3.1 معرفی می‌شود و ای ام دی نیز با یک نسخه پیش نمایش از درایور خود کاربران ویندوز Insiders را هدف قرار خواهد داد.

یکی دیگر از قابلیت‌های p5.js، یک رندر کننده (Renderer) برای WebGL است. به احتمال زیاد، می‌توان از Three.js به عنوان شناخته شده‌ترین کتابخانه (فریم‌ورک | ابزار | فناوری) برای کار با WebGL نام برد. Three.js فناوری خارق‌العاده‌ای به حساب می‌آید و دیرینه‌ای طولانی دارد. کتابخانه Three.js قدرتمند، انعطاف‌پذیر و دارای نسخه‌ها و امکانات بسیاری است. P5.js یک کتابخانه کدنویسی خلاقانه و مناسب افراد مبتدی برای جاوا اسکریپت به حساب می‌آید.

هدف WebGPU فراهم کردن قابلیت‌های مدرن گرافیک سه‌بعدی و محاسباتی است. WebGPU توسط سازمان W3C GPU برای جامعه وب با مهندسانی از اپل، موزیلا، مایکروسافت، گوگل و سایر شرکت‌ها توسعه داده شده است. اکنون با ارائه تعریف کوتاهی از WebGPU، می‌توان به این سوال پاسخ داد که چه دلیلی برای ظهور WebGPU و کنار گذاشته شدن WebGL وجود دارد؟ در ادامه به این سوال پاسخ داده شده است. WebGL استانداردی برای پیاده‌سازی گرافیک کامپیوتری سه‌بعدی در وب است. از همه مهم‌تر، آموزش وب جی ال در سطح مقدماتی و به بیان ساده در این مطلب پوشش داده شده است.

والکان نیز مانند OpenGL یک رابط نرم‌افزاری برای سخت افزار گرافیکی است که اپن سورس و رایگان است و از قابلیت‌های بهتری نسبت به OpenGL هم برای CPU و هم برای GPU بهره می‌برد. شرکتی به نام SGI سیستم اختصاصی خود را به نام IrishGL معرفی کرده بود. در IrishGL هر چیزی که با گرافیک ارتباط نداشت (شامل ورودی‌های ماوس و کیبورد) کنار گذاشته شد و این فناوری در دسترس همگان قرار داده شد. با دانلود نسخه آزمایشی کروم می‌توانید همین حالا در پیش نمایشی به نام Babylon.js که از WebGPU پشتیبانی می‌کند این امکان را امتحان کنید. بهبود عملکرد یادیگری ماشینی در سال ۲۰۲۱ برای اولین بار و به صورت آزمایشی به کروم اضافه شد اما در حال حاضر که هوش مصنوعی‌های مولد و مدل‌های زبانی عظیم شهرت بسیاری پیدا کرده‌اند اهمیت چنین قابلیتی دوچندان می‌شود. با اینکه هوش مصنوعی بارد از گوگل و بینگ مایکروسافت از سخت‌افزار کامپیوتر شما استفاده نمی‌کنند اما توان پردازشی سیستم شما می‌تواند به بسیاری از اپلیکیشن‌های یادگیری ماشینی کمک کند.

در این بخش از مطلب «WebGL چیست» پیرامون آخرین تغییر و تحولاتی که در خصوص WebGL در جریان است بحث شده است. در این راستا باید گفت که با ظهور WebGPU، ممکن است در آینده نزدیک مرگ WebGL اتفاق بیوفتد. برای شرح دلیل این ادعا، بهتر است ابتدا نگاهی سریع به پیشینه WebGL داشت. در کدهای تصویر فوق، یک شناسه (ID) نیز به این عنصر Canvas نسبت داده شده است تا بعداً امکان ارجاع دادن به آن وجود داشته باشد. جهت ارتباط مستقیم و مکاتبه با پی وی لرن می توانید از روش های تماس زیر استفاده نمایید.

روش‌ها و امکانات به کار گرفته شده رندرینگ بر حسب پروژه متفاوت است. به این ترتیب، با شرح پیش‌نیازهای لازم، اکنون می‌توان در ادامه مطلب «WebGL چیست» به ارائه تعریف «رندرینگ شتاب‌یافته سخت‌افزاری» پرداخت. ایده کلی به این صورت است که قبل از رندر کردن هر مثلثی در صفحه نمایش از این شناسه استفاده خواهد شد. همان‌طور که بیان شد، یکی از کلیدی‌ترین ویژگی‌ها در OpenGL، شتاب‌یافتگی سخت‌افزاری است. در ادامه مطلب «WegbGL چیست» توضیحات بیش‌تری پیرامون مفهوم Hardware Accelerated Rendering ارائه شده است. برنامه‌های WebGL شامل کدهای کنترلی نوشته شده به زبان جاوا اسکریپت و کدهای Shader به زبان GLSL هستند که روی واحد پردازش گرافیکی کامپیوتر اجرا می‌شوند.

این بدان معناست که تنها به یک چیز برای اجرای برنامه‌های WebGL نیاز دارید و آن نیز یک مرورگر است. دیگر مهم نیست که این مرورگر روی تبلت، تلفن هوشمند، کامپیوتر شخصی یا کنسول بازی شما باشد. از طرف دیگر شما به هیچ‌گونه کامپایلری برای تولید گرافیک سه‌بعدی نیاز ندارید و تنها ابزار شما برای کدنویسی WebGL می‌تواند یک text editor  ساده مثل notepad باشد. پیش از این، گرافیک‌های سه‌بعدی از طریق زبان‌های برنامه‌‌نویسی مثل C یا ++C نوشته شده و سپس به باینری‌های قابل اجرا مخصوص یک پلتفرم، کامپایل می‌شدند. یعنی نسخه‌ی Macintosh یک برنامه سه‌بعدی بر روی Windows یا Linux قابل اجرا نبود.

OpenGL سرنامی برای Open Graphics Library به معنی کتابخانه گرافیک متن‌باز است. OpenGL استاندارد و کتابخانه‌ای‌ برای انجام کارهای گرافیک کامپیوتری به حساب می‌آید که در بسیاری از زبان‌ها، محیط‌ها و بسترها مورد استفاده قرار می‌گیرد. در دهه ۶۰ و اوایل دهه ۷۰ شمسی، نرم‌افزار‌ها برای یک سخت‌افزار گرافیکی خاص با رابط‌های (Interface) متفاوتی ساخته می‌شدند. سازنده اصلی آن Silicon Graphics است و OpenGL توسط گروه Khronos توسعه داده شده است. دستورات OpenGL یا shaders ها GLSL like vertex, geometry, fragment و غیره را نوشته اند. در OpenGL خطوط pipeline با عملکرد ثابت وجود دارد که استفاده از این برنامه را برای برنامه نویسان بهتر می کند.

پیش از این، گرافیک سه‌­بعدی تنها محدود به کامپیوترهای سطح بالا و قوی یا کنسول‌­های بازی بود و نیاز به برنامه‌­نویسی پیچیده‌ای داشت. اما امروزه با پیشرفته‌تر شدن کامپیوتر‌های شخصی و web browser ها، نمایش گرافیک سه‌بعدی از طریق تکنولوژی‌های مدرن و شناخته‌شده‌ی وب، امکان‌پذیر شده است. همان‌طور که در تصویر زیر مشخص شده است، خط عمود بر هر سه رأس مثلث، یک نرمال نامیده می‌شود. در کدهای جاوا اسکریپتی که تصویر آن در ادامه آمده است، ابتدا یک زمینه (Context) با WebGL و Canvas ایجاد می‌شود. در پایان، Shaderهای ایجاد شده در یک برنامه برای GPU ادغام می‌شوند.

همان‌طور که بیان شد، WebGL امکان استفاده محتوای وب از یک API بر پایه OpenGL ES 2.0 را برای اجرای رندرینگ دوبعدی و سه‌بعدی با عنصر HTML5 Canvas در مرورگرهایی فراهم می‌کند که از آن بدون استفاده از افزونه پشتیبانی کنند. «شتاب سخت‌افزاری» (Hardware Acceleration) به فرآیندی گفته می‌شود که در آن یک اپلیکیشن وظایف محاسباتی خاصی را به اجزای سخت‌افزاری تخصصی (در این مورد GPU) می‌سپارد. این کار منجر به بهبود کارایی نسبت به اجرای آن وظایف خاص روی یک پردازنده همه‌منظوره (CPU) خواهد شد. اکنون با تعریف شتاب سخت‌افزاری، نوبت به ارائه تعریف ساده و کوتاهی از مفهوم رندرینگ در ادامه مطلب «WebGL چیست» می‌رسد. در p5.js از چنین ایده‌ای برای رندر کردن تصاویر سه‌بعدی استفاده می‌شود؛ گرچه شیوه کار فناوری Three.js متفاوت است و این فرآیند به شکل کاملاً متفاوتی انجام می‌شود. هدف در p5.js این است که بتوان یک طراحی اولیه دوبُعدی انجام داد و سپس به گونه‌ای آن را به یک تصویر سه‌بُعدی تبدیل کرد و قابلیت‌های جدیدی را به آن افزود.

WebGL به توسعه‌دهندگان این امکان را می‌دهد تا تصاویر گرافیکی سه‌بعدی در مرورگر خلق کنند. می‌توان WebGL‌ را در موزیک ویدئو، بازی‌های کامپیوتری، مصورسازی داده، کارهای هنری، محیط‌های طراحی سه‌بعدی، مدل‌سازی سه‌بعدی فضا، مدل‌سازی سه‌بعدی اشیا، رسم توابع ریاضی یا ایجاد شبیه‌سازی‌های تجسمی به کار گرفت. رندرینگ شتاب‌یافته سخت‌افزاری یا «Hardware Accelerated Rendering» را می‌توان انجام عملیات رندرینگ به کمک فناوری شتاب سخت‌افزاری تعریف کرد. این شتاب سخت‌افزاری در رندرینگ تصاویر دو یا سه‌بُعدی، از طریق GPU انجام می‌شود. هر تصویر از چندین پیکسل تشکیل شده است و هر پیکسل را می‌توان درایه یک ماتریس در نظر گرفت که میزان روشنایی آن با یک عدد مشخص می‌شود. WebGL به زبان ساده، تکنولوژی‌ برای کشیدن، به نمایش در آرودن و تعامل سطح بالا و پیشرفته با گرافیک سه‌بعدی کامپیوتری از طریق مرورگرهای وب است.

Shader functions یا shader برنامه‌های کامپیوتری هستند که امکان ساختن برنامه‌هایی با جلوه‌های بصری پیشرفته توسط یک زبان برنامه‌نویسی خاص (متشابه با زبان C)، را فراهم می‌سازند. زبان برنامه‌نویسی که برای ساخت shaders  مورد استفاده قرار می‌گیرد، shading language نامیده می‌شود. اما در سطح بالاتر، مفهوم مثلث (Triangle) مطرح می‌شود که در ادامه به شرح آن پرداخته شده است. به غیر از چند بازی قدیمی، اپلیکیشن‌های عمده و کاربردی مانند Adobe Creative Cloud suite و برخی نرم‌افزارهای رندر 3 بعدی همچنان از OpenGL استفاده می‌کنند. AMD بهبود عملکرد گرافیکی OpenGL را در درایور های جدید همراه با انتشار ویندوز 11 نسخه 22H2 در آبان ماه (نسخه‌ی اصلی ویندوز 11 در نیمه‌ی دوم 2022 ) ارائه می‌کند. در رسم دوبُعدی، تنها بحث رنگ‌آمیزی هر یک از پیکسل‌ها مطرح است اما طراحی سه‌بُعدی درست مثل برپا کردن یک صحنه، استقرار یک دوربین و اضافه کردن نور است.

به این ترتیب، Three.js و p5.js به عنوان دو ابزار رایج و محبوب برای تولید تصاویر سه‌بُعدی در مرورگر با WebGL معرفی شدند و در قالب یک مثال ساده، توضیحات بیش‌تری پیرامون p5.js ارائه شد. پیاده‌سازی WebGL بدون استفاده از فریم‌ورک‌ها و کتابخانه‌های شخص ثالث فرآیندی پیچیده است. اما برای آشنایی کلی با این فرآیند، در ادامه مطلب «WebGL چیست» دستور کار ساده‌سازی شده‌ای از پیاده‌سازی WebGL شرح داده خواهد شد. پیش از آن، در ادامه مجموعه دوره‌های آموزشی جاوا اسکریپت به عنوان یکی از پیش‌نیازهای آموزش WebGL معرفی شده است. رندرینگ فرآیندی شامل تولید یک تصویر دو‌بعدی یا سه‌بعدی از یک مدل به وسیله فناوری‌های رایج است. رندرینگ اغلب در طراحی معماری، ساخت انیمیشن، شبیه‌سازی، جلوه‌های ویژه تلویزیونی، بازی‌های کامپیوتری و سایر موارد کاربرد دارد.


برنامه نویسی خوبه یا طراحی سایت