Το WebXR Game of the Year στοχεύει στο βλέμμα και το τσίμπημα του Apple Vision Pro

Σημείωση συντάκτη: Το Escape Artist είναι ένα παιχνίδι WebXR που διατίθεται τώρα από την Paradowski Creative που διαθέτει ισχυρή υποστήριξη για παρακολούθηση ελεγκτή Quest 3 με είσοδο κουμπιών για αλληλεπίδραση και τηλεμεταφορά. Ενώ εργάζεστε για την υποστήριξη της παρακολούθησης ματιών και χεριών στο Vision Pro από το ίδιο URLο τεχνικός διευθυντής James C. Kane διερευνά ζητήματα σχετικά με το σχεδιασμό, την τεχνολογία και το απόρρητο.

Υπάρχουν πλεονεκτήματα και μειονεκτήματα στην πλήρη εξάρτηση του Vision Pro στις χειρονομίες και την παρακολούθηση των ματιών, αλλά όταν λειτουργεί στο πλαίσιο, η εισαγωγή που βασίζεται στο βλέμμα μοιάζει σαν το μέλλον που μας υποσχέθηκαν – σαν ένας υπολογιστής να διαβάζει το μυαλό σας σε πραγματικό χρόνο για να να σου δώσει αυτό που θέλεις. Αυτή η πρώτη επανάληψη είναι ατελής, δεδομένων των πολλών έγκυρων ανησυχιών σχετικά με το απόρρητο, αλλά η Apple έχει σαφώς θέσει ένα νέο πρότυπο για καθηλωτική εμπειρία χρήστη στο μέλλον.

Έχουν φέρει ακόμη και αυτή την καινοτομία στον Ιστό με τη μορφή Safari’s transient-pointer εισαγωγή. Το σύγχρονο πρόγραμμα περιήγησης είναι μια πλήρως εξοπλισμένη χωρική υπολογιστική πλατφόρμα από μόνη της, και η Apple ανέβασε τα φρύδια όταν ανακοίνωσε την υποστήριξη beta για την προδιαγραφή WebXR μεταξύ πλατφορμών στο Vision Pro κατά την κυκλοφορία. Ενώ εξακολουθούν να υπάρχουν ορισμένοι περιορισμοί, η άμεση παγκόσμια διανομή καθηλωτικών εμπειριών χωρίς επιμέλεια ή χρεώσεις στο App Store την καθιστά μια απίστευτα ισχυρή, ενδιαφέρουσα και προσβάσιμη πλατφόρμα.

Εξερευνούμε αυτό το κανάλι εδώ και χρόνια στο Paradowski Creative. Είμαστε μια ομάδα πρακτορείων που δημιουργεί καθηλωτικές εμπειρίες για κορυφαίες παγκόσμιες επωνυμίες όπως Sesame Street, adidas και Verizonαλλά επενδύουμε επίσης σε βραβευμένο πρωτότυπο περιεχόμενο για να ξεπεράσουμε τα όρια του μέσου. The Escape Artist είναι το παιχνίδι μας VR Escape Room όπου παίζετε ως μούσα ενός καλλιτέχνη παγιδευμένου στο δικό του έργο, αποκρυπτογραφώντας υποδείξεις και λύνοντας παζλ για να βρείτε έμπνευση και να ξεφύγετε στον πραγματικό κόσμο. Του εμφανίζεται στην αρχική σελίδα κάθε ακουστικού Meta Quest στον κόσμοέχει παιχτεί από περισσότερους από ένα τέταρτο εκατομμύριο άτομα σε 168 χώρες και ήταν Νικητής People’s Voice Καλύτερης Αφηγηματικής Εμπειρίας στα φετινά Webby Awards.

Το παιχνίδι μας σχεδιάστηκε κυρίως γύρω από τους φυσικούς ελεγκτές της Meta Quest και ήμασταν στα μισά του δρόμου της παραγωγής μέχρι να ανακοινωθεί το Vision Pro. Ωστόσο, οι πραγματικές δυνατότητες του WebXR έγκεινται στο βοηθητικό πρόγραμμα πολλαπλών πλατφορμών και πολλαπλών εισόδων και συνειδητοποιήσαμε γρήγορα ότι η ιδέα μας θα μπορούσε να λειτουργήσει καλά και σε οποιαδήποτε λειτουργία εισόδου. Καταφέραμε να ντεμπούτο υποστήριξη beta για παρακολούθηση χεριών στο Apple Vision Pro εντός εβδομάδων από την κυκλοφορία του, αλλά τώρα που έχουμε καλύτερη τεκμηρίωση σχετικά με τη νέα εισαγωγή που βασίζεται στην παρακολούθηση ματιών της Apple, ήρθε η ώρα να επανεξετάσουμε αυτήν την εργασία. Πώς εκτίθεται το βλέμμα; Σε τι μπορεί να είναι καλό; Και πού μπορεί να υπολείπεται ακόμα; Ας δούμε.

Προηγούμενη τέχνη και τεκμηρίωση

Η Ada Rose Cannon και ο Brandel Zachernuk της Apple πρόσφατα δημοσίευσε μια ανάρτηση στο blog εξηγώντας πώς λειτουργεί αυτή η είσοδος, συμπεριλαμβανομένου του κύκλου ζωής του συμβάντος και των βασικών λεπτομερειών εφαρμογής για τη διατήρηση του απορρήτου. Η ανάρτηση παρουσιάζει α παράδειγμα three.js που αξίζει επίσης εξέταση.

Μοναδικά, αυτή η είσοδος παρέχει ένα διάνυσμα βλέμματος selectstart — δηλαδή, μετασχηματίστε δεδομένα που μπορούν να χρησιμοποιηθούν για να τραβήξετε μια γραμμή μεταξύ των ματιών του χρήστη προς το αντικείμενο που κοιτάζει τη στιγμή που αναγνωρίζεται η χειρονομία τσιμπήματος. Με αυτό, οι εφαρμογές μπορούν να προσδιορίσουν ακριβώς σε τι επικεντρώνεται ο χρήστης στο πλαίσιο. Σε αυτό το παράδειγμα, αυτή είναι μια σειρά από πρωτόγονα σχήματα που ο χρήστης μπορεί να επιλέξει με το βλέμμα και στη συνέχεια να χειριστεί περαιτέρω κινώντας το χέρι του.

Η Apple δικαίως θεωρεί ότι πρόκειται για εξαιρετικά προσωπικά δεδομένα που πρέπει να προστατεύονται σε επίπεδο συστήματος και να αντιμετωπίζονται με εξαιρετική προσοχή από τους προγραμματιστές. Για να αντιμετωπιστούν αυτές οι ανησυχίες, τα δεδομένα ματιών είναι κρίσιμα εκτίθεται μόνο για ένα μόνο πλαίσιο. Αυτό θα πρέπει να αποτρέψει την κατάχρηση από κακόβουλους προγραμματιστές — αλλά πρακτικά, αποκλείει επίσης τυχόν εφέ τονισμού που βασίζονται στο βλέμμα πριν από την επιλογή αντικειμένου. Ομοίως, οι εγγενείς προγραμματιστές δεν έχουν άμεση πρόσβαση σε διανύσματα ματιών καρέ-καρέ, αλλά μπορούν τουλάχιστον να κάνουν χρήση της υποστήριξης σε επίπεδο λειτουργικού συστήματος από στοιχεία UIKit. Πιστεύουμε ότι η Apple θα κινηθεί τελικά προς αυτή την κατεύθυνση και για τον Ιστό, αλλά προς το παρόν αυτό παραμένει ένας περιορισμός.

Παρόλα αυτά, χρησιμοποιώντας transient-pointer Η είσοδος για την επιλογή αντικειμένου μπορεί να έχει νόημα όταν τα επιλέξιμα αντικείμενα καταλαμβάνουν αρκετό οπτικό πεδίο για να αποφύγετε απογοητευτικά παραλίγο αστοχία. Ωστόσο, ως δοκιμαστική περίπτωση, θα ήθελα να προσπαθήσω να αναπτύξω έναν άλλο κύριο μηχανικό — και έχω παρατηρήσει ένα σταθερό πρόβλημα με το περιεχόμενο του Vision Pro, το οποίο μπορούμε να βοηθήσουμε να αντιμετωπίσουμε.

Μετακίνηση: Μια δήλωση προβλήματος

Λίγες, αν όχι καθόλου, εμπειρίες στο Vision Pro επιτρέπουν πλήρη ελευθερία κίνησης και αυτοκατευθυνόμενη κίνηση μέσω του εικονικού χώρου. Το μάρκετινγκ της Apple δίνει έμφαση σε καθιστές, ακίνητες εμπειρίες, πολλές από τις οποίες λαμβάνουν χώρα μέσα σε επίπεδα, 2D παράθυρα που επιπλέουν μπροστά από τον χρήστη. Ακόμη και σε πλήρως καθηλωτικές εφαρμογές, στην καλύτερη περίπτωση, έχετε γραμμική τηλεμεταφορά βασισμένη σε hotspot, χωρίς πραγματική αίσθηση πρακτορείας ή εξερεύνησης.

Ένας σημαντικός λόγος για αυτό είναι η έλλειψη συνεπών και συναρπαστικών μηχανικών τηλεμεταφοράς για περιεχόμενο που βασίζεται στην παρακολούθηση χεριών. Όταν χρησιμοποιείτε φυσικούς ελεγκτές, η τηλεμεταφορά «δείκτη λέιζερ» έχει γίνει ευρέως αποδεκτή και είναι αρκετά ακριβής. Αλλά επειδή η Apple έχει αποφύγει οποιαδήποτε τέτοια περιφερειακά χειρός προς το παρόν, οι προγραμματιστές και οι σχεδιαστές πρέπει να βαθμονομήσουν εκ νέου. Θα ήταν δυνατή μια αναπαραγωγή 1:1 ενός τρισδιάστατου δρομέα που μοιάζει με ελεγκτή που εκτείνεται από τον καρπό, αλλά υπάρχουν πρακτικές και τεχνικές προκλήσεις με αυτόν τον σχεδιασμό. Σκεφτείτε αυτές τις στάσεις:

Από την οπτική γωνία ενός Vision Pro, η εικόνα στα αριστερά δείχνει μια χειρονομία τσιμπήματος που είναι εύκολα αναγνωρίσιμη — η εκπομπή ακτίνων από αυτόν τον προσανατολισμό του καρπού σε αντικείμενα εντός λίγων μέτρων θα λειτουργούσε καλά. Αλλά στα δεξιά, καθώς ο χρήστης ισιώνει τον αγκώνα του μόνο μερικές μοίρες για να δείχνει προς το έδαφος, η χειρονομία γίνεται πρακτικά αγνώριστη στους αισθητήρες της κάμερας και το κάθισμα του χρήστη λειτουργεί περαιτέρω ως φυσικό εμπόδιο για να δείχνει ευθεία προς τα κάτω. Και το “τσίμπημα” είναι μια απλή περίπτωση — αυτά τα προβλήματα μεγεθύνονται για πιο σύνθετες χειρονομίες που περιλαμβάνουν πολλές θέσεις των αρθρώσεων (π.χ.: ✌️, 🤘 ή👍).

Συνολικά, αυτό σημαίνει ότι η παρακολούθηση χεριών, η αναγνώριση χειρονομιών και το διάνυσμα καρπού από μόνα τους δεν αποτελούν μια πολύ ισχυρή λύση για τηλεμεταφορά. Αλλά υποθέτω ότι μπορούμε να χρησιμοποιήσουμε το νέο της Apple transient-pointer εισαγωγή — με βάση και τα δύο βλέμματα και λεπτή κίνηση του χεριού — για να σχεδιάσουμε έναν διδάσκοντα, διαισθητικό μηχανικό τηλεμεταφοράς για το παιχνίδι μας.

Μια ελάχιστη αναπαραγωγή

Ενώ η Apple είναι μόνη transient-pointer Το παράδειγμα είναι γραμμένο σε three.js, το παιχνίδι μας είναι made in Κινητήρας της Χώρας των Θαυμάτωνένα σύστημα επεξεργασίας και συστατικών στοιχείων οντοτήτων που μοιάζει περισσότερο με το Unity, σχεδιασμένο για τον ιστό, του οποίου η δέσμη ενεργειών βασίζεται σε ο glMatrix βιβλιοθήκη μαθηματικών. Επομένως, θα χρειαστεί κάποια μετατροπή της λογικής εισόδου.

Όπως αναφέρθηκε, το παιχνίδι μας υποστηρίζει ήδη παρακολούθηση χεριών — αλλά κυρίως, transient-pointer Οι είσοδοι είναι τεχνικά ξεχωριστές από την παρακολούθηση χεριών και δεν απαιτούν ειδικές άδειες προγράμματος περιήγησης. Στο Vision Pro, η πλήρης “παρακολούθηση χεριών” χρησιμοποιείται μόνο για την αναφορά δεδομένων κοινής τοποθεσίας για απόδοση και δεν έχει ενσωματωμένη λειτουργία εκτός εάν προστεθεί από προγραμματιστές (π.χ. επιταχυντές που προστέθηκαν στις αρθρώσεις, αναγνώριση πόζας κ.λπ.). Εάν η παρακολούθηση χεριών είναι ενεργοποιημένος, α transient-pointer θα αρχειοθετήσει στη σειρά πίσω από αυτές τις πιο επίμονες εισαγωγές.

Έτσι, έχοντας αυτό κατά νου, η ελάχιστη αναπαραγωγή μου θα πρέπει:

• Ακούστε για selectstart συμβάντα και ελέγξτε για εισροές με a targetRayMode οριστεί σε transient-pointer
• Περάστε αυτές τις εισόδους στις συνεδρίες XR getPose() να επιστρέψει ένα XRPose περιγράφοντας τον προσανατολισμό της εισόδου
• Μετατρέπω XRRigidTransform αξίες από το διάστημα αναφοράς στον παγκόσμιο χώρο (επιδοκιμασία στον αιώνιο παραδοσιάρχη Paradowski Ethan Michalicek που το συνειδητοποίησα, διατηρώντας έτσι τη λογική μου για άλλη μια μέρα)
• Το Raycast από τον παγκόσμιο χώρο μετασχηματίζεται σε επίπεδο σύγκρουσης navmesh
• Δημιουργία πλέγματος τηλεμεταφοράς, μεταφράζοντας τις θέσεις Χ και Ζ του στην είσοδο gripSpace μέχρι ο χρήστης να απελευθερώσει το τσίμπημα
• Τηλεμεταφορά του χρήστη στη θέση του πλέγματος ενεργοποιημένο selectend

Η ουσία στο τέλος αυτής της ανάρτησης περιέχει το μεγαλύτερο μέρος του σχετικού κώδικα, αλλά σε ένα έργο επίδειξης Greenfield, αυτό είναι σχετικά απλό στην εφαρμογή:

Σε αυτήν την προεπιλεγμένη σκηνή, κινώ μια σφαίρα γύρω από το επίπεδο του δαπέδου με “βλέμμα και τσίμπημα”, όχι στην πραγματικότητα τηλεμεταφορά. Παρά την έλλειψη εφέ επισήμανσης ή οποιασδήποτε οπτικής προεπισκόπησης, οι εκπομπές ακτίνων ματιών είναι αρκετά ακριβείς — εκτός από τη γενική πλοήγηση και τη διεπαφή χρήστη, μπορείτε να φανταστείτε άλλες χρήσεις όπως ένα παιχνίδι όπου παίζετε ως Cyclops από τους X-Men ή μηχανικοί παζλ με βάση τα μάτια , ή αναζήτηση ενδείξεων σε ένα παιχνίδι ντετέκτιβ.

Για να δοκιμάσω περαιτέρω πώς θα φαίνεται και θα αισθάνεται αυτό στο πλαίσιο, θέλω να δω αυτόν τον μηχανικό στην τελευταία σκηνή του στούντιο The Escape Artist.

Ακόμη και σε αυτήν την κατάσταση MVP, αυτό είναι υπέροχο και αντιμετωπίζει αρκετά προβλήματα με τη μηχανική τηλεμεταφοράς “δείκτη λέιζερ”. Επειδή δεν βασιζόμαστε καθόλου στον προσανατολισμό του χειριστηρίου ή του καρπού, ο αγκώνας και ο βραχίονας του παίκτη μπορούν να διατηρήσουν μια στάση που είναι τόσο άνετη όσο και εύκολη για την αξιόπιστη αναγνώριση των αισθητήρων της κάμερας. Ο παίκτης μετά βίας χρειάζεται να κινήσει το σώμα του, αλλά εξακολουθεί να διατηρεί πλήρη ελευθερία κινήσεων σε όλο τον εικονικό χώρο, συμπεριλαμβανομένων ανεπαίσθητων προσαρμογών ακριβώς κάτω από τα πόδια του.

Είναι επίσης εξαιρετικά εύκολο στη διδασκαλία. Άλλες εισαγωγές που βασίζονται σε χειρονομίες απαιτούν γενικά μεγάλη προσαρμοσμένη εκπαίδευση ανά εφαρμογή ή εμπειρία, αλλά η βάση στην προεπιλεγμένη λειτουργία εισαγωγής της συσκευής μειώνει την καμπύλη εκμάθησης. Ωστόσο, θα προσθέσουμε βήματα εκμάθησης, αλλά είναι πιθανό όποιος έχει πλοηγηθεί με επιτυχία στο παιχνίδι μας στο Vision Pro να είναι απαραίτητα ήδη εξοικειωμένος με τη μηχανική του βλέμματος και του τσιμπήματος.

Ακόμη και για τους μη μυημένους, αυτό αρχίζει γρήγορα να μοιάζει με έλεγχο του μυαλού — είναι σαφές ότι η Apple έχει αποκαλύψει ένα βασικό νέο στοιχείο στη χωρική εμπειρία χρήστη.

Επόμενα βήματα και συμπεράσματα

Η ανάπτυξη μιας ελάχιστης βιώσιμης αναπαραγωγής αυτού του χαρακτηριστικού είναι ίσως λιγότερο από τη μισή μάχη. Τώρα πρέπει να το ενσωματώσουμε στη λογική του παιχνιδιού μας, να χειριστούμε την επιλογή αντικειμένων παράλληλα με αυτό και να δοκιμάζουμε κάθε αλλαγή σε ακουστικά τεσσάρων συν και πολλαπλές λειτουργίες εισόδου. Επιπλέον, ορισμένες δοκιμές παρακολούθησης για το UX μπορεί να είναι:

1. Η εφαρμογή ενός φίλτρου θορύβου στην κίνηση του χεριού στο δίκτυο τηλεμεταφοράς — εξακολουθεί να είναι λίγο νευρικό.
2. Χρησιμοποιώντας κανονικοποιημένο δέλτα περιστροφής του άξονα Z του καρπού (δηλαδή στροφή ενός κλειδιού) για να ενεργοποιήσετε την περιστροφή τηλεμεταφοράς.
3. Προσδιορίστε εάν χρειάζεται μια πιο λογική χειρονομία ακύρωσης. Το να δείχνεις μακριά από το navmesh θα μπορούσε να λειτουργήσει, αλλά υπάρχει πιο διαισθητικός τρόπος;

Θα ασχοληθούμε με όλα αυτά τα πράγματα και θα λανσάρουμε αυτές τις δυνατότητες στο δεύτερο μέρος αυτής της σειράς, που έχει προγραμματιστεί δοκιμαστικά για τις αρχές Ιουνίου. Αλλά έχω δει αρκετά — είμαι ήδη πεπεισμένος ότι η παρακολούθηση ματιών θα είναι ένα όφελος για το παιχνίδι μας και για τους χωρικούς υπολογιστές γενικά. Είναι πιθανό ότι τα προσεχή προϊόντα Meta θα υιοθετήσουν παρόμοιες εισόδους ενσωματωμένες στο λειτουργικό τους σύστημα. Και πράγματι, transient-pointer Η υποστήριξη βρίσκεται ήδη πίσω από μια σημαία δυνατότητας στο πρόγραμμα περιήγησης Quest 3, αν και μια υλοποίηση χωρίς πραγματική παρακολούθηση ματιών.

Κατά την άποψή μου, και οι δύο εταιρείες πρέπει να είναι πιο φιλελεύθερες στο να επιτρέπουν στους χρήστες να χορηγούν άδειες για να παρέχουν πλήρη πρόσβαση στην κάμερα και δεδομένα βλέμματος σε αξιόπιστους προγραμματιστές. Αλλά ακόμη και τώρα, στο σωστό πλαίσιο, αυτή η εισαγωγή είναι ήδη απίστευτα χρήσιμη, φυσική και ακόμη και μαγική. Οι προγραμματιστές θα ήταν φρόνιμο να αρχίσουν να πειραματίζονται με αυτό αμέσως.

Κώδικας:

transient-pointer-manager.js

GitHub Gist: κοινοποιήστε άμεσα κώδικα, σημειώσεις και αποσπάσματα.