Explore Architectural and MEP BCF issues
Explore buildingSMART BCF 3.0 issues for the Architectural and MEP models, including comments and saved viewpoints.
Open in new tab
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Explore Architectural and MEP BCF issues</title>
<meta name="description" content="Explore buildingSMART BCF 3.0 issues for the Architectural and MEP models, including comments and saved viewpoints.">
<style>
html, body { height: 100%; margin: 0; }
#example-viewer-mount { position: fixed; inset: 0; }
bim-grid#ifc-viewer { display: block; position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.example-ui { position: fixed; z-index: 10; box-sizing: border-box; color: #253041; font: 12px/1.4 system-ui, sans-serif; }
.example-ui.example-task { right: 10px; bottom: 64px; width: 224px; max-width: calc(100vw - 64px); display: grid; gap: 6px; padding: 10px; background: #fff; border: 1px solid #dfe3e8; border-radius: 4px; box-shadow: 0 1px 5px #14203310; }
.example-ui :is(h2, p) { margin: 0; }
.example-ui h2 { font-size: 13px; line-height: 1.3; font-weight: 650; }
.example-ui p { color: #5a6575; }
.example-ui button { box-sizing: border-box; min-width: 0; max-width: 100%; font: inherit; padding: 5px 7px; border: 1px solid #cbd2dc; border-radius: 3px; background: #fff; color: #253041; cursor: pointer; }
.example-ui button:hover { background: #f3f6fa; }
.example-ui button:focus-visible { outline: 2px solid #3568ba; outline-offset: 2px; }
.example-ui [hidden] { display: none; }
.example-ui.example-credit { right: 8px; bottom: 32px; width: max-content; max-width: calc(100vw - 64px); padding: 2px 5px; background: #ffffffdf; border-radius: 2px; font-size: 9px; text-align: right; overflow-wrap: anywhere; }
.example-ui.example-credit a { color: #566171; }
@media (max-width: 600px) {
.example-ui.example-task { right: 8px; padding: 8px; }
.example-ui button { min-height: 30px; }
}
</style><!-- generated:example-seo:start -->
<link rel="canonical" href="https://viewer.flinker.app/examples/bcf/index.html">
<meta name="robots" content="index,follow">
<meta property="og:title" content="Explore Architectural and MEP BCF issues">
<meta property="og:description" content="Explore buildingSMART BCF 3.0 issues for the Architectural and MEP models, including comments and saved viewpoints.">
<meta property="og:url" content="https://viewer.flinker.app/examples/bcf/index.html"><meta property="og:type" content="article">
<meta property="og:site_name" content="Flinker IFC Viewer"><meta property="og:image" content="https://viewer.flinker.app/examples/bcf/thumbnail.webp">
<meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Explore Architectural and MEP BCF issues">
<meta name="twitter:description" content="Explore buildingSMART BCF 3.0 issues for the Architectural and MEP models, including comments and saved viewpoints."><meta name="twitter:image" content="https://viewer.flinker.app/examples/bcf/thumbnail.webp">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"TechArticle","headline":"Explore Architectural and MEP BCF issues","description":"Explore buildingSMART BCF 3.0 issues for the Architectural and MEP models, including comments and saved viewpoints.","url":"https://viewer.flinker.app/examples/bcf/index.html","mainEntityOfPage":"https://viewer.flinker.app/examples/bcf/index.html","image":"https://viewer.flinker.app/examples/bcf/thumbnail.webp","inLanguage":"en","author":{"@type":"Organization","name":"Flinker","url":"https://www.flinker.app/"}}</script>
<!-- generated:example-seo:end -->
<script type="application/json" id="example-data">{
"category": "Coordination",
"formats": [
"IFC",
"BCF"
],
"capabilities": [
"BCF review"
],
"audience": "BIM workflow",
"order": 3
}
</script>
</head><body>
<main id="example-viewer-mount" aria-label="Model viewer"><bim-grid id="ifc-viewer"></bim-grid></main>
<aside class="example-ui example-task" aria-label="Explore buildingSMART issues">
<h2>Explore Architectural and MEP issues</h2>
<p>19 BCF 3.0 samples · buildingSMART</p>
<p>Open <strong>Topics</strong> (speech bubble) on the left toolbar, then select a topic to explore its comments and saved viewpoints. Select a component, then click <strong>1 element selected</strong> at the top left to open <strong>Properties</strong>.</p>
<button id="sample-retry" type="button" hidden>Retry failed files</button>
</aside>
<div class="example-ui example-credit" aria-label="Sample source and license"><a href="https://github.com/buildingSMART/BCF-XML/tree/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases" target="_blank" rel="noopener noreferrer">© buildingSMART International</a> · <a href="https://github.com/buildingSMART/BCF-XML/blob/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/LICENSE" target="_blank" rel="noopener noreferrer">CC BY-ND 4.0</a></div>
<template id="example-guide">
<h2 data-example-title>Explore Architectural and MEP BCF issues</h2><p data-example-description>Explore buildingSMART BCF 3.0 issues for the Architectural and MEP models, including comments and saved viewpoints.</p><h3>Try it</h3><p>Open Topics (speech bubble) on the left toolbar, select an imported topic to inspect its details, comments and saved viewpoints. Choose a viewpoint to restore its model view. Some topics contain only text or document references. Select a component, then click 1 element selected at the top left to open Properties.</p><h3>Included samples</h3><p>This example loads Architectural.ifc and MEP.ifc with their buildingSMART BCF 3.0 sample collection: 19 archives covering issue details and model viewpoints. Each archive is imported unchanged. File names include its category and sample name.</p><h3>Developer integration</h3><p>Pass each source model and original BCF archive to <code>viewer.add()</code>. The SDK owns topic navigation and viewpoint restoration. Archives are imported unchanged; unpacked copies of their markup files are not separate archives. If a download or import fails, Retry failed files opens only the unsuccessful files.</p><p>Copy this folder and serve it over HTTP, for example <code>python -m http.server 8080</code>. The published SDK and sample downloads require internet access.</p>
</template>
<template id="example-notices">
<h2>Sources and license notices</h2><p><a href="https://github.com/buildingSMART/BCF-XML/tree/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases" target="_blank" rel="noopener noreferrer">© buildingSMART International Ltd.</a> · <a href="https://github.com/buildingSMART/BCF-XML/blob/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/LICENSE" target="_blank" rel="noopener noreferrer">CC BY-ND 4.0</a></p><p>Dedicated standalone examples cover <a href="https://viewer.flinker.app/examples/selection/index.html">selection from a building work schedule</a>, <a href="https://viewer.flinker.app/examples/bcf-coloring/index.html">coloring</a>, <a href="https://viewer.flinker.app/examples/bcf-visibility/index.html">visibility</a> and <a href="https://viewer.flinker.app/examples/bcf-clipping/index.html">clipping</a>. Use the viewer's Topics panel to inspect or export their generated topics.</p>
</template>
<script type="module">
import { Viewer } from 'https://cdn.flinker.app/ifc-viewer/v4.0.3/ifc-viewer.es.js';
async function loadExampleFile(name, url, load = blob => viewer.add(name, blob), size = 0) {
const show = stage => viewer.setMessage(name + ': ' + stage, { type: 'loading' });
const chunks = [], chunkSize = 4 * 1024 * 1024;
let offset = 0, attempts = 0, action = 'download', type = '';
try {
await show('Downloading');
while (!size || offset < size) {
try {
const end = Math.min(offset + chunkSize, size || Infinity) - 1;
const response = await fetch(url, {
headers: { Range: 'bytes=' + offset + '-' + end },
cache: 'no-store', signal: AbortSignal.timeout(60000),
});
if (!response.ok) {
await response.body?.cancel();
// GitHub raw hides Content-Range from browser JavaScript: probe EOF.
if (response.status === 416 && offset && !size) break;
throw Object.assign(new Error('HTTP ' + response.status), { retry: [408, 429].includes(response.status) || response.status >= 500 });
}
const range = response.headers.get('content-range')?.match(/^bytes (\d+)-(\d+)\/(\d+)$/);
if (range && Number(range[1]) !== offset) throw new TypeError('Unexpected byte range');
size ||= Number(range?.[3]) || 0;
const bytes = await response.arrayBuffer();
const expected = response.status === 206 ? (size ? Math.min(chunkSize, size - offset) : 0) : size;
if (!bytes.byteLength || (expected && bytes.byteLength !== expected) || (response.status === 206 && bytes.byteLength > chunkSize))
throw new TypeError('Incomplete download at byte ' + offset);
if (response.status === 200) chunks.length = 0; // Server ignored Range.
chunks.push(bytes);
offset = response.status === 200 ? bytes.byteLength : offset + bytes.byteLength;
type = response.headers.get('content-type') || '';
attempts = 0;
if (response.status === 200) break;
await show('Downloading' + (size ? ' ' + Math.round(offset / size * 100) + '%' : ''));
}
catch (error) {
if (error.retry === false || ++attempts === 3) throw error;
await show('Retrying download');
await new Promise(resolve => setTimeout(resolve, 500 * 2 ** (attempts - 1)));
}
}
action = 'open';
const result = await load(new Blob(chunks, { type }), show);
if (result?.isError) throw new Error('The viewer could not open the file');
await viewer.setMessage(null);
return result;
}
catch (error) {
throw new Error('Could not ' + action + ' ' + name + (action === 'download' ? ' from ' + url : '') + ': ' + error.message, { cause: error });
}
}
const sampleFiles = [
{"name":"BCF 3.0 - Markup - Document Reference External.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Markup/Document%20Reference%20External/document%20reference%20external.bcf","size":24589},
{"name":"BCF 3.0 - Markup - Document reference internal.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Markup/Document%20reference%20internal/Document%20reference%20internal.bcf","size":100614},
{"name":"BCF 3.0 - Markup - Due Date.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Markup/Due%20Date/DueDate.bcf","size":2087},
{"name":"BCF 3.0 - Markup - Labels.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Markup/Labels/Labels.bcf","size":97604},
{"name":"BCF 3.0 - Markup - Milestone.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Markup/Milestone/Milestone.bcf","size":61468},
{"name":"BCF 3.0 - Markup - Minimum information.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Markup/Minimum%20information/Minimum%20information.bcf","size":1255},
{"name":"BCF 3.0 - Markup - Related topics with both topics in the same file.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Markup/Related%20topics%20with%20both%20topics%20in%20the%20same%20file/Related%20topics%20with%20both%20topics%20in%20the%20same%20file.bcf","size":2939},
{"name":"BCF 3.0 - Markup - User assignment.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Markup/User%20assignment/User%20assignment.bcf","size":62809},
{"name":"BCF 3.0 - Visualization - All parts of curtain wall visible.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Visualization/All%20parts%20of%20curtain%20wall%20visible/all%20parts%20of%20curtain%20walls%20visible.bcf","size":19549},
{"name":"BCF 3.0 - Visualization - All parts of decomposed object except one visible.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Visualization/All%20parts%20of%20decomposed%20object%20except%20one%20visible/all%20parts%20except%20one%20visible.bcf","size":23678},
{"name":"BCF 3.0 - Visualization - Component selection.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Visualization/Component%20selection/component%20selection.bcf","size":69378},
{"name":"BCF 3.0 - Visualization - One part of decomposed object visible.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Visualization/One%20part%20of%20decomposed%20object%20visible/one%20part%20of%20decomposed%20object%20visible.bcf","size":6869},
{"name":"BCF 3.0 - Visualization - Orthogonal camera.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Visualization/Orthogonal%20camera/orthogonal%20camera.bcf","size":17825},
{"name":"BCF 3.0 - Visualization - Perspective camera.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Visualization/Perspective%20camera/perspective%20camera.bcf","size":82183},
{"name":"BCF 3.0 - Visualization - Single invisible wall.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Visualization/Single%20invisible%20wall/single%20invisible%20wall.bcf","size":41001},
{"name":"BCF 3.0 - Visualization - Single visible space.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Visualization/Single%20visible%20space/single%20visible%20space.bcf","size":33789},
{"name":"BCF 3.0 - Visualization - Single visible wall.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Visualization/Single%20visible%20wall/single%20visible%20wall.bcf","size":15337},
{"name":"BCF 3.0 - Visualization - Topics with different models visible.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Visualization/Topics%20with%20different%20models%20visible/Topics%20with%20different%20models%20visible.bcf","size":38459},
{"name":"BCF 3.0 - Visualization - all components and spaces visible.bcf","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/v3.0/Visualization/all%20components%20and%20spaces%20visible/all%20components%20and%20spaces%20visible.bcf","size":104568}
];
const modelFiles = [
{"name":"Architectural.ifc","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/IFCs/Architectural.ifc","size":640476},
{"name":"MEP.ifc","url":"https://raw.githubusercontent.com/buildingSMART/BCF-XML/bc48611d0d7a1587f028a2b69677a1aafd5cd0a8/Test%20Cases/IFCs/MEP.ifc","size":23246}
];
const viewer = new Viewer('#ifc-viewer');
window.exampleViewer = viewer;
const retry = document.getElementById('sample-retry');
const imported = new Set();
async function load() {
retry.hidden = true;
document.body.dataset.exampleState = 'loading';
const failures = [];
for (const file of [...modelFiles, ...sampleFiles]) {
if (imported.has(file.name)) continue;
try {
await loadExampleFile(file.name, file.url, undefined, file.size);
imported.add(file.name);
} catch (error) { failures.push(error.message); }
}
retry.hidden = !failures.length;
document.body.dataset.exampleState = failures.length ? 'error' : 'loaded';
if (failures.length) await viewer.setMessage(failures.join('\n'), { type: 'error' });
}
retry.addEventListener('click', () => { void load(); });
await viewer.ready;
await load();
</script>
</body>
</html>
How it works
Try it
Open Topics (speech bubble) on the left toolbar, select an imported topic to inspect its details, comments and saved viewpoints. Choose a viewpoint to restore its model view. Some topics contain only text or document references. Select a component, then click 1 element selected at the top left to open Properties.
Included samples
This example loads Architectural.ifc and MEP.ifc with their buildingSMART BCF 3.0 sample collection: 19 archives covering issue details and model viewpoints. Each archive is imported unchanged. File names include its category and sample name.
Developer integration
Pass each source model and original BCF archive to viewer.add(). The SDK owns topic navigation and viewpoint restoration. Archives are imported unchanged; unpacked copies of their markup files are not separate archives. If a download or import fails, Retry failed files opens only the unsuccessful files.
Copy this folder and serve it over HTTP, for example python -m http.server 8080. The published SDK and sample downloads require internet access.
Sources and license notices
© buildingSMART International Ltd. · CC BY-ND 4.0
Dedicated standalone examples cover selection from a building work schedule, coloring, visibility and clipping. Use the viewer's Topics panel to inspect or export their generated topics.