กลับไปยังบล็อก BIM และ IFC
ดิจิทัลทวิน · 2026-10-10 · 9 นาที
ดิจิทัลทวินแบบเรียลไทม์ของจัตุรัสกาตาลุญญา สร้างจากข้อมูลเปิดบนเบราว์เซอร์
โมเดล IFC 8 ชุดของจัตุรัสกาตาลุญญาบนภูมิประเทศจริง พร้อมแท่นจอดจักรยาน Bicing เครื่องชาร์จรถยนต์ไฟฟ้า การจราจรบนถนน และคุณภาพอากาศที่อัปเดตจากข้อมูลเปิดของบาร์เซโลนา ทั้งหมดทำงานในเบราว์เซอร์ของผู้เข้าชม ไม่มีแพลตฟอร์ม IoT ไม่มีเซิร์ฟเวอร์ GIS และไม่มีแบ็กเอนด์ของเราเลย
จัตุรัสกาตาลุญญาใน IFC Viewer Online: น้ำพุคู่และโมเดล IFC อื่น ๆ บนแผนที่ 3D ของบาร์เซโลนา พร้อมจำนวนจักรยาน Bicing แบบเรียลไทม์ลอยอยู่เหนือแท่นจอด
เดโมดิจิทัลทวิน (digital twin) ส่วนใหญ่เริ่มต้นด้วยแพลตฟอร์ม ทั้งบัญชีคลาวด์ ใบอนุญาตตัวเชื่อมต่อ (connector) และเซิร์ฟเวอร์ให้เซนเซอร์ส่งข้อมูลเข้าไป แต่เดโมนี้เริ่มต้นด้วยลิงก์เดียว เมื่อเปิดลิงก์ โมเดล IFC 8 ชุดของจัตุรัสกาตาลุญญา (Plaça de Catalunya) จะตั้งอยู่บนภูมิประเทศจริงของบาร์เซโลนา ขณะที่ฟีดข้อมูลสาธารณะของเมืองระบายสีให้โมเดลเหล่านั้น ได้แก่ แท่นจอดของสถานีจักรยานสาธารณะ ช่องจอดของเครื่องชาร์จรถยนต์ไฟฟ้า การจราจรบนถนนโดยรอบ และคุณภาพอากาศ
ไม่มีระบบใดของเราคั่นอยู่ตรงกลาง เบราว์เซอร์ของผู้เข้าชมดึงโมเดลจากเว็บไซต์นี้ และดึงข้อมูลจากผู้ให้บริการแต่ละรายโดยตรง สิ่งนี้ทำให้ทวินมีข้อจำกัดบางอย่าง ซึ่งจะอธิบายไว้ด้านล่าง แต่ก็หมายความว่าใครก็สามารถเปิดดู ฝังลงในเว็บไซต์ หรือคัดลอกไฟล์ฉาก (scene) ไปสร้างทวินของตัวเองได้
ประเด็นสำคัญ
- ดิจิทัลทวินที่ใช้งานได้จริงสร้างจากข้อมูลเปิดเพียงอย่างเดียวได้ หากผู้ให้บริการอนุญาตคำขอจากเบราว์เซอร์ (CORS) ซึ่งฟีดของ Bicing และ Endolla รวมถึงฟีดการจราจรและคุณภาพอากาศของบาร์เซโลนาอนุญาตทั้งหมด
- สิ่งที่เชื่อมข้อมูลเข้ากับโมเดลคือการผูกข้อมูล (binding) ซึ่งประกอบด้วยฟีด รหัสอุปกรณ์ (device id) คิวรีค้นหาองค์ประกอบ IFC ตามคลาสและชื่อ และกฎการให้สีที่ใช้กฎแรกที่ตรงเงื่อนไข
- การวางตำแหน่งให้ตรงคือสิ่งที่ทำให้ทวินน่าเชื่อถือ ในเดโมนี้ องค์ประกอบ IFC อยู่ห่างจากฟีเจอร์ OpenStreetMap ที่จำลองไว้เพียง 0.1–0.4 m และจุดข้อมูลอยู่ตรงตำแหน่งที่แผนที่ฐานวาดไว้พอดี
- เดโมทั้งหมดคือไฟล์ฉาก JSON เพียงไฟล์เดียว คัดลอกไป เปลี่ยนโมเดลและการผูกข้อมูล คุณก็จะได้ทวินของตัวเอง
ลองเลย: จัตุรัสกาตาลุญญาแบบเรียลไทม์
เปิดโมเดลทั้ง 8 ชุดบนภูมิประเทศของ ICGC พร้อมเลเยอร์ข้อมูลเรียลไทม์ 4 ชั้น แท่นจอด Bicing และช่องจอดของ Endolla จะเปลี่ยนสีตามฟีด โดยมีค่าปัจจุบันลอยอยู่ด้านบน
เปิดโปรแกรมดู IFC แบบอินเทอร์แอกทีฟ
ในฉากมีอะไรบ้าง
โมเดล IFC 4.3 ที่อ้างอิงพิกัดทางภูมิศาสตร์แล้ว (georeferenced) 8 ชุด รอบจัตุรัสและช่วงปลายด้านล่างของถนน Passeig de Gràcia วางอยู่บนภูมิประเทศความละเอียด 5 m ของสถาบันแผนที่แห่งกาตาลุญญา (ICGC) โดยมีเมืองจาก OpenStreetMap อยู่โดยรอบ
| โมเดล | คืออะไร |
|---|
| ศูนย์กลางการเดินทาง (Mobility hub) | สถานี Bicing หมายเลข 65 พร้อมแท่นจอด 21 ช่อง ศาลาที่พักผู้โดยสารรถประจำทาง ทางเข้ารถไฟใต้ดินพร้อมลิฟต์ และเฟอร์นิเจอร์ริมถนน |
| Fonts Bessones | น้ำพุคู่ของจัตุรัส พร้อมระบบไฮดรอลิกและระบบไฟส่องสว่าง |
| อนุสาวรีย์ Macià | อนุสาวรีย์ของ Francesc Macià ในฐานะทรัพย์สินมรดกทางวัฒนธรรม |
| ทางเข้า Pelai | ทางเข้าฝั่ง Pelai ของสถานีกาตาลุญญา |
| Canaletes | ปลายด้านบนของถนน La Rambla และน้ำพุ Canaletes |
| น้ำพุ Gran Via | น้ำพุขนาดใหญ่ที่หัวมุมถนน Passeig de Gràcia กับ Gran Via |
| ม้านั่งโคมไฟ | ม้านั่งโคมไฟของ Pere Falqués บนถนน Passeig de Gràcia |
| เครื่องชาร์จ Endolla | จุดชาร์จรถยนต์ไฟฟ้าริมถนน ประกอบด้วยเครื่องชาร์จ หัวชาร์จ และช่องจอด 2 ช่อง |
โมเดลเหล่านี้สร้างขึ้นใหม่เพื่อใช้อธิบาย โดยอิงจากแหล่งข้อมูลสาธารณะ ข้อมูลทรัพย์สินในไฟล์ระบุไว้ว่าเป็นค่าตัวอย่างสำหรับเดโม
สถานี Bicing หมายเลข 65: เสาแท่นจอดอัปเดตตามสถานะของสถานีทุกนาที และตัวเลขที่ลอยอยู่คือจำนวนจักรยานที่ว่างอยู่ในขณะนี้
ฟีดข้อมูลเปิด 4 แหล่ง ไม่มีเซิร์ฟเวอร์คั่นกลาง
| ฟีด | ผู้เผยแพร่ | รูปแบบ | รอบการรีเฟรชในฉาก |
|---|
| สถานี Bicing | Bicing, สภาเมืองบาร์เซโลนา (Ajuntament de Barcelona) | GBFS 3.0 | เลเยอร์แผนที่ทุก 30 วินาที สีของแท่นจอดทุก 60 วินาที |
| การชาร์จรถยนต์ไฟฟ้า | Endolla / B:SM, Open Data BCN | GELFS JSON | สถานะเครื่องชาร์จทุก 5 นาที |
| การจราจรบนถนน | สภาเมืองบาร์เซโลนา, Open Data BCN | ตารางสถานะที่เชื่อม (join) กับช่วงถนน | ทุก 5 นาที |
| คุณภาพอากาศ | สำนักงานสาธารณสุขบาร์เซโลนา (Agència de Salut Pública de Barcelona) | CSV รายชั่วโมงที่เชื่อมกับสถานีตรวจวัด | รายชั่วโมง เผยแพร่ล่าช้า 45 นาทีถึง 3 ชั่วโมง |
ทุกคำขอส่งตรงจากเบราว์เซอร์ของผู้เข้าชมไปยังผู้เผยแพร่ข้อมูล วิธีนี้ใช้ได้ก็เพราะฟีดเหล่านี้ส่ง header CORS ที่อนุญาตให้ทำเช่นนั้น ซึ่งได้ตรวจสอบทีละฟีดก่อนนำเข้ามาในฉาก รูปแบบข้อมูลเป็นมาตรฐานเปิดหรือไฟล์ธรรมดา ได้แก่ GBFS สำหรับจักรยานสาธารณะ[gbfs] ไฟล์ JSON สำหรับ Endolla และตาราง CSV จากพอร์ทัลข้อมูลเปิดของเมือง[opendata-bcn] ทั้งสี่ฟีดถูกอ่านในเบราว์เซอร์
จากฟีดสู่เสาแท่นจอดที่เปลี่ยนสี
การระบายสีแท่นจอดของสถานี 65 มี 5 ขั้นตอน และไฟล์ฉากเก็บทุกขั้นตอนไว้ครบ:
- แหล่งข้อมูลอุปกรณ์ (device source) ฟีดสถานะสถานีของ Bicing ซึ่งดึงข้อมูลทุก 60 วินาที แต่ละสถานีในฟีดจะกลายเป็นอุปกรณ์หนึ่งตัว โดยใช้ station_id เป็นคีย์
- อุปกรณ์หนึ่งตัว สถานี 65 ซึ่งอยู่ที่หัวมุมจัตุรัสกับถนน Passeig de Gràcia
- คิวรีสำหรับค้นหาองค์ประกอบ องค์ประกอบ IfcBuildingElementProxy ที่ชื่อมีคำว่า “ancoratge” (ภาษากาตาลา แปลว่าแท่นจอด) โดยรวมชิ้นส่วนของชุดประกอบด้วย คิวรีนี้จะพบเสาแท่นจอดครบทั้ง 21 ต้น
ชุดประกอบ (assembly) มีความสำคัญในกรณีนี้ แท่นจอดเป็นชิ้นส่วนของชุดประกอบสถานี (IfcRelAggregates) และคิวรีที่ค้นเฉพาะองค์ประกอบระดับบนสุดหาไม่เจอเลยแม้แต่ต้นเดียว
- กฎการให้สี ใช้กฎแรกที่ตรงเงื่อนไข ปิดให้บริการ: สีเทา ไม่มีจักรยาน: สีแดง และแจ้งเตือนเมื่อผ่านไป 15 นาที เต็ม: สีน้ำเงิน มีจักรยาน 2 คันหรือน้อยกว่า: สีเหลืองอำพัน นอกเหนือจากนั้น: สีเขียว
- ค่าที่ลอยอยู่และเกณฑ์ความเก่าของข้อมูล จำนวนจักรยานที่ว่างจะลอยอยู่เหนือแท่นจอด ค่าที่อ่านได้ซึ่งเก่ากว่าที่แหล่งข้อมูลกำหนดจะทำให้แท่นจอดกลายเป็นสีเทา “ไม่มีข้อมูลล่าสุด” จึงไม่มีวันถูกตีความว่า “ทุกอย่างปกติ”
{
"sourceId": "bicing-status",
"deviceId": "65",
"query": { "classes": ["IfcBuildingElementProxy"], "nameContains": "ancoratge" },
"rules": [
{ "name": "No bikes", "filters": [{ "field": "num_vehicles_available", "op": "eq", "value": 0 }],
"effect": { "color": "#ef4444" }, "alert": { "forMin": 15 } }
]
}
คลิกที่เสาแท่นจอด แล้วการ์ดจะแสดงข้อมูลสดของสถานี 65 อยู่ข้างข้อมูล IFC ขององค์ประกอบ
เครื่องชาร์จ Endolla ทำงานแบบเดียวกัน: ช่องจอดทั้งสองช่องรับสถานะจากจุดชาร์จหมายเลข 3762 ที่ Passeig de Gràcia 5 รหัสของเครื่องชาร์จในไฟล์ IFC เป็นค่าสำหรับอธิบายเท่านั้น การผูกข้อมูลนี้จึงจับคู่ด้วยตำแหน่ง (จุดชาร์จจริงที่อยู่ข้างโมเดล) แทนที่จะใช้รหัสอุปกรณ์จริง
วางให้ถูกที่
ทวินที่ลอยห่างจากถนนของตัวเองไปไม่กี่เมตรจะหมดความน่าเชื่อถือตั้งแต่แวบแรก โมเดลแต่ละชุดในที่นี้ถูกวางลงบนแบบจำลองภูมิประเทศ[icgc-met] ตามค่าอ้างอิงพิกัดทางภูมิศาสตร์ (georeference) ของตัวเอง ซึ่งก็คือ IfcMapConversion ในระบบ ETRS89 / UTM 31N โมเดลที่ใช้จุดกำเนิด (origin) เดียวกันจะอยู่ด้วยกันเสมอ หากโมเดลของคุณเองไปอยู่ผิดที่ สาเหตุที่พบบ่อยอธิบายไว้ในบทความ พิกัดและการอ้างอิงพิกัดทางภูมิศาสตร์ใน IFC
เราวัดตำแหน่งที่โมเดลไปวางอยู่เทียบกับฟีเจอร์ OpenStreetMap ที่โมเดลเป็นตัวแทน โดยฉายทั้งสองอย่างด้วยวิธีเดียวกับที่แผนที่ฐานใช้วาดทุกประการ:
องค์ประกอบ IFC เทียบกับฟีเจอร์ OSM ที่จำลอง
- เสาน้ำพุ Canaletes: 0.08m
- Fonts Bessones: 0.1m
- อนุสาวรีย์ Macià: 0.3m
- ซุ้มกระจก Pelai: 0.38m
วัดในโปรแกรมดูที่กำลังทำงานจริงเมื่อวันที่ 2026-10-10 เลเยอร์ข้อมูลตรงตำแหน่งทุกประการ: จุด 687 จุด ซึ่งอยู่ห่างจากจัตุรัสได้ไกลถึง 8 km อยู่ห่างจากตำแหน่งที่แผนที่วาดไว้ 0.00 mm
ที่สเกลนี้ มีรายละเอียดสองข้อที่สร้างความแตกต่าง ข้อแรก ค่าอ้างอิงพิกัดเก็บมุมหมุนโดยวัดจากทิศเหนือกริด (grid north) ขณะที่แผนที่วาดตามทิศเหนือจริง (true north) ในบาร์เซโลนา ทั้งสองต่างกัน 0.55° หรือประมาณหนึ่งเมตรที่ปลายของโมเดลยาว 100 m และโปรแกรมดูจะชดเชยส่วนต่างนี้ให้ ข้อสอง เลเยอร์ข้อมูลถูกฉายด้วยวิธีเดียวกับที่แผนที่ฐานใช้ทุกประการ สถานี Bicing ที่อยู่ห่างออกไป 4 km จึงยังคงอยู่บนทางเท้าของตัวเองพอดี
สิ่งที่ทวินนี้ไม่ใช่
- ไม่ใช่ระบบควบคุม ข้อมูลคือสิ่งที่ผู้เผยแพร่เผยแพร่ตามรอบเวลาของผู้เผยแพร่เอง: คุณภาพอากาศช้ากว่าเวลาจริง 45 นาทีถึง 3 ชั่วโมง และไฟล์จุดชาร์จ EV บอกเพียงว่าหัวชาร์จเปลี่ยนสถานะครั้งล่าสุดเมื่อใด ไม่ได้บอกว่ารายงานครั้งล่าสุดเมื่อใด
- ไม่ใช่ทะเบียนทรัพย์สินของเมือง โมเดลเป็นการสร้างขึ้นใหม่ และข้อมูลการบำรุงรักษาในโมเดลเป็นค่าสำหรับอธิบายเท่านั้น
- ไม่ได้เร็วทุกฟีด Open Data BCN อาจใช้เวลา 15–40 วินาทีในการตอบกลับ ข้อมูลการจราจรและการชาร์จจึงอาจแสดงขึ้นช้ากว่าส่วนอื่น
- ยังไม่ได้วัดผลบนโทรศัพท์มือถือ ฉากเต็มรูปแบบที่มีโมเดล 8 ชุด เลเยอร์ 4 ชั้น และเมือง 3D ผ่านการทดสอบบนเบราว์เซอร์เดสก์ท็อปแล้ว
สร้างทวินของคุณเอง
เดโมนี้คือไฟล์ JSON ไฟล์เดียวที่เรียกว่าฉาก (scene) ซึ่งระบุโมเดล เลเยอร์ แหล่งข้อมูลอุปกรณ์ การผูกข้อมูล และมุมกล้อง หากต้องการสร้างของคุณเอง:
- คัดลอกไฟล์ฉาก เริ่มจาก /scenes/barcelona-placa-catalunya.scene.json บนเว็บไซต์นี้
- เปลี่ยนโมเดล ชี้ URL ของโมเดลไปยังไฟล์ IFC ของคุณ ซึ่งวางไว้บนโฮสต์ใดก็ได้ที่ส่ง header CORS
- ผูกข้อมูลเข้ากับองค์ประกอบของคุณ ใช้คลาส IFC ร่วมกับส่วนหนึ่งของชื่อ หรือใช้รายการ GlobalId
- โฮสต์ไฟล์แล้วเปิดใช้งาน ใช้โฮสต์แบบสแตติก (static host) ใดก็ได้ เปิดโปรแกรมดูด้วย ?scene= ตามด้วย URL ของไฟล์ หรือจะข้ามการโฮสต์ไปเลยก็ได้: เมนู แชร์ → ฉากดิจิทัลทวิน จะบรรจุฉากทั้งหมดไว้ในลิงก์
<iframe
src="https://www.ifcvieweronline.eu/?scene=/scenes/barcelona-placa-catalunya.scene.json&embed=1"
width="100%" height="600" style="border:0;border-radius:12px"
loading="lazy" allow="fullscreen"
title="Plaça de Catalunya — open-data digital twin">
</iframe>
การฝังแบบเดียวกันนี้ใช้ได้ทั้งบนเว็บไซต์โครงการ หน้าอินทราเน็ต หรือแผงของสภาพแวดล้อมข้อมูลร่วม (CDE) พารามิเตอร์ทั้งหมดอยู่ในบทความ วิธีฝังโปรแกรมดู IFC ส่วนแนวทางเดียวกันกับข้อมูลชนิดอื่นดูได้ใน รถบัสเรียลไทม์บนโมเดล IFC ของสถานีขนส่งผ่าน MQTT และ ทวินสถานีในโตเกียวจากข้อมูล ODPT
ดิจิทัลทวินแบบเรียลไทม์ของจัตุรัสกาตาลุญญา สร้างจากข้อมูลเปิดบนเบราว์เซอร์