การใช้ Scene Viewer เพื่อแสดงโมเดล 3 มิติแบบอินเทอร์แอกทีฟใน AR จากแอปหรือเบราว์เซอร์ Android

Scene Viewer เป็นโปรแกรมดูภาพสมจริงที่จะเปิดประสบการณ์ 3 มิติและ AR จากเว็บไซต์หรือแอป Android ซึ่งจะช่วยให้ผู้ใช้อุปกรณ์เคลื่อนที่ Android ดูตัวอย่าง วาง ดู และโต้ตอบกับโมเดล 3 มิติที่โฮสต์บนเว็บในสภาพแวดล้อมของตนได้โดยง่าย

เบราว์เซอร์ Android ส่วนใหญ่รองรับ Scene Viewer พาร์ทเนอร์หลายรายของ Google นำ Scene Viewer ไปใช้งานได้สำเร็จเพื่อรองรับประสบการณ์การใช้งาน 3 มิติและ AR ได้อย่างเสถียร และยังขับเคลื่อนประสบการณ์การใช้งานเหล่านี้ใน Google Search ด้วย

วิธีการใช้งานง่าย

  • การใช้งานบนเว็บต้องการเพียงลิงก์ที่จัดรูปแบบอย่างถูกต้องบนหน้าเว็บเท่านั้น

  • ประสบการณ์การใช้งานบนแอปต้องการการผสานรวมโค้ด Java เพียงไม่กี่บรรทัดเท่านั้น

ข้อกำหนดรันไทม์ของ Scene Viewer

หากต้องการใช้งาน AR ด้วย Scene Viewer ผู้ใช้จะต้องมีสิ่งต่อไปนี้

  • อุปกรณ์ที่รองรับ ARCore ที่ใช้ Android 7.0 Nougat (API ระดับ 24) ขึ้นไป
  • บริการ Google Play สำหรับ AR เวอร์ชันล่าสุด (ล่าสุด) ระบบจะติดตั้งบริการนี้โดยอัตโนมัติและอัปเดตข้อมูลอยู่เสมอในอุปกรณ์ที่รองรับ ARCore ส่วนใหญ่
  • แอป Google เป็นเวอร์ชันล่าสุด แอปนี้ติดตั้งไว้ล่วงหน้าและจะอัปเดตโดยอัตโนมัติในอุปกรณ์ส่วนใหญ่ที่รองรับ ARCore

สำหรับกรณีที่ไม่มีบริการ Google Play สำหรับ AR หรือแอป Google หรือเวอร์ชันที่ติดตั้งเก่าเกินไป คุณสามารถระบุ URL ทางเลือกที่จะเปิดประสบการณ์การใช้งานทางเลือก เช่น หน้าเว็บ ข้อความแสดงข้อผิดพลาด หรือประสบการณ์การใช้งานสำรองที่คุณสร้างขึ้น

Use Case ที่รองรับ

กรณีการใช้งานที่ตั้งใจ แอปพลิเคชันแนะนำ ข้อดี
เปิดมุมมอง AR แบบดั้งเดิมของโมเดล 3 มิติจากปุ่มหรือลิงก์ในเว็บไซต์หรือแอป Android

หากไม่มีบริการ Google Play สำหรับ AR ในอุปกรณ์ ให้ถอยหลังออกอย่างนุ่มนวลเพื่อแสดงโมเดลในโหมด 3 มิติที่ขับเคลื่อนด้วย Scene Viewer
เปิด Scene Viewer โดยใช้ Intent ที่ชัดแจ้งต่อแพ็กเกจ Google Search และเลือกการตั้งค่า mode ที่เหมาะสมสำหรับการแสดงโมเดล 3 มิติ
  • ar_preferred: เริ่มต้นในโปรแกรมดู AR เสมอ และผู้ใช้จะเปลี่ยนไปใช้มุมมอง 3 มิติด้วยตนเองได้ หากไม่มีบริการ Google Play สำหรับ AR จะกลับไปเริ่มมุมมอง 3 มิติ
  • 3d_preferred: เริ่มต้นในมุมมอง 3 มิติเสมอ และผู้ใช้จะเปลี่ยนไปใช้มุมมอง AR ด้วยตนเองได้ หากไม่มีบริการ Google Play สำหรับ AR ผู้ใช้จะสลับออกจากมุมมอง 3 มิติไม่ได้
  • 3d_only: แสดงเฉพาะในมุมมอง 3 มิติเสมอ โดยไม่ให้ผู้ใช้เปลี่ยนไปใช้มุมมอง AR
  • รองรับอุปกรณ์ได้หลากหลายที่สุด
  • กลับไปใช้โหมด 3 มิติดั้งเดิมของ Scene Viewer โดยอัตโนมัติสำหรับกรณีการใช้งานที่ไม่ใช่ AR
เปิดมุมมอง AR แบบดั้งเดิมของโมเดล 3 มิติจากปุ่มหรือลิงก์ในเว็บไซต์หรือแอป Android

หากไม่มีบริการ Google Play สำหรับ AR ในอุปกรณ์ ให้ควบคุมลักษณะการทำงานสำรอง
เปิด Scene Viewer โดยใช้ Intent ที่ชัดแจ้งต่อบริการ Google Play สำหรับ AR (ARCore) แล้วเลือกการตั้งค่า mode ที่เหมาะสมสำหรับการแสดงโมเดล 3 มิติ
  • ar_preferred: เริ่มต้นในโปรแกรมดู AR เสมอ และผู้ใช้จะเปลี่ยนไปใช้มุมมอง 3 มิติด้วยตนเองได้ หากไม่มีบริการ Google Play สำหรับ AR โปรแกรมดูภาพทิวทัศน์จะกลับไปใช้ลักษณะการทำงานที่คุณกำหนดค่าไว้
  • ar_only: แสดงทุกครั้งในมุมมอง AR เท่านั้นและเปลี่ยนเป็นมุมมอง 3 มิติไม่ได้ หากไม่มีบริการ Google Play สำหรับ AR ให้กลับไปใช้ลักษณะการทำงานที่คุณกำหนดค่าไว้ เช่น คุณอาจเปิดประสบการณ์ 3 มิติแบบเต็มหน้าจอหรือแสดงข้อความแสดงข้อผิดพลาดที่เข้าใจง่ายซึ่งระบุว่าอุปกรณ์ของผู้ใช้ยังไม่รองรับความสามารถ AR
ใช้โปรแกรมดูโมเดล 3 มิติของคุณเองหรือระบุการตอบกลับแบบอื่นที่คุณออกแบบเองสำหรับ Use Case ที่ไม่ใช้ AR
โฮสต์มุมมองแทรกของโมเดล 3 มิติในเว็บไซต์และอนุญาตให้ผู้ใช้เข้าสู่โหมด AR แบบเต็มหน้าจอด้วยตนเอง ใช้ <model-viewer> หรือโปรแกรมดู 3 มิติแบบเว็บอื่นๆ เพื่อเปิด Scene Viewer ซึ่งจะแสดงโมเดล 3 มิติในระบบ AR
  • เปิด Scene Viewer ในตัวของ AR จากโมเดล 3 มิติที่ฝังอยู่ในหน้าเว็บโดยตรง
  • มอบประสบการณ์แบบ 3 มิติให้แก่ผู้ใช้บนพื้นผิวที่คุณเป็นเจ้าของและเป็นผู้ควบคุม พร้อมตัวเลือกในการค่อยๆ เปลี่ยนผู้ใช้ไปใช้ประสบการณ์ AR ที่สมจริงมากขึ้นเมื่อคุณเข้าใจความตั้งใจของผู้ใช้

เปิด Scene Viewer โดยใช้ Intent ที่ชัดแจ้ง (3D หรือ AR)

หากต้องการรองรับอุปกรณ์ Android ที่หลากหลายที่สุด ให้ใช้เจตนาของ Android อย่างชัดแจ้งในการเปิด Scene Viewer ระบบอาจทริกเกอร์ Intent ที่ชัดแจ้งจากหน้า HTML หรือแอป Android ที่มาพร้อมเครื่องได้ โดยแอป Google ซึ่งจะติดตั้ง Intent ไว้ล่วงหน้าในอุปกรณ์ Android ที่รองรับ ARCore

คุณสามารถวางโมเดล 3 มิติแบบอินเทอร์แอกทีฟในสภาพแวดล้อมของผู้ใช้หรือกลับไปแสดงในมุมมอง 3 มิติได้ ทั้งนี้ขึ้นอยู่กับพารามิเตอร์ Intent ที่กำหนดค่าไว้และความสามารถของอุปกรณ์

  • หากมีบริการ Google Play สำหรับ AR ในอุปกรณ์และอัปเดตแล้ว โปรแกรมดูภาพทิวทัศน์จะแสดงโมเดลในมุมมองเนทีฟ AR หรือมุมมอง 3 มิติ

  • หากไม่มีบริการ Google Play สำหรับ AR หรือไม่เป็นปัจจุบัน หรือไม่อัปเดต Scene Viewer จะกลับไปแสดงโมเดลในมุมมอง 3 มิติได้อย่างสวยงาม

  • หากไม่สามารถแสดงโมเดล 3 มิติเนื่องจากไม่ได้ติดตั้งแอป Google ไว้หรือเป็นเวอร์ชันเก่า ระบบจะใช้พารามิเตอร์ S.browser_fallback_url เพื่อแสดงหน้าเว็บสำรองแทน

เปิด Scene Viewer จาก HTML หรือ Java

HTML

หากต้องการทริกเกอร์ Intent อย่างชัดแจ้งจาก HTML ให้ใช้ไวยากรณ์ต่อไปนี้

<a href="intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;">Avocado</a>

Java

หากต้องการทริกเกอร์ Intent ที่ชัดแจ้งจาก Java ให้ใช้โค้ดต่อไปนี้

Intent sceneViewerIntent = new Intent(Intent.ACTION_VIEW);
sceneViewerIntent.setData(Uri.parse("https://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf"));
sceneViewerIntent.setPackage("com.google.android.googlequicksearchbox");
startActivity(sceneViewerIntent);

การกำหนดเวอร์ชัน Intent

เวอร์ชัน Intent จะระบุด้วยหมายเลขเวอร์ชันหลัง arvr.google.com/scene-viewer เช่น รุ่นแรกที่ใช้เวอร์ชัน 1.0 เมื่อต้องใช้ฟีเจอร์ Scene Viewer เวอร์ชันใหม่ คุณอาจเปิดตัว Scene Viewer ด้วยเวอร์ชันความตั้งใจที่สูงขึ้นซึ่งสอดคล้องกับฟีเจอร์ที่ต้องการ

Intent เวอร์ชัน 1.1 เพิ่มการรองรับลิงก์ intent:// ซึ่งสามารถเปิดในแอป Android ได้โดยตรงแทนที่จะเป็น URL หากต้องการให้ Scene Viewer รับประกันว่าฟังก์ชันนี้จะใช้งานได้เมื่อเปิดตัวแล้ว แต่เปิดใช้ไม่ได้ ให้เปิดโปรแกรมดูฉากโดยมีจุดประสงค์ที่จะ intent://arvr.google.com/scene-viewer/1.1

พารามิเตอร์ Intent ที่รองรับ

ระบบรองรับพารามิเตอร์ต่อไปนี้สำหรับ Intent ที่ชัดแจ้งต่อแพ็กเกจ Google Search

พารามิเตอร์ Intent ค่าที่อนุญาต ความคิดเห็น
file (ต้องระบุ) URL ที่ถูกต้อง URL นี้ระบุไฟล์ glTF หรือ glb ที่ควรโหลดลงใน Scene Viewer ซึ่งควรเป็นอักขระหลีกกับ URL
S.browser_fallback_url (ต้องระบุสำหรับ Intent ที่ใช้ HTML) URL ที่ถูกต้อง นี่คือคุณลักษณะของ Google Chrome ที่สนับสนุนสำหรับการใช้งานบนเว็บเท่านั้น หากไม่มีแอป Google ในอุปกรณ์ URL นี้จะเป็น URL ที่ Google Chrome จะนำไป
mode (ไม่บังคับ) 3d_preferred (ค่าเริ่มต้น) โปรแกรมดูทิวทัศน์จะแสดงโมเดลในโหมด 3 มิติด้วยปุ่มดูในพื้นที่ทำงานของคุณ



หากไม่มีบริการ Google Play สำหรับ AR ในอุปกรณ์ ระบบจะซ่อนปุ่มดูในพื้นที่ทำงานของคุณ

3d_only โปรแกรมดูภาพบรรยากาศเปิดขึ้นพร้อมโมเดลที่แสดงในโหมด 3 มิติ แม้ว่าจะมีบริการ Google Play สำหรับ AR อยู่ในอุปกรณ์ก็ตาม ระบบจะไม่แสดงปุ่มดูในพื้นที่ทำงานของคุณ

ar_preferred เปิด Scene Viewer ในโหมดดั้งเดิมของ AR เป็นโหมดการป้อน ผู้ใช้จะมีตัวเลือกในการสลับระหว่างโหมด AR และโหมด 3 มิติด้วยปุ่มดูในพื้นที่ทำงานของคุณและปุ่มดูแบบ 3 มิติ



หากไม่มีบริการ Google Play สำหรับ AR โปรแกรมดูภาพทิวทัศน์จะกลับไปเป็นโหมด 3 มิติเมื่ออยู่ในโหมดเข้า

ar_only เมื่อใช้ค่านี้ คุณควรเปิดผ่าน Intent ของ Android ที่อาจไม่เหมาะสมไปยัง com.google.ar.core

หมายเหตุ: อย่าใช้โหมด ar_only เมื่อเปิดผ่าน Intent ของ Android ที่อาจไม่เหมาะสม ไปยังแอป Google

link (ไม่บังคับ) URL ที่ถูกต้อง URL สำหรับหน้าเว็บภายนอก หากมี ปุ่มจะปรากฏใน UI ที่ Intent ไปยัง URL นี้เมื่อคลิก

title (ไม่บังคับ) สตริงถูกต้อง ชื่อสำหรับโมเดล หากมี ข้อมูลดังกล่าวจะแสดงใน UI ระบบจะตัดจุดไข่ปลาให้สั้นลงหากเกิน 60 อักขระ

เสียง (ไม่บังคับ) URL ที่ถูกต้อง URL ไปยังแทร็กเสียงวนซ้ำที่ซิงค์กับภาพเคลื่อนไหวแรกที่ฝังในไฟล์ glTF ซึ่งควรระบุไว้ข้าง glTF มีภาพเคลื่อนไหวที่มีความยาวตรงกัน หากมี เสียงจะวนซ้ำ หลังจากที่โหลดโมเดลแล้ว ซึ่งควรเป็นอักขระหลีกกับ URL
resizable (ไม่บังคับ) true (ค่าเริ่มต้น)

false

เมื่อตั้งค่าเป็น false ผู้ใช้จะปรับขนาดโมเดลในประสบการณ์การใช้งาน AR ไม่ได้ การปรับขนาดทำงานได้ตามปกติในประสบการณ์การใช้งานแบบ 3 มิติ
enable_vertical_placement (ไม่บังคับ) false (ค่าเริ่มต้น)

true

เมื่อตั้งค่าเป็น true ผู้ใช้จะวางโมเดลบนพื้นผิวแนวตั้งได้

คําแนะนําเกี่ยวกับ UX

เพื่อให้ผู้ใช้ได้รับ UX ที่ดีที่สุด เราขอแนะนำให้แสดงคำกระตุ้นให้ดำเนินการ (Call-To-Action) ที่มองเห็นได้ว่าผู้ใช้กำลังจะเข้าสู่สภาพแวดล้อมที่สมจริง

สำหรับประสบการณ์การใช้งานมุมมอง 3 มิติ เราขอแนะนําให้ใช้คำกระตุ้นให้ดำเนินการ (Call-To-Action) ที่มีป้ายกำกับดูแบบ 3 มิติ ซึ่งดูเหมือนรูปภาพต่อไปนี้

เปิด Scene Viewer โดยใช้ Intent ที่ชัดแจ้งต่อบริการ Google Play สำหรับ AR (โหมด AR เท่านั้น)

โหมด AR ใน Scene Viewer ขับเคลื่อนโดยบริการ Google Play สำหรับ AR

เพื่อให้แน่ใจว่า AR จะพร้อมใช้งานใน Scene Viewer คุณสามารถใช้เจตนาของ Android ที่อาจไม่เหมาะสมจากเว็บไซต์หรือแอป Android ที่มาพร้อมเครื่องเพื่อเปิด Scene Viewer ผ่าน com.google.ar.core package และระบุ browser_fallback_url วิธีนี้จะทำให้ผู้ใช้ทุกคนได้รับประสบการณ์การใช้งาน AR แบบดั้งเดิมผ่าน Scene Viewer หรือประสบการณ์การใช้งานสำรองที่คุณสร้างขึ้น ตัวอย่างเช่น คุณอาจสร้างประสบการณ์การใช้งานสำรอง เช่น มุมมอง 3 มิติของคุณเอง หรือข้อความแสดงข้อผิดพลาดที่สวยงาม

หากต้องการทริกเกอร์ Intent อย่างชัดแจ้งจาก HTML ให้ใช้ไวยากรณ์ต่อไปนี้

<a href="intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf&mode=ar_only#Intent;scheme=https;package=com.google.ar.core;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;">Avocado</a>;

หากต้องการทริกเกอร์ Intent ที่ชัดแจ้งจาก Java ให้ใช้โค้ดต่อไปนี้

Intent sceneViewerIntent = new Intent(Intent.ACTION_VIEW);
Uri intentUri =
    Uri.parse("https://arvr.google.com/scene-viewer/1.0").buildUpon()
    .appendQueryParameter("file", "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf")
    .appendQueryParameter("mode", "ar_only")
    .build();
sceneViewerIntent.setData(intentUri);
sceneViewerIntent.setPackage("com.google.ar.core");
startActivity(sceneViewerIntent);

พารามิเตอร์ Intent ที่รองรับ

ระบบรองรับพารามิเตอร์ต่อไปนี้สำหรับ Intent ที่ชัดแจ้งต่อแพ็กเกจบริการ Google Play สำหรับ AR

พารามิเตอร์ Intent ค่าที่อนุญาต ความคิดเห็น
browser_fallback_url (ต้องระบุสำหรับ Intent ที่ใช้ HTML) URL ที่ถูกต้อง วิธีนี้รองรับเฉพาะการติดตั้งใช้งานบนเว็บเท่านั้น เมื่อไม่มีบริการ Google Play สำหรับ AR ในอุปกรณ์หรือไม่ใช่เวอร์ชันล่าสุด URL นี้จะเป็น URL ที่นำทางไป
mode (ไม่บังคับ) ar_only โปรแกรมดูภาพบรรยากาศจะเปิดใช้โมเดล 3 มิติเสมอในมุมมอง AR ดั้งเดิมและซ่อน UI เมื่อเปลี่ยนไปใช้มุมมอง 3 มิติของ Scene Viewer

หากไม่มีบริการ Google Play สำหรับ AR โปรแกรม Scene Viewer จะเปิด URL ที่คุณตั้งค่าไว้ใน browser_fallback_url สำหรับประสบการณ์บนเว็บ สำหรับประสบการณ์การใช้งานในแอป Scene Viewer จะกลับไปเป็นประสบการณ์การใช้งานอื่น เช่น ข้อความแสดงข้อผิดพลาดหรือประสบการณ์อื่นที่คุณสร้างขึ้นเอง

ar_preferred เปิด Scene Viewer ในโหมดเนทีฟ AR เป็นโหมดเข้าและมอบตัวเลือกให้ผู้ใช้สลับระหว่างโหมด AR และ 3 มิติผ่านปุ่มดูในพื้นที่ของคุณและปุ่มดูแบบ 3 มิติ

หากไม่มีบริการ Google Play สำหรับ AR โปรแกรม Scene Viewer จะเปิด URL ที่คุณตั้งค่าไว้ใน browser_fallback_url สำหรับประสบการณ์บนเว็บ สำหรับประสบการณ์การใช้งานในแอป Scene Viewer จะกลับไปเป็นประสบการณ์การใช้งานอื่น เช่น ข้อความแสดงข้อผิดพลาดหรือประสบการณ์อื่นที่คุณสร้างขึ้นเอง

   

link (ไม่บังคับ) URL ที่ถูกต้อง URL สำหรับหน้าเว็บภายนอก หากมี ปุ่มจะปรากฏใน UI ที่ Intent ไปยัง URL นี้เมื่อคลิก



เวอร์ชัน 1.1 เพิ่มการรองรับลิงก์ Intent:// ใน Scene Viewer เพื่ออนุญาตให้ปุ่มเข้าชมของ Scene Viewer ทริกเกอร์ไปยังแอปอื่นๆ ได้โดยตรง โปรดทราบว่าควรใช้อย่างระมัดระวังและควรระบุเฉพาะเมื่อตัวแฮนเดิล Intent จะปรากฏสำหรับ Intent ที่ระบุเท่านั้น
title (ไม่บังคับ) สตริงถูกต้อง ชื่อสำหรับโมเดล หากมี ข้อมูลดังกล่าวจะแสดงใน UI ระบบจะตัดจุดไข่ปลาให้สั้นลงหากเกิน 60 อักขระ



เวอร์ชัน 1.1 เพิ่มการรองรับการจัดรูปแบบ HTML ของเนื้อหาชื่อโดยมี จำนวนข้อความที่อนุญาต โปรดทราบว่าชื่อควรเป็นอักขระหลีกกับ URL
sound (ไม่บังคับ) URL ที่ถูกต้อง URL ไปยังแทร็กเสียงวนซ้ำที่ซิงค์กับภาพเคลื่อนไหวแรกที่ฝังอยู่ในไฟล์ glTF ซึ่งควรระบุไว้ข้าง glTF มีภาพเคลื่อนไหวที่มีความยาวตรงกัน หากมี เสียงจะวนซ้ำหลังจากโหลดโมเดลแล้ว
resizable (ไม่บังคับ) true (ค่าเริ่มต้น)

false

เมื่อตั้งค่าเป็น false ผู้ใช้จะปรับขนาดโมเดลในประสบการณ์การใช้งาน AR ไม่ได้ การปรับขนาดทำงานได้ตามปกติในประสบการณ์การใช้งานแบบ 3 มิติ
disable_occlusion (ไม่บังคับ) false (ค่าเริ่มต้น)

true

เมื่อตั้งค่าเป็น true วัตถุที่อยู่ในฉากจะปรากฏหน้าวัตถุในโลกจริงในฉากเสมอ ดูข้อมูลเพิ่มเติมได้ที่[เปิดใช้การบัง](/ar/develop/deeplink#enable_occlusion)

คําแนะนําเกี่ยวกับ UX

เราขอแนะนำให้ทำตามหลักเกณฑ์ต่อไปนี้เพื่อให้ผู้ใช้ได้รับ UX ที่ดีที่สุด

  • สำหรับประสบการณ์ AR คำกระตุ้นให้ดำเนินการที่มองเห็นได้ควรสื่อว่าผู้ใช้กำลังจะเข้าสู่สภาพแวดล้อมที่สมจริง เราขอแนะนำให้คุณใช้คำกระตุ้นให้ดำเนินการ (Call-To-Action) สำหรับดูในพื้นที่ทำงานของคุณ ดังนี้

  • อาจเป็นไปได้ว่าผู้ใช้ไม่มีบริการ Google Play สำหรับ AR ติดตั้งอยู่ในอุปกรณ์ ต่อไปนี้คือวิธีที่ <model-viewer> จัดการโฆษณาสำรอง และคุณสามารถใช้โค้ดดังกล่าวเป็นจุดเริ่มต้นได้

    // Check whether this is an Android device.
    const isAndroid = /android/i.test(navigator.userAgent);
    // This fallback URL is used if the Google app is not installed and up to date.
    const fallbackUrl = 'https://arvr.google.com/scene-viewer?file=https%3A%2F%2Fstorage.googleapis.com%2Far-answers-in-search-models%2Fstatic%2FTiger%2Fmodel.glb&link=https%3A%2F%2Fgoogle.com&title=Tiger';
    
    // This intent URL triggers Scene Viewer on Android and falls back to
    // fallbackUrl if the Google app is not installed and up to date.
    const sceneViewerUrl = 'intent://arvr.google.com/scene-viewer/1.0?file=https://storage.googleapis.com/ar-answers-in-search-models/static/Tiger/model.glb&title=Tiger#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=' +
        fallbackUrl + ';end;';
    
    // Create a link.
    var a = document.createElement('a');
    a.appendChild(document.createTextNode('Tiger'));
    // Set the href to the intent URL on Android and the fallback URL
    // everywhere else.
    a.href = isAndroid ? sceneViewerUrl : fallbackUrl;
    // Add the link to the page.
    document.body.appendChild(a);
    

การใช้ <model-viewer> เพื่อเปิด Scene Viewer

คุณเปิดใช้ Scene Viewer จากเว็บไซต์ได้โดยการรวมคอมโพเนนต์เว็บ <model-viewer> เข้ากับแอตทริบิวต์ ar

<model-viewer ar
              ar-modes="scene-viewer webxr quick-look"
              alt="A 3D model of an astronaut."
              src="Astronaut.gltf"></model-viewer>

เมื่อดูในอุปกรณ์ Android ที่รองรับ ARCore เว็บไซต์ที่มีคอมโพเนนต์ <model-viewer> ที่มีแอตทริบิวต์ ar จะแสดงปุ่มดังที่แสดงในตัวอย่างต่อไปนี้

เมื่อใช้โหมด scene-viewer ใน ar-modes โหมดจะเปลี่ยนเป็นมุมมอง AR ดั้งเดิมและเชิญผู้ใช้ให้วางโมเดลในสภาพแวดล้อมของตนโดยใช้ Scene Viewer

หากไม่มีบริการ Google Play ที่มี AR อยู่ ให้แตะปุ่มนี้จะแสดงโมเดลในมุมมอง 3 มิติของ <model-viewer>

โปรดดูเอกสารสำหรับ <model-viewer> เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีเริ่มต้นใช้งาน <model-viewer>

ข้อกำหนดเกี่ยวกับไฟล์สำหรับโมเดล

Scene Viewer มีการสนับสนุนและข้อจำกัดต่อไปนี้สำหรับโมเดล

การรองรับรูปแบบไฟล์ glTF 2.0/glb โดยใช้ส่วนขยายเหล่านี้
  • KHR_materials_unlit
  • KHR_texture_transform
ภาพเคลื่อนไหว
  • ภาพเคลื่อนไหวแบบโครงกระดูกวนซ้ำ
  • เล่นภาพเคลื่อนไหวแบบวนซ้ำ
  • ภาพเคลื่อนไหวการเปลี่ยนรูปแบบวนซ้ำ
โดยภาพเคลื่อนไหวจะเล่นแบบวนซ้ำ หากไฟล์ glTF มีภาพเคลื่อนไหวหลายรายการ โปรแกรมดูฉากจะเล่นเฉพาะภาพเคลื่อนไหวแรกเท่านั้น
ขีดจำกัดที่แนะนำ ประสิทธิภาพโดยรวมของชิ้นงานขึ้นอยู่กับข้อจำกัดในการตั้งค่าและข้อดีข้อเสียระหว่างจุดยอด วัสดุ ความละเอียดของพื้นผิว ตาข่ายต่อวัสดุ และปัจจัยอื่นๆ ใช้หลักเกณฑ์ต่อไปนี้เพื่อเพิ่มประสิทธิภาพเนื้อหา
  • จำนวนสามเหลี่ยม: ขีดจำกัดที่แนะนำคือสามเหลี่ยม 100,000 รูป แต่การกำหนดเป้าหมายจำนวนต่ำสุดจะยังคงมีประสิทธิภาพสูงในโปรแกรมดูฉาก 30,000 ถึง 50,000 เป็นช่วงที่เหมาะสม
  • จำนวนวัสดุ: วัสดุแนะนำคือ 10 ชิ้น โดย 2 วัสดุอาจเป็นอัลฟ่าได้ กำหนดเป้าหมายเป็นจำนวนต่ำสุดเท่าที่เป็นไปได้เพื่อให้ชิ้นงานมีประสิทธิภาพดีอยู่เสมอ
  • ตาข่ายต่อวัสดุ: 1
  • ความละเอียดพื้นผิวสูงสุด: 2048 × 2048
  • กระดูก (รวมข้อต่อที่ไม่ได้ถ่วงน้ำหนัก): 254 (ขีดจำกัดหนัก)
  • น้ำหนักของกระดูกต่อขีดจำกัดจุดยอดมุม: 4 (ขีดจำกัดหนัก)
  • UV: 1 UV ต่อตาข่าย (ขีดจำกัดสูงสุด)
  • ขนาดโมเดล: 10 MB (รุ่นที่ใหญ่กว่าอาจส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี)
การรองรับเงา โปรแกรมดูภาพทิวทัศน์จะแสดงผลเงาแข็งโดยอัตโนมัติเมื่อวางวัตถุ เราจึงไม่แนะนำให้ใส่เงาลงในโมเดล
การรองรับพื้นผิว
  • รูปแบบ PNG: PNG-24, PNG-8 ที่จัดทำดัชนี
    เราขอแนะนำให้ใช้ JPG เมื่อไม่มีส่วนที่โปร่งใสเนื่องจากลดขนาดลง
  • พื้นที่สี: sRGB
วัสดุ CANNOT TRANSLATE
การโหลดไฟล์ HTTPS
ฉาก
  • แกน: ทำมือขวาโดยมีพร็อพเพอร์ตี้ต่อไปนี้
    • +X คือคำตอบที่ถูกต้อง
    • +Y เพิ่มขึ้น
    • -Z ชี้ไปข้างหน้าจากต้นทาง (กล่าวคือ "ด้านหน้า" ของเนื้อหาควรอยู่ด้าน +Z)
  • มาตราส่วน: 1 หน่วย = 1 เมตร (ตามที่กำหนดโดยข้อกำหนด glTF เพื่อให้แน่ใจว่าโมเดลจะวางใน AR ในสเกลจริง)

การใช้เครื่องมือแสดงตัวอย่างเพื่อตรวจสอบโมเดล 3 มิติ

เพื่อให้มั่นใจว่าไฟล์โมเดล 3 มิติจะแสดงอย่างถูกต้องใน Scene Viewer ให้ใช้เครื่องมือแสดงตัวอย่างแบบออนไลน์เพื่อตรวจสอบไฟล์ในคอมพิวเตอร์ของคุณ

การตรวจสอบโมเดล 3 มิติ

ในการตรวจสอบโมเดล เครื่องมือแสดงตัวอย่างโฆษณาต้องมีไฟล์ glb หรือ glTF 1 ไฟล์ ไฟล์รูปภาพและไฟล์ Bin ที่เกี่ยวข้อง และไฟล์เสียงที่ไม่บังคับ โดยไฟล์เสียงจะวนซ้ำ กับภาพเคลื่อนไหว 0

คุณสามารถเลือกทีละไฟล์ได้ทีละไฟล์ หรือใส่ glb หรือ glTF และไฟล์ที่เกี่ยวข้องลงในไฟล์ ZIP ได้ (วิธีการของไฟล์ ZIP ไม่รองรับไฟล์เสียง)

วิธีตรวจสอบโมเดล 3 มิติ

  1. เปิดเครื่องมือแสดงตัวอย่างโฆษณาออนไลน์ ในเบราว์เซอร์

  2. ใช้วิธีใดวิธีหนึ่งต่อไปนี้เพื่อเพิ่มไฟล์ลงในเครื่องมือแสดงตัวอย่างโฆษณา

    • ลากและวาง เลือกไฟล์ glb หรือ glTF และไฟล์ทั้งหมดที่เกี่ยวข้อง (หรือไฟล์ ZIP ที่มีไฟล์เหล่านี้) และลากไฟล์ที่เลือกหรือไฟล์ ZIP ไปยังเครื่องมือแสดงตัวอย่างโฆษณา

    • จากเครื่องมือแสดงตัวอย่าง ในเครื่องมือตัวแสดงตัวอย่าง ให้เลือกโปรแกรมดูทิวทัศน์ > โหลดไฟล์ เลือกไฟล์ glb หรือ glTF และไฟล์ที่เกี่ยวข้องทั้งหมด (หรือไฟล์ ZIP ที่มีไฟล์เหล่านี้) แล้วคลิกเปิด

หลังจากที่คุณโหลดไฟล์ที่ประกอบด้วยโมเดล 3 มิติลงในเครื่องมือแสดงตัวอย่างแล้ว คอนโซลที่ด้านล่างของเบราว์เซอร์จะแสดงผลลัพธ์รวมทั้งข้อความแสดงข้อผิดพลาด

การเพิ่มโมเดล 3 มิติสำหรับการตรวจสอบ

ในการตรวจสอบโมเดล 3 มิติ ให้เพิ่มไฟล์ที่ประกอบเป็นโมเดล 3 มิติลงใน เครื่องมือแก้ไขโมเดล

ในการตรวจสอบโมเดล ผู้แสดงตัวอย่างต้องมีไฟล์ glb หรือ glTF ของโมเดล ไฟล์รูปภาพและ Bin ที่เกี่ยวข้อง และไฟล์เสียงที่ไม่บังคับ คุณสามารถเลือกทีละไฟล์ หรือเพิ่มไฟล์ ZIP เพียงไฟล์เดียว

เมื่อเพิ่มไฟล์ ZIP ตัวแสดงตัวอย่างจะโหลด glb หรือ glTF แรกที่พบ รวมถึงไฟล์รูปภาพและ Bin ที่เกี่ยวข้องภายในไฟล์ ZIP นั้น

  1. เปิดเครื่องมือแก้ไขโมเดล ในเบราว์เซอร์

  2. ใช้วิธีใดวิธีหนึ่งต่อไปนี้เพื่อเพิ่มไฟล์ลงในเครื่องมือแสดงตัวอย่างโฆษณา

    • หากต้องการลากและวางไฟล์เพื่อตรวจสอบความถูกต้อง ให้เลือกไฟล์ glb หรือ glTF และไฟล์อื่นๆ ที่เกี่ยวข้องหลายรายการ (หรือเลือกไฟล์ ZIP ที่มีไฟล์เหล่านี้) และลากไฟล์ไปยังเครื่องมือแสดงตัวอย่างโฆษณา

    • เลือกไฟล์จากเครื่องมือแสดงตัวอย่างโฆษณา ในเครื่องมือตัวแสดงตัวอย่าง ให้เลือกโปรแกรมดูทิวทัศน์ > โหลดไฟล์ เลือกไฟล์ glb หรือ glTF รวมถึงไฟล์ที่เกี่ยวข้องทั้งหมด (หรือไฟล์ ZIP ที่มีไฟล์เหล่านี้) พร้อมกันหลายรายการ และคลิกเปิด

ข้อผิดพลาดจากการตรวจสอบ

รหัสข้อผิดพลาด ความรุนแรง ข้อความ ค่าที่รองรับในปัจจุบัน
INVALID_INPUT_FILE_EXTENSION ข้อผิดพลาด โปรแกรมตรวจสอบไม่รองรับนามสกุลไฟล์อินพุต [filename] ['.glb', '.gltf']
REC_INPUT_BINARY_SIZE_EXCEEDED คำเตือน อินพุตของผู้ใช้ที่ระบุมีไบนารีเกินขนาดสูงสุดที่ข้อกำหนดจำเพาะของ Scene Viewer แนะนำ ซึ่งก็คือไม่เกิน [size] MB 10
MAX_INPUT_BINARY_SIZE_EXCEEDED ข้อผิดพลาด อินพุตของผู้ใช้ที่ระบุมีไบนารีเกินขนาดสูงสุดที่ข้อกำหนดจำเพาะของ Scene Viewer รองรับ ซึ่งก็คือไม่เกิน [size] MB 15
UNSUPPORTED_GLTF_EXTENSION_USED ข้อผิดพลาด ข้อกำหนดจำเพาะของ Scene Viewer ไม่รองรับส่วนขยาย [ext] ใน glTF ['KHR_materials_pbrSpecularGlossiness', 'KHR_materials_unlit', 'KHR_texture_transform']
ANIMATION_LIMIT_EXCEEDED ข้อผิดพลาด จำนวนภาพเคลื่อนไหวใน glTF มีมากเกินจำนวนจำกัดที่ข้อกำหนดจำเพาะของ Scene Viewer รองรับ ซึ่งรองรับภาพเคลื่อนไหวได้สูงสุด [num] รายการ 1
MORPH_TARGET_USED ข้อผิดพลาด glTF มีเป้าหมาย Morph ซึ่งข้อกำหนดจำเพาะของ Scene Viewer ไม่รองรับ
MATERIAL_LIMIT_EXCEEDED คำเตือน จำนวนเนื้อหาใน glTF มีมากเกินจำนวนจำกัดที่ข้อกำหนดจำเพาะของ Scene Viewer แนะนำ ซึ่งเนื้อหาสูงสุดคือ [num] รายการ 10
TEXTURE_RESOLUTION_LIMIT_EXCEEDED คำเตือน ความละเอียดของรูปภาพที่ดัชนี [idx] ใน glTF มีมากเกินจำนวนจำกัดที่ข้อกำหนดจำเพาะของ Scene Viewer แนะนำ ซึ่งก็คือความละเอียดสูงสุด [res] x [res] 2048 X 2048
UV_LIMIT_EXCEEDED ข้อผิดพลาด จำนวน UV ต่อตาข่ายใน glTF มีมากเกินจำนวนจำกัดที่ข้อกำหนดจำเพาะของ Scene Viewer รองรับ ซึ่งรองรับได้สูงสุด [num] UV ต่อตาข่าย 1
VERTEX_COLOR_USED ข้อผิดพลาด glTF มีสีเวอร์เท็กซ์ ซึ่งข้อกำหนดจำเพาะของ Scene Viewer ไม่รองรับ
JOINT_LIMIT_EXCEEDED ข้อผิดพลาด จำนวนจุดเชื่อมต่อใน glTF มีมากเกินจำนวนจำกัดที่ข้อกำหนดจำเพาะของ Scene Viewer รองรับ ซึ่งรองรับจุดเชื่อมต่อสูงสุด [num] จุด 254
TRIANGLE_LIMIT_EXCEEDED คำเตือน จำนวนสามเหลี่ยมใน glTF มีมากเกินจำนวนจำกัดที่ข้อกำหนดจำเพาะของ Scene Viewer แนะนำ ซึ่งก็คือสามเหลี่ยมสูงสุด [num] รายการ 100,000
PRIMITIVE_MODE_UNSUPPORTED ข้อผิดพลาด ข้อกำหนดจำเพาะของ Scene Viewer ไม่รองรับโหมดดั้งเดิม [mode] {4 : Triangle List, 5 : Triangle Strip, 6 : Triangle Fan}
MISSING_PBR_METALLIC_ROUGHNESS ข้อมูล วัสดุในดัชนี [idx] ไม่มีพร็อพเพอร์ตี้ pbrMetallicRoughness ข้อกำหนดจำเพาะของ Scene Viewer ไม่ได้กำหนดให้ต้องมีพร็อพเพอร์ตี้นี้ หากใช้ปัจจัยแบบโลหะหรือความหยาบผิวแทน หากไม่มีการใช้ทั้ง 2 อย่าง วัสดุจะใช้ค่าเริ่มต้นซึ่งอาจทำให้เกิดลักษณะการทำงานที่ไม่ต้องการ