เครื่องมือและการเปรียบเทียบ · 2026-06-03 · 9 นาที

วิธีแสดงไฟล์ IFC ในเบราว์เซอร์ด้วย three.js, web-ifc และ Fragments

การโหลดไฟล์ IFC เข้าฉาก three.js ฟังดูง่าย จนกระทั่งโมเดลขนาด 200 MB ตัวแรกทำให้แท็บค้างไปสองนาที เคล็ดลับที่ไลบรารีเหล่านี้สอนคือ อย่าแยกวิเคราะห์ (parse) IFC ขณะรันไทม์ บทความนี้อธิบายว่า web-ifc, Fragments และไปป์ไลน์แบบแปลงครั้งเดียวทำงานร่วมกันอย่างไรในทางปฏิบัติ

วิธีแสดงไฟล์ IFC ในเบราว์เซอร์ด้วย three.js, web-ifc และ Fragments — IFC Viewer Online article cover

การเรนเดอร์ IFC บนเว็บเป็นโจทย์ที่มีคำตอบแล้ว แต่เฉพาะเมื่อคุณทำตามรูปแบบที่ไลบรารีถูกออกแบบมาเท่านั้น นักพัฒนาที่ลองวิธีแบบตรงไปตรงมา (โหลดไฟล์ .ifc แยกวิเคราะห์ สร้างเมช ทุกครั้ง) จะติดปัญหาตั้งแต่โมเดลจริงตัวแรก แท็บค้างไปหนึ่งนาทีหรือนานกว่านั้นขณะที่ WebAssembly ประมวลผลไฟล์ วิธีแก้ไม่ใช่ตัวแยกวิเคราะห์ (parser) ที่เร็วขึ้น แต่คือการแยกวิเคราะห์เพียงครั้งเดียวแล้วไม่ต้องทำอีกเลย

ชุดเครื่องมือที่ใช้ (Stack)

web-ifc

แกนหลัก WebAssembly (จาก That Open) ที่อ่านและเขียน IFC ได้เร็วใกล้เคียงโค้ดเนทีฟในเบราว์เซอร์หรือ Node เป็นรากฐานของทุกส่วนที่เหลือ

Fragments

รูปแบบเรขาคณิตที่ปรับให้เหมาะสมแล้วของ That Open คุณแปลง IFC → Fragments เพียงครั้งเดียว หลังจากนั้นการโหลดไฟล์ .frag จะเร็วกว่าการแยกวิเคราะห์ IFC ใหม่อย่างมาก

three.js

ตัวเรนเดอร์ WebGL ที่วาดฉาก Fragments สร้างเรขาคณิตที่เข้ากันได้กับ three.js ซึ่งคุณเพิ่มเข้าไปในฉากพร้อมกล้องและตัวควบคุมได้เหมือนเมชทั่วไป

วิธีแบบตรงไปตรงมา (และเหตุที่มันสร้างปัญหา)

import * as WebIFC from "web-ifc";

const api = new WebIFC.IfcAPI();
await api.Init();

// Parsing the raw IFC at runtime — fine for tiny files, painful for real ones
const data = new Uint8Array(await file.arrayBuffer());
const modelID = api.OpenModel(data);
// ...extract geometry, build meshes... (slow, blocks the main thread)

รูปแบบสำหรับ production: แปลงครั้งเดียว โหลดได้หลายครั้ง

แปลง IFC เป็น Fragments เพียงครั้งเดียว (ตอนอัปโหลด ใน worker หรือในขั้นตอน build)
เก็บไฟล์ .frag ที่ได้ไว้ในแคช OPFS หรือ object storage
ทุกครั้งที่โหลดหลังจากนั้น ให้ดึง Fragments มาเรนเดอร์ โดยไม่ต้องแยกวิเคราะห์ IFC เลย
รันงานหนักใน Web Worker เพื่อให้เธรดหลักยังตอบสนองได้

import * as OBC from "@thatopen/components";

const components = new OBC.Components();
const fragments = components.get(OBC.FragmentsManager);
const ifcLoader = components.get(OBC.IfcLoader);
await ifcLoader.setup();

// First time only: IFC → Fragments
const model = await ifcLoader.load(ifcBytes);

// Serialize once, reuse forever
const frag = fragments.export(model.group);
await saveToCache(frag);          // OPFS / IndexedDB / server

// Subsequent loads: skip IFC entirely
const cached = await loadFromCache();
fragments.load(cached);            // fast

หลุมพรางที่พบบ่อย

“memory access out of bounds”: WASM ของ web-ifc ใช้หน่วยความจำหมดเมื่อเจอไฟล์ขนาดใหญ่ ให้แปลงใน worker เพิ่มหน่วยความจำที่ใช้ได้ หรือประมวลผลเป็นส่วน ๆ
เรขาคณิตที่อยู่ไกลจากจุดกำเนิดจะสั่น: โมเดลที่สร้างด้วยพิกัดภูมิศาสตร์จริงจะสูญเสียความแม่นยำของเลขทศนิยมลอยตัว (floating-point) ให้ย้ายฐานไปยังจุดกำเนิดเฉพาะที่ (ดู “พิกัด IFC ผิดตำแหน่ง”)
ไม่มีการเรนเดอร์ฝั่งเซิร์ฟเวอร์: web-ifc ทำงานในเบราว์เซอร์/Node ไม่ใช่ขั้นตอน SSR ที่ไม่ใช้ JS ให้วางแผนแปลงฝั่งไคลเอนต์หรือแปลงตอน build ไม่ใช่ทำ SSR ตอนรับคำขอ
การปรับการโหลดให้เหมาะสม: แบ่งโมเดลขนาดใหญ่เป็นไทล์และตัดส่วนที่ไม่จำเป็นออก (culling) เพื่อวาดเฉพาะส่วนที่อยู่ใกล้กล้อง (ดู “ทำไมไฟล์ IFC ขนาดใหญ่จึงทำให้เบราว์เซอร์ล่ม”)

หรือไม่ต้องสร้างเองเลย

นี่คือไปป์ไลน์เดียวกับที่โปรแกรมดูไฟล์ IFC (IFC viewer) นี้ใช้ทุกประการ ได้แก่ web-ifc สำหรับการแยกวิเคราะห์ ขั้นตอนแปลงครั้งเดียวแบบ Fragments การแคชด้วย OPFS ที่ทำให้การโหลดซ้ำเร็วขึ้นราว 10 เท่า และการตรวจสอบความถูกต้องซ้อนอยู่ด้านบน หากเป้าหมายของคุณคือดูและตรวจสอบไฟล์ IFC ไม่ใช่สร้างโปรแกรมดูเอง คุณข้ามงานวิศวกรรมทั้งหมดนี้แล้วเปิดไฟล์ได้เลย

ดูไปป์ไลน์นี้ทำงานจริง

โมเดล IFC4 ขนาดระดับงานจริง โหลดด้วยไปป์ไลน์แบบแปลงครั้งเดียวและแคชไว้ตามที่อธิบายข้างต้นทุกประการ เปิดดูแล้วลองโหลดซ้ำ การโหลดครั้งที่สองแทบจะทันที

IFC4 · 14 MB

เปิดโปรแกรมดู IFC แบบอินเทอร์แอกทีฟ

ฝังโปรแกรมดูลงในหน้าเว็บของคุณเอง

หากคุณโฮสต์ไฟล์ IFC ไว้ในที่สาธารณะ เช่น บักเก็ตที่เปิด CORS ลิงก์ไฟล์ดิบใน repo หรือสภาพแวดล้อมข้อมูลร่วม (CDE) ของคุณ คุณก็สามารถนำโปรแกรมดูตัวนี้ไปใส่ในบล็อกโพสต์ หน้าเอกสาร หรือแผงใน CDE ได้ด้วย iframe เพียงตัวเดียว โดยไม่ต้องมีขั้นตอน build วาง URL ด้านล่าง ปรับเลย์เอาต์ แล้วคัดลอกโค้ด โมเดลจะถูกดึงในเบราว์เซอร์ของผู้เข้าชม จึงไม่มีสิ่งใดถูกอัปโหลดมาที่เรา

สร้างโค้ดฝัง IFC ของคุณ

วาง URL ของไฟล์ IFC สาธารณะ เลือกเลย์เอาต์ แล้วคัดลอก iframe ตัวอย่างแบบสดจะอัปเดตตามการปรับของคุณทันที

เปิด IFC Viewer

วิธีแสดงไฟล์ IFC ในเบราว์เซอร์ด้วย three.js, web-ifc และ Fragments