การใช้ 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 สำรองที่จะเปิดประสบการณ์การใช้งานอื่นได้ เช่น หน้าเว็บ ข้อความแสดงข้อผิดพลาด หรือประสบการณ์การใช้งานสำรองที่คุณสร้างขึ้น

กรณีการใช้งานที่รองรับ

กรณีการใช้งานที่ต้องการ แอปพลิเคชันที่แนะนำ ข้อดี
เปิดมุมมอง 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 Scene Viewer จะกลับไปใช้ลักษณะการทำงานที่คุณกำหนดค่าไว้
  • ar_only: แสดงในโปรแกรมดู AR เท่านั้นเสมอ โดยไม่มี ความสามารถในการเปลี่ยนไปใช้โปรแกรมดู 3 มิติ หากไม่มีบริการ Google Play สำหรับ AR ระบบจะกลับไปใช้ลักษณะการทำงานที่คุณกำหนดค่าไว้ เช่น คุณอาจเปิดตัวประสบการณ์ 3 มิติแบบเต็มหน้าจอของคุณเอง หรือ แสดงข้อความแสดงข้อผิดพลาดที่เป็นมิตรซึ่งระบุว่าอุปกรณ์ของผู้ใช้ยังไม่ รองรับความสามารถของ AR
ใช้โปรแกรมดูโมเดล 3 มิติของคุณเอง หรือระบุการตอบกลับสำรองอื่นที่ออกแบบเองสำหรับกรณีการใช้งานที่ไม่ใช่ AR
โฮสต์มุมมองในบรรทัดของโมเดล 3 มิติในเว็บไซต์ และอนุญาตให้ผู้ใช้ เข้าสู่โหมด AR เนทีฟแบบเต็มหน้าจอด้วยตนเอง ใช้ <model-viewer> หรือโปรแกรมดู 3 มิติบนเว็บอื่นๆ เพื่อเปิดใช้ Scene Viewer ที่แสดงโมเดล 3 มิติใน AR โดยตรง
  • เปิดใช้ Scene Viewer ใน AR โดยตรงจากโมเดล 3 มิติที่ฝังอยู่ในหน้าเว็บ
  • มอบประสบการณ์ 3 มิติแก่ผู้ใช้บนแพลตฟอร์มที่คุณเป็นเจ้าของและควบคุม โดยมี ตัวเลือกในการเปลี่ยนผู้ใช้ไปสู่ประสบการณ์ AR ที่สมจริงยิ่งขึ้นอย่างค่อยเป็นค่อยไป เมื่อคุณเข้าใจความตั้งใจของผู้ใช้ที่จะทำเช่นนั้น

เปิด Scene Viewer โดยใช้ Intent แบบเจาะจงปลายทาง (3D หรือ AR)

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

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

  • หากอุปกรณ์มีบริการ Google Play สำหรับ AR และเป็นเวอร์ชันล่าสุด Scene Viewer จะแสดงโมเดลในมุมมอง 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 รับประกันว่าฟังก์ชันนี้จะพร้อมใช้งานเมื่อเปิดตัว และไม่ เปิดตัวในกรณีอื่นๆ ให้เปิด Scene Viewer ด้วย Intent ไปยัง intent://arvr.google.com/scene-viewer/1.1

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

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

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



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

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

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



หากไม่มีบริการ Google Play สำหรับ AR Scene Viewer จะกลับไปใช้โหมด 3 มิติเป็นโหมดเริ่มต้น

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

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

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

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

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

false

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

true

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

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

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

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

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

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

หากต้องการให้ AR พร้อมใช้งานใน Scene Viewer คุณสามารถใช้ Intent ของ 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

พารามิเตอร์ความตั้งใจ ค่าที่อนุญาต ความคิดเห็น
browser_fallback_url (ต้องระบุสำหรับ Intent ที่อิงตาม HTML) URL ที่ถูกต้อง ซึ่งรองรับเฉพาะการติดตั้งใช้งานบนเว็บ เมื่อไม่มีบริการ Google Play สำหรับ AR ในอุปกรณ์หรือบริการไม่ใช่เวอร์ชันล่าสุด URL นี้คือ URL ที่ระบบจะนำทางไป
mode (ไม่บังคับ) ar_only Scene Viewer จะเปิดโมเดล 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 ที่ตั้งใจจะไปยัง 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/depth#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ไฟล์ มีภาพเคลื่อนไหวหลายรายการ Scene Viewer จะเล่นเฉพาะภาพเคลื่อนไหวแรก
ขีดจำกัดที่แนะนำ ประสิทธิภาพโดยรวมของชิ้นงานขึ้นอยู่กับการตั้งค่าข้อจํากัดและ การประนีประนอมระหว่างจุดยอด วัสดุ ความละเอียดของพื้นผิว ตาข่ายต่อ วัสดุ และปัจจัยอื่นๆ ใช้หลักเกณฑ์ต่อไปนี้เพื่อเพิ่มประสิทธิภาพชิ้นงาน
  • จำนวนสามเหลี่ยม: ขีดจำกัดที่แนะนำคือ 100,000 สามเหลี่ยม แต่การกำหนดเป้าหมายที่จำนวนต่ำสุดจะช่วยรักษาประสิทธิภาพสูงใน Scene Viewer 30,000 ถึง 50,000 ถือเป็นช่วงที่เหมาะสม
  • จำนวนวัสดุ: ขีดจำกัดที่แนะนำคือ 10 วัสดุ โดย 2 วัสดุ สามารถเป็นอัลฟ่าได้ กำหนดเป้าหมายเป็นจำนวนต่ำที่สุดเท่าที่จะเป็นไปได้เพื่อให้ชิ้นงานทำงานได้ดี
  • Mesh ต่อวัสดุ: 1
  • ความละเอียดสูงสุดของพื้นผิว: 2048 × 2048
  • กระดูก (รวมถึงข้อต่อที่ไม่มีน้ำหนัก): 254 (ขีดจำกัดสูงสุด)
  • ขีดจำกัดน้ำหนักกระดูกต่อจุดยอด: 4 (ขีดจำกัดแบบฮาร์ดโค้ด)
  • UV: 1 UV ต่อตาข่าย (ขีดจำกัดที่แน่นอน)
  • ขนาดโมเดล: 10 MB (โมเดลที่ใหญ่กว่านี้อาจส่งผลให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่ดี)
การสนับสนุน Shadow Scene Viewer จะแสดงเงาที่ชัดเจนโดยอัตโนมัติเมื่อวางออบเจ็กต์ ดังนั้นเราจึงไม่แนะนำให้ฝังเงาลงในโมเดล
การรองรับพื้นผิว
  • รูปแบบ PNG: PNG-24, PNG-8 ที่จัดทำดัชนี
    เราขอแนะนำให้ใช้ JPG เมื่อไม่มีความโปร่งใสเนื่องจากจะช่วยลดขนาดได้
  • พื้นที่สี: sRGB
วัสดุ PBR
การโหลดไฟล์ 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 ไปยังเครื่องมือแสดงตัวอย่าง

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

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

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

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

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

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

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

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

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

    • เลือกไฟล์จากเครื่องมือแสดงตัวอย่าง ในเครื่องมือแสดงตัวอย่าง ให้เลือก Scene Viewer > โหลดไฟล์ เลือกไฟล์ 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 : รายการสามเหลี่ยม, 5 : แถบสามเหลี่ยม, 6 : พัดลมสามเหลี่ยม}
MISSING_PBR_METALLIC_ROUGHNESS ข้อมูล วัสดุในดัชนี [idx] ไม่มีพร็อพเพอร์ตี้ pbrMetallicRoughness ข้อกำหนดจำเพาะของ Scene Viewer ไม่ได้กำหนดให้ต้องมีพร็อพเพอร์ตี้นี้ หากใช้ปัจจัยแบบโลหะ และความหยาบผิวแทน หากไม่ได้ใช้ทั้งสองปัจจัย วัสดุจะใช้ค่าเริ่มต้นซึ่งอาจทำให้เกิดลักษณะการทำงานที่ไม่ต้องการ