وب اغلب به عنوان یک رسانه دو بعدی مشخص دیده می شود. و اگر منصف باشیم، اینطور است. برای همین طراحی شده بود. علاوه بر این، افزودن گرافیک سه بعدی که به صورت زنده ارائه می شود، به طور سنتی به پلاگین نیاز دارد. Macromedia به ما Shockwave داد، Unity به ما Unity Web Player را داد، و در تمام این مدت، ما عمدتاً از گرافیک های سه بعدی برای بازی ها استفاده کرده ایم. با این حال، HTML5، CSS3 و برخی از جاوا اسکریپت های مبتکرانه برای تغییر این موضوع بسیار کار کرده اند. اوه، هنوز هم بیشتر برای بازی‌ها استفاده می‌شود، اما می‌توانید آن را فراتر ببرید و گرافیک را راحت‌تر از همیشه در یک سایت معمولی ادغام کنید. مطمئناً، ما هنوز نگرانی‌هایی درباره قابلیت استفاده داریم. سایتی که وابسته است روی گرافیک سه بعدی برای ناوبری یا محتوای ضروری هنوز یک ایده وحشتناک است. با این حال، هنگامی که با بهبود پیشرونده استفاده می شود، 3D یک روش قابل دوام و حتی عملکرد پسند برای ارتقاء همه چیز است. به همین منظور ارائه می کنم voxel.css. voxel.css چارچوبی است که از CSS3 برای انجام کارهای سنگین رندر اشیاء سه بعدی استفاده می کند. جاوا اسکریپت برای افزودن تعامل، فعال کردن انیمیشن ها و تقریباً هر چیز دیگری استفاده می شود.

سبک

خوب، این CSS است که ما در مورد آن صحبت می کنیم. قرار نیست گرافیکی در سطح Crysis داشته باشید. همانطور که از نام این فریم ورک پیداست، چیزی که به دست می آورید یک است مقدار زیادی از مکعب ها به Minecraft در مرورگر فکر کنید. (و کسی یک کلون Minecraft را با این در سه… دو… می‌سازد.) با این وجود، می‌توانید کارهای چشمگیری را با گرافیک بلوک انجام دهید. به آن فکر کنید که هنر 8 بیتی را به یک سطح کاملاً جدید می برد.

رندر سه بعدی آسان

اجرای اولیه voxel.css فقط به گنجاندن کتابخانه و 15 خط کد نیاز دارد. این یک صحنه مجازی قابل ذخیره ایجاد می کند که در آن می توانید مدل های خود را ویرایش کنید، سبک اشاره و کلیک کنید. سپس می توانید این صحنه ها را در هر وب نمایش دهید pageو آنها را به دلخواه متحرک کنید.

از هر نوع تصویری برای بافت ها استفاده کنید

از یک PNG برای شفافیت، یک GIF برای انیمیشن یا یک فایل SVG برای مقیاس پذیری نامحدود استفاده کنید. به دلایل ناشناخته از JPG یا قالب WebP استفاده کنید زیرا چیزهایی را دوست دارید که هنوز در همه مرورگرها اجرا نشده اند. حتی یک نسخه ی نمایشی وجود دارد که از فیلم زنده از وب کم شما استفاده می کند به عنوان بافت برای بلوک ها.

شتاب پردازنده گرافیکی

باز هم CSS3 است. می توانید از قدرت رندر برتر کارت گرافیک (یا تراشه، حسب مورد) برای نمایش آثار خود استفاده کنید. شما لازم نیست نگران گرافیک های متزلزل باشید روی هر چیزی جز کندترین دستگاه های تلفن همراه. (در هر صورت باید از یک بازگشت به عقب برای آن ها استفاده کنید.)

نتیجه

voxel.css یک راه ساده و بیهوده برای دریافت خوبی های سه بعدی به برنامه وب شما است. page، سایت یا بازی آن را امتحان کنید، به دموها نگاه کنید و ببینید که آیا برای پروژه شما مناسب است یا خیر.