طراحی سایت و گرافیک سه‌بعدی بخش اول

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

1-مقدمه

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

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

در برنامه‌های کاربردی مبتنی بر Flash، زمان دانلود (نسبتاً) بیشتری موردنیاز بود و عدم وجود پلتفرم برای ios اپل، بدین معنا بود که Flash تا حدی محبوبیت اولیه خود را از دست داده است. [3]

شکل 1: طراحی سایت با فلش

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

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

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

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

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

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

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

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

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

شکل 2: گرافیک سه بعدی و طراحی سایت

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

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

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

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

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

آموزش سایت ساز-مدیریت صفحات

آموزش سایت ساز-ماژول های سایت

آموزش سایت ساز-تعریف سایت