Walkinto — Before / After, Pano2VR 8

ეს პაკეტი ერთი სივრცის ორი 360° პანორამის შესადარებელი HTML/CSS/JavaScript შაბლონია. ის იყენებს შენივე Pano2VR 8-ით შექმნილ ორ Web Output-ს. ფაილი index.html არის შედარების მთავარი გვერდი; ეს არ არის Skin Editor-ში იმპორტირებადი .ggsk ან Pano2VR-ის პროექტი.

ჯერ ნახე დემო

გახსენი DEMO.html ჩვეულებრივი ორმაგი კლიკით. დემოში არის ამ პაკეტისთვის კოდით დახატული სივრცე და დამოუკიდებელი CSS 3D რენდერი. ის აჩვენებს ინტერფეისსა და მართვას; Pano2VR-ის მოთამაშეს ან შენს პანორამებს არ შეიცავს. დემოს გახსნა ინტერნეტს არ საჭიროებს.

ჩასმა — ორი ექსპორტი

Pano2VR 8-ში მოამზადე Before პანორამა და შექმენი Web Output. ამ პირველი ვერსიისთვის გამოიყენე ერთი პანორამა, ცარიელი Skin, გამორთული ავტობრუნვა და შესავალი ანიმაცია.
იმავე გზით ცალკე შექმენი After-ის Web Output. ორივე ექსპორტში გამოიყენე ერთი და იგივე Pano2VR ვერსია, ხედვისა და ზუმის ლიმიტები. ორივე პანორამა წინასწარ გაასწორე ჰორიზონტზე.
პირველი ექსპორტის მთელი შიგთავსი ჩასვი ამ პაკეტის before საქაღალდეში. მეორე — after საქაღალდეში. ორივეგან ჩაანაცვლე აქ არსებული დროებითი index.html. გადაიტანე ყველა ფაილი და ქვესაქაღალდე, მათ შორის მოთამაშე, XML, tiles/images და ექსპორტის სხვა დამოკიდებულებები. before/output/index.html-ის ნაცვლად სტანდარტული განლაგებაა before/index.html.
შედარებას ხსნის პაკეტის მთავარი index.html. ატვირთე მთელი საქაღალდე შენს ჰოსტინგზე და გახსენი ეს გვერდი HTTPS-ით. მთავარი გვერდი და ორივე ექსპორტი უნდა იყოს ერთსა და იმავე origin-ზე: იგივე პროტოკოლი, დომენი და პორტი.
ლოკალურად შეგიძლია გამოიყენო START_LOCAL_SERVER.bat, თუ Windows-ზე Python 3 გაქვს დაყენებული. ან ტერმინალში გაუშვა python serve.py. შემდეგ გახსენი http://127.0.0.1:8080/index.html. გაჩერება: Ctrl+C. ნამდვილი ექსპორტების შედარება file://-ით არ გახსნა.

თუ შენი ექსპორტის გვერდს სხვა სახელი აქვს, ჩაწერე სწორი მისამართი compare/config.js-ში. მაგალითად: url: "before/tour.html".

რეჟიმები და მართვა

ღილაკი	მოქმედება
Before	პირველი პანორამა სრულ ეკრანზე
Split	მოძრავი ვერტიკალური გამყოფი
Side by side	ორი ცალკე ხედი გვერდიგვერდ
Blend	ორი ხედი ერთმანეთზე; სლაიდერი ცვლის After-ის გამჭვირვალობას
After	მეორე პანორამა სრულ ეკრანზე
Reset view	საწყისი მიმართულება, ზუმი და სლაიდერები
+ / −	სინქრონული ზუმი
Fullscreen	მთელი შედარება სრულ ეკრანზე, თუ ბრაუზერი მხარს უჭერს

ხედი გადაათრიე ნებისმიერი მხრიდან; მეორე მხარე მიჰყვება. გამყოფი გადაათრიე მაუსით ან თითით. კლავიატურით გამყოფზე გამოიყენე მარცხენა/მარჯვენა ისრები, Shift უფრო დიდი ნაბიჯისთვის, Home/End კიდეებისთვის. გამყოფზე ორმაგი კლიკი აბრუნებს მას ცენტრში. მობილურზე ზუმისთვის არის +/− ღილაკები; Pano2VR-ის საკუთარი touch მართვაც რჩება ექსპორტში.

გასწორება და პარამეტრები

შეცვალე compare/config.js: სათაური, Before/After წარწერები, საწყისი რეჟიმი, გამყოფის პროცენტი და ექსპორტების მისამართები.

საუკეთესო თანხვედრისთვის ორივე ფოტო უნდა იყოს გადაღებული ერთი და იმავე კამერის პოზიციიდან, ერთნაირი სიმაღლითა და გასწორებით. ფოტოგრაფიის წერტილებს შორის პარალაქსს სლაიდერი ვერ ასწორებს. თავდაპირველად გაასწორე მასალები Pano2VR-ში.

თუ მხოლოდ ჰორიზონტალური მიმართულება განსხვავდება, შეცვალე alignment.pan, მაგალითად 12.5. ეს ნიშნავს: After-ის pan = Before-ის pan + 12.5°. tilt და roll მცირე ხელით კორექციისთვისაა; ისინი სრულ სივრცით რეგისტრაციას არ ასრულებს. Reset view საწყის ხედს იღებს Before ექსპორტიდან, შემდეგ მეორე ხედზე იყენებს მითითებულ სხვაობას.

playerGlobal: "pano" შეესაბამება ჩვეულებრივ ექსპორტს. თუ შენს HTML-ში მოთამაშე სხვა გლობალური სახელით იქმნება, მიუთითე ის. თუ ობიექტი მხოლოდ სკრიპტის შიდა არეშია, მის შექმნის შემდეგ იმავე არეში დაამატე window.pano = pano; ან შესაბამისი ცვლადის სახელი.

ტექნიკური ფარგლები

ეს ვერსია განკუთვნილია ერთი სივრცის ორი სტანდარტული 360° პანორამისთვის. სინქრონიზდება pan, tilt, ვერტიკალური FoV და roll. შაბლონი აყენებს ჩვეულებრივ Rectilinear ხედს; ავტობრუნვა, ინერცია და გიროსკოპი შედარების დაწყებისას ითიშება.
Split რეჟიმში ორივე რენდერი ეკრანის სრულ ზომას ინარჩუნებს. მოძრაობს მხოლოდ ხილვადობის საზღვარი, ამიტომ გამყოფი ხედვის კუთხეს არ ცვლის. Side by side რეჟიმში თითოეულ მხარეს თავისი ნახევარი ეკრანი აქვს.
შენი გამოგზავნილი krpano მაგალითი ადარებს Gaussian Splat-ს და ტექსტურირებულ 3D მოდელს. ამ პაკეტში 3D კამერის XYZ/ორბიტის სინქრონიზაცია არ არის რეალიზებული. ნამდვილ 3D შედარებას ორივე მოდელის კოორდინატების გასწორება და შესაბამისი კამერის ინტეგრაცია სჭირდება.
მრავალსივრციან ტურს სჭირდება Before/After კვანძების შესაბამისობის სია. ეს პაკეტი სხვა კვანძზე გადასვლას ამოიცნობს და აჩერებს შედარებას, რათა სხვადასხვა სივრცე შემთხვევით არ შეადაროს. ასეთი ტურისთვის მოგვაწოდე ორივე ექსპორტი და კვანძების წყვილები.
გამოიყენე ცარიელი Skin და ერთი კვანძი თითო ექსპორტში. საკუთარი მენიუები, hotspots, intro ანიმაციები, VR და 3D გადასვლები ამ შაბლონში ინტეგრირებული არ არის. შედარების სრულეკრანიანი რეჟიმი ჩართე ქვედა პანელის ღილაკით.
ორი მოთამაშე ერთდროულად მუშაობს. გამოიყენე მობილურისთვის გონივრული მრავალრეზოლუციური პარამეტრები და შეამოწმე შენს სამიზნე მოწყობილობებზე.

შემოწმების სტატუსი

შემოწმებულია სინქრონიზაციის ლოგიკა, DOM-ში მართვის მოქმედებები, CSS-ის სინტაქსი და ფაილების კავშირები. ზუსტი შედეგები მოცემულია VALIDATION.md-ში. ბრაუზერმა მითითებულ krpano მაგალითზე WebGL-ის შეცდომა აჩვენა; გარემოს URL პოლიტიკამ ადგილობრივი დემოს გახსნაც დაბლოკა. შესაბამისად, გრაფიკულ ბრაუზერში ვიზუალური შემოწმება ვერ დასრულდა. შენი Pano2VR ექსპორტები არ იყო მოწოდებული; რეალურ Pano2VR 8 მოთამაშესა და ნამდვილ მობილურ მოწყობილობაზე საბოლოო შემოწმება დარჩენილია. დემო და იმიტირებული მოთამაშე ამ შემოწმებას არ ცვლის.

წყაროები

ინტეგრაცია ეყრდნობა Pano2VR 8-ის გამოქვეყნებულ JavaScript API-ს, მათ შორის ხედვის კუთხეებს, ვერტიკალურ FoV-სა და მოთამაშის მოვლენებს.

ვიზუალური ქცევის მითითება: krpano — 3D Gaussian Splatting Comparison.

შედარების კოდი და დემოს ილუსტრაციები შექმნილია ამ პაკეტისთვის. krpano-ის კოდი, მოდელები და Pano2VR-ის მოთამაშე არ გადმოგვიტანია. Pano2VR-ის საჭირო ფაილები მოდის შენივე ექსპორტიდან.