طراحی وگرافیک سایت سه بعدی

از زمان پیدایش وب و ارائه آن، وب مسیر طولانی را طی کرده است. وب همواره وسیله‌ای برای به اشتراک گذاشتن صفحات متن استاتیک از طریق اینترنت بوده و با زبان علامت جدید یعنی HTML ارائه می‌گردد و جستجوگر Mosaic به کاربران این امکان را می‌داد تا صفحات وب را از راه دور جستجو کنند و در آن ترکیبی از تصاویر و متن گنجانده شد [۱]. با توجه به ارائه Netscape Navigator و Internet Explorer مایکروسافت در اواسط دهه ۱۹۹۰، تکنولوژی طراحی سایت پیشرفت بسیار زیادی کرد. برگه‌های پشت سر هم و مشبک ((css) Cascading style sheets)، لایه اتصال امن (SSL)، Cookies، جاوا و جاوا اسکریپت، Adobe Flash، XML و AJAX (که در اینجا تعداد معدودی از آنها ذکر شده است) در سال‌های بعدی در مدل وب گنجانده شده است. با گذشت دهه هزاره، وب پر از صفحات طراحی شده و محتوای بصری بود و اهداف طراحی سایت، جستجو و محتوای ویرایش را کاملاً تحت پوشش قرار داده است.

ولی محتوای تعاملی چند رسانه‌ای همواره مبتنی بر Adobe Flash بود. Adobe به‌عنوان یک سیستم اختصاصی فضای آزادی برای تعریف و مشخص کردن عاملیت جستجوگر آن داشت [۲] و الزاماً به مجموعه‌ای از استانداردهایی که در کنسرسیوم وب گسترده جهانی (W3C) پذیرفته شده بود، ارجاعی نداشت. سیستم بستهٔ Adobe به توسعه‌دهندگان آن این امکان را داد تا انیمیشن‌های تصویری، صوتی و دوبعدی (۲D) را در فایل قابل اجرای Flash بگنجاند و سپس اتصال جستجوگری که بر روی ماشین کار نصب شده بود آن را اجرا می‌کرد و از خود مرورگر عبور می‌کرد.

طراحی سایت با فلش

در عین حال، در اوایل دههٔ هزاره جدید، قابلیت ارائه صفحات وب و طراحی سایت تعاملی و چندرسانه‌ای با استفاده از متدهای استاندارد بیشتر شد. در ابتدا، گرافیکِ بُرداری مقیاس‌پذیر (SVG) در جستجوگر معرفی شد و امکان ترسیم پیچیدهٔ ۲D را به روش متناسب با سبک فعلی HTML فراهم ساخت، سپس عامل Canvas معرفی شد و این عامل نیز امکان ترسیم ۲D را فراهم کرد ولی متفاوت از SVG بود، به طوری که از طریق جاوا اسکریپت قابل کنترل بوده است. Canvas در ابتدا توسط Apple به‌عنوان بخشی از چارچوب Webkit معرفی شد و سپس در استاندارد HTML5 (همراه با SVG) گنجانده شد [۴].

HTML5 طوری طراحی شده که HTML را می‌پذیرد، بدین طریق که (همراه با SVG) می‌توان از آن برای ارائه برنامه‌های کاربردی وب یعنی صفحات تعاملی پویا که سرشار از محتوای چند رسانه‌ای هستند استفاده کرد.

گسترش و پیشرفت وب و طراحی سایت از نظر فضا، قدرت و پیچیدگی وب بدین معناست که تکنولوژی که از قبل در نرم‌افزار مشتری (یا حتی سخت‌افزار) بکار می‌رفت، در حال حاضر از طریق وب مورد استفاده قرار می‌گیرد. نمونه‌ای از این قبیل تکنولوژی، گرافیک سه‌بعدی (۳D) است. با توجه به تلاش‌های صورت گرفته برای پیاده‌سازی گرافیک ۳D در اینترنت از اواسط دهه ۱۹۹۰ (به بخش ۲ در قسمت پایین مراجعه کنید)، در سال‌های اخیر، رشد زیادی از نظر توزیع و در دسترس بودن آن صورت گرفته است. در این مقاله، وضعیت فعلی گرافیک ۳D بلادرنگ در وب ارائه می‌شود. همچنین این مقاله تکنیک‌های رندرینگ، متدهای توصیف صحنه، ارائه داده‌های خاص ۳D و فیلدهای برنامه کاربردی مرتبط با آن را تحت پوشش قرار می‌دهد.

چرا گرافیک وب ۳D در طراحی سایت مورد بررسی قرار می‌گیرد؟

با توجه به توسعه و گسترش جدید آن، ما اولین نوع آن را مشاهده کردیم. با توجه به قدرت زیاد این نرم‌افزار، برنامه‌های کاربردی گرافیک سه‌بعدی (۳D) مبتنی بر وب این فرصت را دارند که در بخشی از محیط وب واقع شوند و هرکسی بتواند به آنها دسترسی پیدا کند. در این مقاله هدف ما علاوه بر ارزیابی وضعیت فعلی، ارائه بافت تاریخی است و تلاش ما بر این است که مقالات آکادمیک را بررسی کنیم و روش‌ها و مسیرها را در بخش تجاری ارزیابی کنیم و از تجربه مستقیم خود در استفاده از تکنولوژی وب ۳D استفاده کنیم.

فتورئالیسم معمولاً طبق رئالیسم شکل ۳D و چگونگی سایه روشن زدن شکل (از نظر گرافیکی با رنگ کردن مترادف است) و با توجه به منابع نور تصویر مورد قضاوت قرار می‌گیرد. تکنیک‌های پیچیده سایه‌اندازی مثل ردیابی اشعه و رادیوسیتی، تصاویر سه‌بعدی (۳D) را ارائه می‌دهند طوری که این تصاویر، علی‌رغم زمان محاسبه بالا از فتورئالیستیک بیشتری برخوردارند. با کاهش پیچیدگی الگوریتم به‌کار برده شده و برای ایجاد تأثیر نور در صفحه، می‌توان زمان رندرینگ را کاهش داد تا برنامه‌های کاربردی را زمانی ارائه دهد که تصویر ۲D آن‌قدر سریع بروز می‌شود که نمی‌توان آن را با چشم تشخیص داد. عامل مشترک در گرافیک ۳D، استفاده از تصویر و طرحی است که در آن اندازه هر شیء ۳D در تصویر ۲D با فاصله آن از چشم رابطه معکوسی دارد.

استفاده از تصویر چشم‌انداز، مختصات یکنواخت و استفاده زیاد از بردارهای سه‌بعدی (۳D) در مختصات دکارتی برای ارائه شیء ۳D به این معناست که در بسیاری از برنامه‌های کاربردی گرافیک ۳D از ریاضی ماتریس برای ساده‌تر کردن و تسریع محاسبه استفاده گسترده‌ای می‌شود.

با توجه به‌ضرورت انجام محاسبات در زمینه نقاط داده‌های مختلف (محاسبه تصویر و طرح نقاط داده‌های ۳D و محاسبه رنگ هر پیکسل در تصویر ۲D ارائه‌شده)، نوع خاصی از سخت‌افزار یعنی واحد پردازش گرافیک (GPU) گسترش یافته تا چندین عملیات را به‌صورت موازی پردازش کند. با معرفی و ارائه GPU مدرن، کاهش زیادی از نظر زمان در ارائه گرافیک ۳D در سیستم‌های گسترده رخ داده است و این امکان فراهم شده تا تکنیک‌های فتورئالیستیک و پیچیده‌تری در میزان واقعی اعمال شود. برای کنترل قدرت GPU، دستیابی از طریق API سطح پایین از قبیل Open GL یا Direct 3D آسان‌تر می‌شود. در Open GL الزاماتی برای اکثر برنامه‌های اصلی زبان نویسی و پلتفرم‌های اصلی وجود دارد ولی Direct 3D معمولاً محدود به پلتفرم‌های مایکروسافت است

ظاهر شیء (انعکاس، رنگ، شفافیت و غیره) را می‌توان طبق مواد توصیف کرد. مواد، رنگ‌ها را طبق بافت تعریف و مشخص می‌کنند. آرایه رنگ معمولاً از فایل‌های تصویر ۲D لود می‌شود. این فایل‌های تصویر  در صفحه لود می‌شود (مثلاً برای مشخص کردن ساختار رفتار شبکه)، Asset نامیده می‌شود. صفحه معمولاً شامل دوربین است و یک یا چند منبع نور را به همراه دارد و در ساختاری که گراف صفحه نامیده می‌شود سازمان‌دهی می‌شود طوری که محتوای صفحه به‌صورت منطقی (سلسله مراتبی) و فضایی سازمان‌دهی می‌شود.

از گراف‌های صفحه عمدتاً در موتورهای رندرینگ سه‌بعدی (۳D) جهت گروه‌بندی ۱ شیار صفحه استفاده می‌شود به‌طوری‌که می‌توان از پردازش‌های مختلف رندرینگ برای گروه‌های متعدد استفاده کرد. اجزاء و مؤلفه‌های برنامه لوله‌ای ثابت از الگوریتم‌هایی که از پیش توسط API برنامه‌نویسی ۳D تعریف و مشخص شده‌اند استفاده می‌کنند تا موقعیت و رنگ asset ها را در صفحه محاسبه کنند و این بستگی به دید دوربین و منبع نور دارد. در روش لوله‌ای قابل برنامه‌نویسی، لازم است که برنامه‌نویس محاسبات را به‌صورت دستی در سایه‌انداز انجام دهد و این برنامه مجزایی است که در زمان اجرا تهیه می‌شود و در GPU اجرا می‌شود. بنابراین لازم است که در روش لوله‌ای قابل برنامه‌نویسی، برنامه‌نویس درک عمیقی از ریاضیات داشته باشد و در عین حال به کنترل ظاهر صفحه نهایی بپردازد.

آنچه در بخش های بعدی گرافیک سه بعدی در طراحی سایت خواهید خواند:

این تحقیق به‌این صورت سازمان‌دهی شده است که در ابتدا به بررسی وضعیت رندرینگ سه‌بعدی (۳D) مبتنی بر وب می‌پردازیم. اما قبل از بررسی فیلد رندرینگ از راه دور (بخش ۳) و چگونگی استفاده از آن در وب ۳D، به بررسی آن از جمله روش‌های تاریخی می‌پردازیم. سپس تکنیک فشردگی  داده‌ها و ارائه محتوا (بخش ۴) را بررسی می‌کنیم و این بخش برای سناریوی مبتنی بر مشتری-سرور اهمیت زیادی دارد و مرتبط با برنامه‌های کاربردی ۳D است که در آن‌ها اندازه فایل بزرگ است. به دنبال این مسئله به انتخاب برنامه‌های کاربردی مهم می‌پردازیم طوری که طبق فیلد برنامه کاربردی  گروه‌بندی می‌شوند طوری که به آن وضعیت کمک می‌کنند (بخش ۵) و در آخر، در بخش ۶، محبوبیت وب ۳D مورد بحث قرار می‌گیرد و نتیجه‌گیری می‌شود.