צופה תמונות 360° למובייל: SceneKit, Filament, טעינה באריחים

פיתוח מציג תמונות 360° למובייל

החברה שלנו: 7+ שנים בפיתוח מובייל, 30+ פרויקטי 360°, 5+ שנים בשוק.

מהן המגבלות של UIImageView לתמונות 360°?

UIImageView מציג תמונה שטוחה. להקרנה כדורית (spherical projection) יש צורך בעיבוד תלת-ממדי: כדור עם נורמלים הפוכים (לצפייה מבפנים), טקסטורה אקווירקטנגולרית עליו, מצלמה במרכז, ובקרת סיבוב באמצעות גירוסקופ או מגע.

אנו מפתחים פתרונות מותאמים אישית לצפייה בתמונות 360° במפתח מלא. עבור מציג תמונות 360° למובייל, אנו מיישמים מציג 360 מעלות מותאם אישית ל-iOS באמצעות SceneKit 360 פנורמה, ולמציג 360 לאנדרואיד אנו משתמשים ב-Filament. הקרנה אקווירקטנגולרית זו דורשת טעינה באריחים (tiled loading) וניתוח מטא-דאטה של XMP. לצוות שלנו יש מעל 7 שנות ניסיון בפיתוח מובייל ויותר מ-30 פרויקטים מיושמים עם פנורמות. מהנדסים מוסמכים מבטיחים פעילות יציבה במגוון רחב של מכשירים. חיסכון בתקציב בהשוואה לפיתוח פנימי יכול להגיע עד 50% (חיסכון אופייני בעלויות: 40–60%). עלות התחלתית של פתרון בסיסי — מ-$1,500. צרו קשר — נעריך את הפרויקט שלכם ונציע את הפתרון האופטימלי.

כיצד ליישם בקרת צפייה חלקה?

בקרה באמצעות גירוסקופ — CMMotionManager → זוויות אוילר → SCNNode.rotation. באמצעות מגע — UIPanGestureRecognizer עם זווית סיבוב מצטברת. אינרציה בהחלקה מיושמת באמצעות SCNAction עם האטה (easeOut), לא פיזיקה — פיזיקת SceneKit מוסיפה שיכוך בלתי צפוי. אנו גם מיישמים mipmapping וסינון אנאיזוטרופי לשמירת איכות טקסטורה בזוויות אלכסוניות.

let sceneView = SCNView(frame: view.bounds)
let scene = SCNScene()

// Сфера с инвертированными нормалями
let sphere = SCNSphere(radius: 10.0)
sphere.segmentCount = 96 // больше сегментов = меньше distortion на полюсах

let material = SCNMaterial()
material.isDoubleSided = true
material.diffuse.contents = UIImage(named: "pano.jpg")
sphere.materials = [material]

let sphereNode = SCNNode(geometry: sphere)
sphereNode.scale = SCNVector3(-1, 1, 1) // инверсия нормалей
scene.rootNode.addChildNode(sphereNode)

let camera = SCNCamera()
camera.fieldOfView = 90
let cameraNode = SCNNode()
cameraNode.camera = camera
scene.rootNode.addChildNode(cameraNode)

sceneView.scene = scene

מדוע טעינה באריחים חשובה לתמונות פנורמה גדולות?

JPEG של 50 מגה-פיקסל לאחר פענוח ל-RGB תופס כ-150 MB בזיכרון. באייפון SE דור 2 עם 3 GB RAM זה כבר שליש מהזיכרון הזמין — עם תהליכי רקע מקבלים let sceneView = SCNView(frame: view.bounds) let scene = SCNScene() // Сфера с инвертированными нормалями let sphere = SCNSphere(radius: 10.0) sphere.segmentCount = 96 // больше сегментов = меньше distortion на полюсах let material = SCNMaterial() material.isDoubleSided = true material.diffuse.contents = UIImage(named: "pano.jpg") sphere.materials = [material] let sphereNode = SCNNode(geometry: sphere) sphereNode.scale = SCNVector3(-1, 1, 1) // инверсия нормалей scene.rootNode.addChildNode(sphereNode) let camera = SCNCamera() camera.fieldOfView = 90 let cameraNode = SCNNode() cameraNode.camera = camera scene.rootNode.addChildNode(cameraNode) sceneView.scene = scene עקב לחץ זיכרון. הפתרון הוא טעינה באריחים באמצעות SIGKILL או הקטנת גודל לפני העברה ל-SceneKit. זה מפחית את צריכת הזיכרון ביותר מפי 10 בהשוואה לטעינה מלאה. אנו גם משתמשים ב-texture atlasing להפחתת עומס GPU נוספת. טעינה באריחים קריטית ליציבות ומונעת קריסות יקרות. פרויקט טיפוסי מחזיר את עצמו תוך 3–6 חודשים בזכות מעורבות משתמשים מוגברת, חוסך עד 50% בהשוואה לפיתוח מאפס. המחיר ההתחלתי למציג בסיסי הוא $1,500; יישום מלא חוצה-פלטפורמות עולה בדרך כלל בין $3,000 ל-$5,000.

// Прогрессивная загрузка: сначала превью 2048px, потом полное разрешение
let thumbnail = image.preparingThumbnail(of: CGSize(width: 4096, height: 2048))
material.diffuse.contents = thumbnail
// Асинхронно загружаем полное разрешение
Task.detached(priority: .background) {
    let full = await loadFullResImage(url: imageURL)
    await MainActor.run {
        material.diffuse.contents = full
    }
}

CATiledLayer — API אסינכרוני (iOS 15+), מפענח ב-thread רקע ללא חסימת לולאת הריצה הראשית.

עיבוד מטא-דאטה XMP של Google Photo Sphere

מצלמות פנורמה ו-Google Street View כותבות מטא-דאטה XMP לתוך JPEG עם סוג הקרנה ומידע על חיתוך (// Прогрессивная загрузка: сначала превью 2048px, потом полное разрешение let thumbnail = image.preparingThumbnail(of: CGSize(width: 4096, height: 2048)) material.diffuse.contents = thumbnail // Асинхронно загружаем полное разрешение Task.detached(priority: .background) { let full = await loadFullResImage(url: imageURL) await MainActor.run { material.diffuse.contents = full } } , preparingThumbnail(of:)). ללא קריאתם, פנורמה לא מלאה (270° במקום 360°) תוצג כמלאה — עם קצוות מתוחים. אנו קוראים באמצעות GPano:ProjectionType → מטא-דאטה XMP → מנתחים שדות GPano:CroppedAreaImageWidthPixels, ומתקנים מיפוי UV של הטקסטורה. זה 30–50 שורות קוד, אבל בלעדיו שליש מהפנורמות האמיתיות נראות שגויות.

עיבוד באנדרואיד: Filament לעומת OpenGL ES

באנדרואיד אנו משתמשים ב-Filament (מנוע העיבוד הפיזיקלי של גוגל) או ב-CGImageSourceCopyPropertiesAtIndex באמצעות GPano:*. Filament דורש הגדרה רבה יותר אך מספק תיקון טון (tone mapping) נכון לפנורמות HDR, ומעבד HDR פי 2 מהר יותר מ-OpenGL ES. הוא גם תומך ב-GPU instancing לכדורים מרובים. OpenGL ES 3.0 הוא אפשרות קלה יותר המתאימה למכשירים ישנים, אם כי דורש שילובי shader ידניים. עבור JPEG רגיל, ההבדל זניח.

השוואת טכנולוגיות ל-iOS ואנדרואיד

השוואת שיטות טעינת זיכרון

תוצרים

• עיצוב ארכיטקטורה ובחירת הכלי האופטימלי (SceneKit/Filament).
• אינטגרציה של בקרת גירוסקופ ומגע עם אינרציה.
• טעינה באריחים של תמונות גדולות עם תצוגה פרוגרסיבית.
• ניתוח מטא-דאטה XMP ותיקון מיפוי UV.
• בדיקות על 5+ מכשירים אמיתיים (כולל iPhone SE, Pixel 6, Samsung Galaxy).
• תיעוד קוד, מדריך אינטגרציה, גישה לריפוזיטורי.
• 30 ימי תמיכה חינם לאחר המסירה.
• סשן העברת ידע לצוות שלכם.

לוח זמנים ועלות

מציג בסיסי (iOS, SceneKit, גירוסקופ + מגע): 1–1.5 שבועות. יישום מלא עם טעינה באריחים, מטא-דאטה XMP, iOS + אנדרואיד: 3–4 שבועות. החל מ-$1,500 לבסיסי, $3,000–$5,000 למלא. הצוות שלנו: 7+ שנות פיתוח מובייל, 30+ פרויקטי 360°, 5+ שנים בשוק. בקשו ייעוץ — נכין הצעה מסחרית תוך יום עסקים אחד.

אינטגרציה שלב-אחר-שלב של מציג ה-360°

1. ייבאו את framework של SceneKit (iOS) או חברו את Filament (אנדרואיד).
2. צרו כדור תלת-ממדי עם רדיוס 10 ונורמלים הפוכים (scale = -1).
3. הגדירו מצלמה במרכז הסצנה עם שדה ראייה של 90°.
4. טענו את תמונת הטקסטורה באמצעות טעינה פרוגרסיבית (תצוגה מקדימה → מלאה).
5. יישמו בקרה: גירוסקופ (CMMotionManager) ומגע (UIPanGestureRecognizer עם אינרציה).
6. הוסיפו ניתוח מטא-דאטה XMP לתיקון מיפוי UV לפנורמות לא מלאות.
7. בדקו על מכשירים אמיתיים עם רזולוציות מסך וגדלי RAM שונים.