@jfk-solutions/demo3d-file-format 1.0.0 → 1.2.0

package/dist/three/index.js

@@ -1,4 +1,4 @@
-import { Demo3DMaterial, Demo3DMesh, Demo3DPackage, Demo3DProject, Demo3DResource, Demo3DVisual } from "../model.js";
+import { Demo3DConveyorSideProperties, Demo3DDimensionAspect, Demo3DDimensionPoint, Demo3DExtrusionPolygon, Demo3DExtrusionProfile, Demo3DMaterial, Demo3DMesh, Demo3DPackage, Demo3DProject, Demo3DPhotoEye, Demo3DResource, Demo3DSupportStand, Demo3DVisual } from "../model.js";
 import { Demo3DBinaryBlock, Demo3DXmlElement } from "../xml.js";
 export { createDemo3DThreeRenderer } from "./renderer.js";
 export async function createDemo3DThreeScene(parsed, options = {}) {
@@ -24,6 +24,13 @@ export async function createDemo3DThreeGroup(parsed, options = {}) {
     for (const visual of project.visuals) {
         root.add(createVisualObject(visual, state));
     }
+    if (options.renderDimensions === true) {
+        root.updateWorldMatrix(true, true);
+        const dimensions = createDimensionGroup(state);
+        if (dimensions.children.length > 0) {
+            root.add(dimensions);
+        }
+    }
     if (options.includeSerializedRenderables === true) {
         const serialized = createSerializedRenderableGroup(state);
         if (serialized.children.length > 0) {
@@ -92,12 +99,14 @@ export function decodeDemo3DThreeGeometry(mesh, three) {
 export function createDemo3DThreeMaterial(material, three) {
     const diffuse = material?.diffuse;
     const color = diffuse === undefined ? 0x9aa0a6 : demo3dColorToHex(diffuse);
-    const opacity = diffuse === undefined ? 1 : demo3dColorToOpacity(diffuse);
+    const opacity = demo3dMaterialOpacity(material);
+    const reflectivity = clamp01(material?.reflectivity ?? 0);
     return new three.MeshStandardMaterial({
         color,
         opacity,
         transparent: opacity < 1,
-        roughness: 0.72,
+        depthWrite: opacity >= 1,
+        roughness: 0.9 - reflectivity * 0.75,
         metalness: 0.05
     });
 }
@@ -126,6 +135,9 @@ function createState(three, project, options, buffers) {
         lineGeometryCache: new Map(),
         materialCache: new Map(),
         textureCache: new Map(),
+        visualObjectById: new Map(),
+        renderableObjectTrees: new WeakSet(),
+        warnedGeneratedTypes: new Set(),
         defaultMaterial: createDemo3DThreeMaterial(undefined, three),
         stats: {
             groups: 0,
@@ -138,6 +150,13 @@ function createState(three, project, options, buffers) {
             lines: 0,
             directVisuals: 0,
             proceduralBelts: 0,
+            proceduralSupportStands: 0,
+            proceduralConveyorSides: 0,
+            proceduralPhotoEyes: 0,
+            proceduralRollers: 0,
+            proceduralMotors: 0,
+            dimensions: 0,
+            unreconstructedProceduralVisuals: 0,
             imageVisuals: 0,
             lights: 0,
             missingGeometryPlaceholders: 0,
@@ -146,7 +165,7 @@ function createState(three, project, options, buffers) {
         }
     };
 }
-function createVisualObject(visual, state, inheritedLayer) {
+function createVisualObject(visual, state, inheritedLayer, parentVisual) {
     const refs = findMeshReferenceIds(visual.xml);
     const meshes = [];
     const textObjects = [];
@@ -163,7 +182,7 @@ function createVisualObject(visual, state, inheritedLayer) {
         drawingBlockObjects.push(drawingBlockObject);
         meshes.push(drawingBlockObject);
     }
-    const directVisualObject = createDirectVisualObject(visual, state);
+    const directVisualObject = createDirectVisualObject(visual, state, parentVisual);
     if (directVisualObject) {
         directVisualObjects.push(directVisualObject);
         meshes.push(directVisualObject);
@@ -211,11 +230,41 @@ function createVisualObject(visual, state, inheritedLayer) {
         localTransformText: visual.xml.textOf("LR"),
         layer
     };
+    if (visual.id) {
+        state.visualObjectById.set(visual.id, object);
+    }
+    let containsRenderable = meshes.length > 0;
     for (const child of visual.children) {
-        object.add(createVisualObject(child, state, layer));
+        const childObject = createVisualObject(child, state, layer, visual);
+        object.add(childObject);
+        containsRenderable ||= state.renderableObjectTrees.has(childObject);
+    }
+    if (containsRenderable) {
+        state.renderableObjectTrees.add(object);
     }
+    reportUnreconstructedProceduralVisual(visual, containsRenderable, state);
     return object;
 }
+function reportUnreconstructedProceduralVisual(visual, containsRenderable, state) {
+    if (state.options.includeUnsupported !== true ||
+        !visual.properties?.xsiType?.endsWith("ScriptProperties") ||
+        visual.typeName === "e3d:PhotoEye" ||
+        containsRenderable) {
+        return;
+    }
+    state.stats.unreconstructedProceduralVisuals += 1;
+    if (state.warnedGeneratedTypes.has(visual.typeName)) {
+        return;
+    }
+    state.warnedGeneratedTypes.add(visual.typeName);
+    warn(state, {
+        code: "DEMO3D_THREE_UNRECONSTRUCTABLE_SCRIPT_VISUAL",
+        message: `${visual.typeName} has script properties but no serialized geometry or dimensions to reconstruct.`,
+        sourceId: visual.id,
+        sourceType: visual.typeName,
+        xmlPath: visual.xml.path
+    });
+}
 function createAspectRenderableObjects(visual, state) {
     const objects = [];
     for (const aspect of findVisualAspects(visual, state)) {
@@ -316,7 +365,7 @@ function createDrawingBlockVisualObject(visual, state) {
     state.stats.lines += geometry.getAttribute("position").count / 2;
     return object;
 }
-function createDirectVisualObject(visual, state) {
+function createDirectVisualObject(visual, state, parentVisual) {
     if (!isRenderableVisualVisible(visual)) {
         return undefined;
     }
@@ -331,6 +380,19 @@ function createDirectVisualObject(visual, state) {
             ? createStraightBeltConveyorObject(visual, state)
             : undefined;
     }
+    if (visual.typeName === "e3d:SupportStand") {
+        return state.options.renderProceduralSupportStands === true
+            ? createSupportStandObject(visual, parentVisual, state)
+            : undefined;
+    }
+    if (visual.typeName === "e3d:PhotoEye") {
+        return state.options.renderProceduralPhotoEyes === true
+            ? createPhotoEyeObject(visual, parentVisual, state)
+            : undefined;
+    }
+    if (isRollerConveyorType(visual.typeName)) {
+        return createProceduralRollerConveyorObject(visual, state);
+    }
     const geometry = getDirectVisualGeometry(visual, state);
     if (!geometry) {
         return undefined;
@@ -515,6 +577,476 @@ function createRoundedBeltGeometry(belt, state) {
     }
     return geometry;
 }
+function createSupportStandObject(visual, parentVisual, state) {
+    const stand = visual instanceof Demo3DSupportStand
+        ? visual
+        : new Demo3DSupportStand(visual.typeName, visual.xml);
+    const properties = stand.supportProperties;
+    const legProfile = properties?.legProfile;
+    const footProfile = properties?.footProfile;
+    const floorPlateProfile = properties?.floorPlateProfile;
+    const crossBraceProfile = properties?.crossBraceProfile;
+    if (!properties || !legProfile || !crossBraceProfile) {
+        warn(state, {
+            code: "DEMO3D_THREE_UNSUPPORTED_SUPPORT_STAND_PROFILE",
+            message: "Support stand is missing its leg or cross-brace extrusion profile.",
+            sourceId: visual.id,
+            sourceType: visual.typeName,
+            xmlPath: visual.xml.path
+        });
+        return undefined;
+    }
+    const braces = [...properties.crossBraceHeights]
+        .filter((height) => height > 0)
+        .sort((left, right) => left - right);
+    const explicitHeight = numberChildOptional(visual.properties, "SupportHeight") ??
+        numberChildOptional(visual.properties, "Height") ??
+        numberChildOptional(visual.properties, "FloorHeight");
+    const finalSpacing = braces.length > 1
+        ? braces[braces.length - 1] - braces[braces.length - 2]
+        : braces[0];
+    const supportHeight = explicitHeight ?? (braces.length > 0
+        ? braces[braces.length - 1] + Math.max(finalSpacing ?? 0, 0.05)
+        : 1);
+    const parentWidth = numberChildOptional(parentVisual?.properties, "RollerWidth") ??
+        numberChildOptional(parentVisual?.properties, "BeltWidth") ??
+        numberChildOptional(parentVisual?.properties, "Width") ??
+        0.5;
+    const conveyorOffset = properties.conveyorOffset;
+    const sideExtension = Math.abs(conveyorOffset[2] ?? 0);
+    const span = Math.max(parentWidth + sideExtension * 2, 0.1);
+    const top = conveyorOffset[1] ?? 0;
+    const x = conveyorOffset[0] ?? 0;
+    const bottom = top - supportHeight;
+    const floorPlateHeight = clamp(properties.floorPlateHeight, 0, supportHeight);
+    const footHeight = clamp(properties.footHeight, 0, supportHeight - floorPlateHeight);
+    const legHeight = Math.max(supportHeight - floorPlateHeight - footHeight, 0.001);
+    const group = new state.three.Group();
+    group.name = `${visual.displayName ?? visual.id ?? "Support stand"} geometry`;
+    for (const z of [-span / 2, span / 2]) {
+        addSupportProfileMeshes(group, legProfile, "vertical", legHeight, [x, top, z], properties.legMaterial, "leg", state);
+        if (footProfile && footHeight > 0) {
+            addSupportProfileMeshes(group, footProfile, "vertical", footHeight, [x, bottom + floorPlateHeight + footHeight, z], properties.footMaterial, "foot", state);
+        }
+        if (floorPlateProfile && floorPlateHeight > 0) {
+            addSupportProfileMeshes(group, floorPlateProfile, "vertical", floorPlateHeight, [x, bottom + floorPlateHeight, z], properties.floorPlateMaterial, "floor plate", state);
+        }
+    }
+    const braceHeights = [...braces, supportHeight];
+    for (const height of braceHeights) {
+        addSupportProfileMeshes(group, crossBraceProfile, "horizontal", span, [x, bottom + height, 0], properties.crossBraceMaterial, height === supportHeight ? "top brace" : "cross brace", state);
+    }
+    if (group.children.length === 0) {
+        return undefined;
+    }
+    group.userData.demo3d = {
+        kind: "procedural-support-stand",
+        id: visual.id,
+        name: visual.displayName,
+        typeName: visual.typeName,
+        xmlPath: visual.xml.path,
+        supportHeight,
+        span,
+        braceHeights: braces
+    };
+    state.stats.groups += 1;
+    state.stats.directVisuals += 1;
+    state.stats.proceduralSupportStands += 1;
+    return group;
+}
+function addSupportProfileMeshes(group, profile, axis, length, position, fallbackColor, component, state) {
+    profile.polygons.forEach((polygon, index) => {
+        if (polygon.points.length < 3) {
+            return;
+        }
+        const geometry = getSupportProfileGeometry(profile, polygon, axis, length, state);
+        const material = polygon.materials[0]
+            ? getMaterial(polygon.materials[0], state)
+            : getColorMaterial(fallbackColor, state);
+        const mesh = new state.three.Mesh(geometry, material);
+        mesh.name = `${profile.name || component} ${index + 1}`;
+        mesh.position.set(position[0], position[1], position[2]);
+        mesh.userData.demo3d = { kind: "support-stand-component", component };
+        group.add(mesh);
+        state.stats.meshes += 1;
+    });
+}
+function getSupportProfileGeometry(profile, polygon, axis, length, state) {
+    const pointsKey = polygon.points.map((point) => `${point.x},${point.y}`).join(";");
+    const key = `support:${axis}:${length}:${profile.anchor.x},${profile.anchor.y}:${pointsKey}`;
+    const cached = state.primitiveGeometryCache.get(key);
+    if (cached) {
+        return cached;
+    }
+    const shape = new state.three.Shape();
+    polygon.points.forEach((point, index) => {
+        const x = point.x - profile.anchor.x;
+        const y = axis === "vertical"
+            ? -(point.y - profile.anchor.y)
+            : point.y - profile.anchor.y;
+        if (index === 0) {
+            shape.moveTo(x, y);
+        }
+        else {
+            shape.lineTo(x, y);
+        }
+    });
+    shape.closePath();
+    const geometry = new state.three.ExtrudeGeometry(shape, {
+        bevelEnabled: false,
+        curveSegments: 1,
+        depth: length,
+        steps: 1
+    });
+    if (axis === "vertical") {
+        geometry.rotateX(Math.PI / 2);
+    }
+    else {
+        geometry.translate(0, 0, -length / 2);
+    }
+    geometry.computeBoundingBox();
+    geometry.computeBoundingSphere();
+    state.primitiveGeometryCache.set(key, geometry);
+    state.stats.geometries += 1;
+    return geometry;
+}
+function createPhotoEyeObject(visual, parentVisual, state) {
+    const photoEye = visual instanceof Demo3DPhotoEye
+        ? visual
+        : new Demo3DPhotoEye(visual.typeName, visual.xml);
+    const properties = photoEye.photoEyeProperties;
+    if (!properties) {
+        return undefined;
+    }
+    const parentWidth = numberChildOptional(parentVisual?.properties, "RollerWidth") ??
+        numberChildOptional(parentVisual?.properties, "BeltWidth") ??
+        numberChildOptional(parentVisual?.properties, "Width") ??
+        0.5;
+    const sensorAspect = findVisualAspects(visual, state)
+        .find((aspect) => aspect.xsiType === "e3d:SensorSymbolAspect");
+    const symbolSide = sensorAspect?.textOf("SymbolSide")?.toLowerCase() ?? "right";
+    const side = symbolSide.includes("left") ? -1 : 1;
+    const beamThickness = Math.max(parentWidth / 150, 0.003);
+    const bodySize = Math.max(parentWidth / 16, 0.025);
+    const group = new state.three.Group();
+    group.name = `${visual.displayName ?? visual.id ?? "Photo eye"} geometry`;
+    const beamGeometry = cachedBoxGeometry(beamThickness, beamThickness, parentWidth, state);
+    const beam = new state.three.Mesh(beamGeometry, getColorMaterial(properties.clearedMaterial, state));
+    beam.name = "Photo eye beam";
+    beam.position.y = properties.beamHeight;
+    beam.rotation.x = degreesToRadians(properties.beamAngle);
+    beam.userData.demo3d = { kind: "photo-eye-beam" };
+    group.add(beam);
+    const bodyGeometry = cachedBoxGeometry(bodySize, bodySize, bodySize * 0.75, state);
+    const body = new state.three.Mesh(bodyGeometry, getColorMaterial(properties.boxMaterial, state));
+    body.name = "Photo eye body";
+    body.position.set(0, properties.beamHeight, side * (parentWidth / 2 + bodySize * 0.4));
+    body.userData.demo3d = { kind: "photo-eye-body", symbolSide };
+    group.add(body);
+    group.userData.demo3d = {
+        kind: "procedural-photo-eye",
+        id: visual.id,
+        name: visual.displayName,
+        typeName: visual.typeName,
+        xmlPath: visual.xml.path,
+        beamHeight: properties.beamHeight,
+        symbolSide
+    };
+    state.stats.groups += 1;
+    state.stats.meshes += 2;
+    state.stats.directVisuals += 1;
+    state.stats.proceduralPhotoEyes += 1;
+    return group;
+}
+function createProceduralRollerConveyorObject(visual, state) {
+    if (state.options.renderProceduralConveyorSides !== true &&
+        state.options.renderProceduralRollers !== true &&
+        state.options.renderProceduralMotors !== true) {
+        return undefined;
+    }
+    const properties = visual.properties;
+    if (!properties) {
+        return undefined;
+    }
+    const group = new state.three.Group();
+    group.name = `${visual.displayName ?? visual.id ?? "Roller conveyor"} generated geometry`;
+    if (state.options.renderProceduralConveyorSides === true) {
+        addConveyorSide(group, visual, properties.child("LeftSide"), "left", state);
+        addConveyorSide(group, visual, properties.child("RightSide"), "right", state);
+    }
+    if (state.options.renderProceduralRollers === true &&
+        !hasSerializedRollerGeometry(visual, state)) {
+        addProceduralRollers(group, visual, state);
+    }
+    if (state.options.renderProceduralMotors === true &&
+        properties.child("MotorVisual") &&
+        !hasRenderableMotorChild(visual, state)) {
+        addProceduralMotor(group, visual, state);
+    }
+    if (group.children.length === 0) {
+        return undefined;
+    }
+    group.userData.demo3d = {
+        kind: "procedural-roller-conveyor",
+        id: visual.id,
+        name: visual.displayName,
+        typeName: visual.typeName,
+        xmlPath: visual.xml.path
+    };
+    state.stats.groups += 1;
+    state.stats.directVisuals += 1;
+    return group;
+}
+function addConveyorSide(group, visual, sideXml, sideName, state) {
+    if (!sideXml) {
+        return;
+    }
+    const side = new Demo3DConveyorSideProperties(sideXml.xsiType ?? "e3d:ConveyorSideProperties", sideXml);
+    const profile = side.profile;
+    if (!side.visible || !profile) {
+        return;
+    }
+    const frames = conveyorSideFrames(visual, sideName);
+    if (frames.length < 2) {
+        return;
+    }
+    profile.polygons.forEach((polygon, index) => {
+        if (polygon.points.length < 3) {
+            return;
+        }
+        const geometry = getSweptProfileGeometry(profile, polygon, frames, state);
+        const materials = polygon.materials.length > 0
+            ? polygon.materials.map((material) => getMaterial(material, state))
+            : [side.material ? getMaterial(side.material, state) : state.defaultMaterial];
+        const mesh = new state.three.Mesh(geometry, materials.length === 1 ? materials[0] : materials);
+        mesh.name = `${sideName} conveyor side ${index + 1}`;
+        mesh.userData.demo3d = { kind: "procedural-conveyor-side", side: sideName };
+        group.add(mesh);
+        state.stats.meshes += 1;
+        state.stats.proceduralConveyorSides += 1;
+    });
+}
+function conveyorSideFrames(visual, side) {
+    const properties = visual.properties;
+    if (!properties) {
+        return [];
+    }
+    const width = numberChildOptional(properties, "RollerWidth") ??
+        numberChildOptional(properties, "Width") ??
+        0.5;
+    if (visual.typeName === "e3d:CurveRollerConveyor") {
+        const innerRadius = numberChild(properties, "InnerRadius", 0.5);
+        const angle = degreesToRadians(numberChild(properties, "Angle", 90));
+        const segments = Math.max(4, Math.ceil(Math.abs(angle) / (Math.PI / 24)));
+        const pathRadius = side === "left" ? innerRadius : innerRadius + width;
+        const frames = [];
+        for (let index = 0; index <= segments; index += 1) {
+            const theta = angle * (1 - index / segments);
+            frames.push({
+                center: [
+                    pathRadius * Math.cos(theta),
+                    0,
+                    pathRadius * Math.sin(theta)
+                ],
+                lateral: [Math.cos(theta), 0, Math.sin(theta)]
+            });
+        }
+        return frames;
+    }
+    const length = visual.typeName === "e3d:InjectorRollerConveyor"
+        ? Math.max(numberChild(properties, "ShortSideLength", 0), numberChild(properties, "ExtraLength", 0), numberChild(properties, "RollerPitch", 0.1))
+        : numberChild(properties, "Length", 1);
+    const z = (side === "left" ? -1 : 1) * width / 2;
+    return [
+        { center: [0, 0, z], lateral: [0, 0, 1] },
+        { center: [length, 0, z], lateral: [0, 0, 1] }
+    ];
+}
+function getSweptProfileGeometry(profile, polygon, frames, state) {
+    const pointsKey = polygon.points.map((point) => `${point.x},${point.y}`).join(";");
+    const framesKey = frames
+        .map((frame) => `${frame.center.join(",")}/${frame.lateral.join(",")}`)
+        .join(";");
+    const key = `sweep:${profile.anchor.x},${profile.anchor.y}:${polygon.materials.length}:${pointsKey}:${framesKey}`;
+    const cached = state.primitiveGeometryCache.get(key);
+    if (cached) {
+        return cached;
+    }
+    const positions = [];
+    const indices = [];
+    const pointCount = polygon.points.length;
+    for (const frame of frames) {
+        for (const point of polygon.points) {
+            const lateral = point.x - profile.anchor.x;
+            const vertical = point.y - profile.anchor.y;
+            positions.push(frame.center[0] + frame.lateral[0] * lateral, frame.center[1] + vertical, frame.center[2] + frame.lateral[2] * lateral);
+        }
+    }
+    const groups = [];
+    for (let point = 0; point < pointCount; point += 1) {
+        const start = indices.length;
+        for (let frame = 0; frame < frames.length - 1; frame += 1) {
+            const current = frame * pointCount;
+            const next = (frame + 1) * pointCount;
+            const following = (point + 1) % pointCount;
+            indices.push(current + point, next + point, current + following, current + following, next + point, next + following);
+        }
+        groups.push({
+            start,
+            count: indices.length - start,
+            materialIndex: Math.min(point, Math.max(0, polygon.materials.length - 1))
+        });
+    }
+    const shapePoints = polygon.points.map((point) => new state.three.Vector2(point.x - profile.anchor.x, point.y - profile.anchor.y));
+    const capTriangles = state.three.ShapeUtils.triangulateShape(shapePoints, []);
+    const finalOffset = (frames.length - 1) * pointCount;
+    const capStart = indices.length;
+    for (const triangle of capTriangles) {
+        indices.push(triangle[2], triangle[1], triangle[0]);
+        indices.push(finalOffset + triangle[0], finalOffset + triangle[1], finalOffset + triangle[2]);
+    }
+    const geometry = new state.three.BufferGeometry();
+    geometry.setAttribute("position", new state.three.Float32BufferAttribute(positions, 3));
+    geometry.setIndex(indices);
+    for (const group of groups) {
+        geometry.addGroup(group.start, group.count, group.materialIndex);
+    }
+    geometry.addGroup(capStart, indices.length - capStart, 0);
+    geometry.computeVertexNormals();
+    geometry.computeBoundingBox();
+    geometry.computeBoundingSphere();
+    state.primitiveGeometryCache.set(key, geometry);
+    state.stats.geometries += 1;
+    return geometry;
+}
+function addProceduralRollers(group, visual, state) {
+    const properties = visual.properties;
+    if (!properties) {
+        return;
+    }
+    const width = numberChildOptional(properties, "RollerWidth") ??
+        numberChildOptional(properties, "Width") ??
+        0.5;
+    const diameter = numberChild(properties, "RollerDiameter", 0.05);
+    const radius = diameter / 2;
+    const material = materialFromContainer(properties.child("SurfaceMaterial") ?? properties, state)
+        ?? getColorMaterial(numberChildOptional(properties, "RollerColor"), state);
+    const geometry = cachedRollerGeometry(radius, width, state);
+    if (visual.typeName === "e3d:CurveRollerConveyor") {
+        const count = Math.max(1, Math.round(numberChild(properties, "RollerCount", 1)));
+        const innerRadius = numberChild(properties, "InnerRadius", 0.5);
+        const angle = degreesToRadians(numberChild(properties, "Angle", 90));
+        const centerRadius = innerRadius + width / 2;
+        for (let index = 0; index < count; index += 1) {
+            const theta = count === 1 ? angle / 2 : angle * (1 - index / (count - 1));
+            const roller = new state.three.Mesh(geometry, material);
+            roller.name = `Generated roller ${index + 1}`;
+            roller.position.set(centerRadius * Math.cos(theta), 0, centerRadius * Math.sin(theta));
+            roller.rotation.y = Math.PI / 2 - theta;
+            roller.userData.demo3d = { kind: "procedural-roller", index };
+            group.add(roller);
+            state.stats.meshes += 1;
+            state.stats.proceduralRollers += 1;
+        }
+        return;
+    }
+    const length = visual.typeName === "e3d:InjectorRollerConveyor"
+        ? Math.max(numberChild(properties, "ShortSideLength", 0), numberChild(properties, "RollerPitch", 0.1))
+        : numberChild(properties, "Length", 1);
+    const pitch = Math.max(numberChild(properties, "RollerPitch", diameter * 1.2), diameter);
+    const explicitCount = numberChildOptional(properties, "RollerCount");
+    const count = Math.max(1, Math.round(explicitCount ?? length / pitch));
+    for (let index = 0; index < count; index += 1) {
+        const roller = new state.three.Mesh(geometry, material);
+        roller.name = `Generated roller ${index + 1}`;
+        roller.position.x = ((index + 0.5) / count) * length;
+        roller.userData.demo3d = { kind: "procedural-roller", index };
+        group.add(roller);
+        state.stats.meshes += 1;
+        state.stats.proceduralRollers += 1;
+    }
+}
+function cachedRollerGeometry(radius, width, state) {
+    const key = `roller:${radius}:${width}`;
+    const cached = state.primitiveGeometryCache.get(key);
+    if (cached) {
+        return cached;
+    }
+    const geometry = new state.three.CylinderGeometry(radius, radius, width, 16);
+    geometry.rotateX(Math.PI / 2);
+    geometry.computeBoundingBox();
+    geometry.computeBoundingSphere();
+    state.primitiveGeometryCache.set(key, geometry);
+    state.stats.geometries += 1;
+    return geometry;
+}
+function addProceduralMotor(group, visual, state) {
+    const properties = visual.properties;
+    if (!properties) {
+        return;
+    }
+    const width = numberChildOptional(properties, "RollerWidth") ??
+        numberChildOptional(properties, "Width") ??
+        0.5;
+    const length = numberChildOptional(properties, "Length") ?? 0.2;
+    const diameter = numberChild(properties, "RollerDiameter", 0.05);
+    const size = Math.max(diameter * 1.6, 0.06);
+    const geometry = cachedBoxGeometry(size * 1.4, size, size, state);
+    const motor = new state.three.Mesh(geometry, getColorMaterial(0xff303840 | 0, state));
+    motor.name = "Generated conveyor motor";
+    motor.position.set(length * 0.75, -size / 2, width / 2 + size / 2);
+    motor.userData.demo3d = { kind: "procedural-conveyor-motor", approximate: true };
+    group.add(motor);
+    state.stats.meshes += 1;
+    state.stats.proceduralMotors += 1;
+}
+function hasSerializedRollerGeometry(visual, state) {
+    const stack = [...visual.children];
+    while (stack.length > 0) {
+        const current = stack.pop();
+        if (!current) {
+            continue;
+        }
+        const displayName = current.displayName?.toLowerCase() ?? "";
+        const propertyType = current.properties?.textOf("Type")?.toLowerCase() ?? "";
+        const isRoller = propertyType === "displayroller" || /^roller(?:\d+)?$/.test(displayName);
+        if (isRoller &&
+            findVisualAspects(current, state).some((aspect) => aspect.xsiType === "e3d:CylinderRendererAspect")) {
+            return true;
+        }
+        stack.push(...current.children);
+    }
+    return false;
+}
+function hasRenderableMotorChild(visual, state) {
+    return visual.children.some((child) => {
+        const name = child.displayName?.toLowerCase() ?? "";
+        return (name.includes("motor") || name.includes("transmission")) && findVisualAspects(child, state).length > 0;
+    });
+}
+function materialFromContainer(root, state) {
+    if (!root || !state) {
+        return undefined;
+    }
+    const material = firstMaterial(root);
+    return material ? getMaterial(material, state) : undefined;
+}
+function cachedBoxGeometry(width, height, depth, state) {
+    const key = `box:${width}:${height}:${depth}`;
+    const cached = state.primitiveGeometryCache.get(key);
+    if (cached) {
+        return cached;
+    }
+    const geometry = new state.three.BoxGeometry(width, height, depth);
+    state.primitiveGeometryCache.set(key, geometry);
+    state.stats.geometries += 1;
+    return geometry;
+}
+function isRollerConveyorType(typeName) {
+    return (typeName === "e3d:StraightRollerConveyor" ||
+        typeName === "e3d:CurveRollerConveyor" ||
+        typeName === "e3d:InjectorRollerConveyor");
+}
 function createImportedImageObject(visual, state) {
     const properties = visual.properties;
     if (!properties) {
@@ -747,13 +1279,16 @@ function getPrimitiveGeometry(aspect, renderable, state) {
     let geometry;
     if (type === "e3d:CylinderRendererAspect") {
         const radius = numberChild(renderable, "Radius", 0.5);
+        const innerRadius = numberChild(renderable, "InnerRadius", 0);
         const radiusRatio = numberChild(renderable, "RadiusRatio", 1);
         const coneRatio = numberChild(renderable, "ConeRatio", 1);
         const length = numberChild(renderable, "Length", 1);
         const slices = Math.max(3, Math.round(numberChild(renderable, "Slices", 16)));
         const startAngle = degreesToRadians(numberChild(renderable, "StartAngle", 0));
         const angle = degreesToRadians(numberChild(renderable, "Angle", 360));
-        geometry = new state.three.CylinderGeometry(radius * radiusRatio, radius * coneRatio, length, slices, 1, false, startAngle, angle);
+        geometry = innerRadius > 0 && innerRadius < Math.min(radius * radiusRatio, radius * coneRatio)
+            ? createAnnularCylinderGeometry(radius * radiusRatio, radius * coneRatio, innerRadius, length, slices, startAngle, angle, state)
+            : new state.three.CylinderGeometry(radius * radiusRatio, radius * coneRatio, length, slices, 1, false, startAngle, angle);
     }
     else if (type === "e3d:BoxRendererAspect") {
         geometry = new state.three.BoxGeometry(numberChild(renderable, "Width", 1), numberChild(renderable, "Height", 1), numberChild(renderable, "Depth", 1));
@@ -771,12 +1306,71 @@ function getPrimitiveGeometry(aspect, renderable, state) {
     state.stats.geometries += 1;
     return geometry;
 }
+function createAnnularCylinderGeometry(topRadius, bottomRadius, innerRadius, length, slices, startAngle, angle, state) {
+    const positions = [];
+    const halfLength = length / 2;
+    const fullCircle = Math.abs(angle) >= Math.PI * 2 - 1e-6;
+    const segments = Math.max(1, Math.round(slices * Math.abs(angle) / (Math.PI * 2)));
+    const point = (radius, y, theta) => [
+        radius * Math.sin(theta),
+        y,
+        radius * Math.cos(theta)
+    ];
+    const addTriangle = (a, b, c, normal) => {
+        const abx = b[0] - a[0];
+        const aby = b[1] - a[1];
+        const abz = b[2] - a[2];
+        const acx = c[0] - a[0];
+        const acy = c[1] - a[1];
+        const acz = c[2] - a[2];
+        const crossX = aby * acz - abz * acy;
+        const crossY = abz * acx - abx * acz;
+        const crossZ = abx * acy - aby * acx;
+        const forward = crossX * normal[0] + crossY * normal[1] + crossZ * normal[2] >= 0;
+        const second = forward ? b : c;
+        const third = forward ? c : b;
+        positions.push(...a, ...second, ...third);
+    };
+    const addQuad = (a, b, c, d, normal) => {
+        addTriangle(a, b, c, normal);
+        addTriangle(a, c, d, normal);
+    };
+    for (let segment = 0; segment < segments; segment += 1) {
+        const theta0 = startAngle + angle * (segment / segments);
+        const theta1 = startAngle + angle * ((segment + 1) / segments);
+        const middle = (theta0 + theta1) / 2;
+        const outerBottom0 = point(bottomRadius, -halfLength, theta0);
+        const outerBottom1 = point(bottomRadius, -halfLength, theta1);
+        const outerTop0 = point(topRadius, halfLength, theta0);
+        const outerTop1 = point(topRadius, halfLength, theta1);
+        const innerBottom0 = point(innerRadius, -halfLength, theta0);
+        const innerBottom1 = point(innerRadius, -halfLength, theta1);
+        const innerTop0 = point(innerRadius, halfLength, theta0);
+        const innerTop1 = point(innerRadius, halfLength, theta1);
+        addQuad(outerBottom0, outerBottom1, outerTop1, outerTop0, [Math.sin(middle), 0, Math.cos(middle)]);
+        addQuad(innerBottom0, innerTop0, innerTop1, innerBottom1, [-Math.sin(middle), 0, -Math.cos(middle)]);
+        addQuad(outerTop0, outerTop1, innerTop1, innerTop0, [0, 1, 0]);
+        addQuad(outerBottom0, innerBottom0, innerBottom1, outerBottom1, [0, -1, 0]);
+    }
+    if (!fullCircle) {
+        const direction = Math.sign(angle) || 1;
+        const endAngle = startAngle + angle;
+        addQuad(point(innerRadius, -halfLength, startAngle), point(innerRadius, halfLength, startAngle), point(topRadius, halfLength, startAngle), point(bottomRadius, -halfLength, startAngle), [-direction * Math.cos(startAngle), 0, direction * Math.sin(startAngle)]);
+        addQuad(point(innerRadius, -halfLength, endAngle), point(bottomRadius, -halfLength, endAngle), point(topRadius, halfLength, endAngle), point(innerRadius, halfLength, endAngle), [direction * Math.cos(endAngle), 0, -direction * Math.sin(endAngle)]);
+    }
+    const geometry = new state.three.BufferGeometry();
+    geometry.setAttribute("position", new state.three.Float32BufferAttribute(positions, 3));
+    geometry.computeVertexNormals();
+    return geometry;
+}
 function primitiveGeometryKey(type, renderable) {
     const fields = [
         "Angle",
         "ConeRatio",
+        "CurveRadius",
         "Depth",
         "Height",
+        "InnerRadius",
         "Length",
         "Radius",
         "RadiusRatio",
@@ -791,7 +1385,13 @@ function getMaterial(material, state) {
         return state.defaultMaterial;
     }
     const textureReference = material.textureReference;
-    const key = `${String(material.diffuse ?? "default")}:${textureReference ?? ""}`;
+    const key = [
+        "material",
+        String(material.diffuse ?? "default"),
+        String(material.transparency ?? 0),
+        String(material.reflectivity ?? 0),
+        textureReference ?? ""
+    ].join(":");
     const cached = state.materialCache.get(key);
     if (cached) {
         return cached;
@@ -799,26 +1399,55 @@ function getMaterial(material, state) {
     const created = createDemo3DThreeMaterial(material, state.three);
     const texture = textureReference ? getTexture(textureReference, state) : undefined;
     if (texture && "map" in created) {
-        created.map = texture;
+        const standard = created;
+        standard.map = texture;
+        if (textureReference && state.textureImageById.get(textureReference)?.containsAlpha) {
+            standard.transparent = true;
+            standard.depthWrite = false;
+        }
         created.needsUpdate = true;
     }
     state.materialCache.set(key, created);
     state.stats.materials += 1;
     return created;
 }
+function getColorMaterial(color, state) {
+    if (color === undefined) {
+        return state.defaultMaterial;
+    }
+    const opacity = demo3dColorToOpacity(color);
+    const key = `color:${color}:${opacity}`;
+    const cached = state.materialCache.get(key);
+    if (cached) {
+        return cached;
+    }
+    const created = new state.three.MeshStandardMaterial({
+        color: demo3dColorToHex(color),
+        opacity,
+        transparent: opacity < 1,
+        depthWrite: opacity >= 1,
+        roughness: 0.9,
+        metalness: 0.05
+    });
+    state.materialCache.set(key, created);
+    state.stats.materials += 1;
+    return created;
+}
 function getImageMaterial(material, state) {
     const diffuse = material?.diffuse;
+    const opacity = demo3dMaterialOpacity(material);
     const textureReference = material?.textureReference;
     const texture = textureReference ? getTexture(textureReference, state) : undefined;
-    const key = `image:${String(diffuse ?? "default")}:${textureReference ?? ""}`;
+    const key = `image:${String(diffuse ?? "default")}:${String(material?.transparency ?? 0)}:${textureReference ?? ""}`;
     const cached = state.materialCache.get(key);
     if (cached) {
         return cached;
     }
     const parameters = {
         color: diffuse === undefined ? 0xffffff : demo3dColorToHex(diffuse),
-        transparent: texture !== undefined || demo3dColorToOpacity(diffuse ?? 0xffffffff) < 1,
-        opacity: diffuse === undefined ? 1 : demo3dColorToOpacity(diffuse),
+        transparent: texture !== undefined || opacity < 1,
+        opacity,
+        depthWrite: texture === undefined && opacity >= 1,
         side: state.three.DoubleSide
     };
     if (texture) {
@@ -901,12 +1530,18 @@ function createFallbackTextMesh(text, lineHeight, material, state) {
 }
 function getLineMaterial(material, state) {
     const color = material?.diffuse === undefined ? 0x202124 : demo3dColorToHex(material.diffuse);
-    const key = `line:${color}`;
+    const opacity = demo3dMaterialOpacity(material);
+    const key = `line:${color}:${opacity}`;
     const cached = state.materialCache.get(key);
     if (cached) {
         return cached;
     }
-    const created = new state.three.LineBasicMaterial({ color });
+    const created = new state.three.LineBasicMaterial({
+        color,
+        opacity,
+        transparent: opacity < 1,
+        depthWrite: opacity >= 1
+    });
     state.materialCache.set(key, created);
     state.stats.materials += 1;
     return created;
@@ -987,7 +1622,8 @@ function indexTextureImages(project) {
             base64: bytes,
             mimeType: imageMimeType(bytes),
             width: numberChildOptional(value, "Width"),
-            height: numberChildOptional(value, "Height")
+            height: numberChildOptional(value, "Height"),
+            containsAlpha: isTrue(value?.textOf("ContainsAlpha"))
         });
     }
     return indexed;
@@ -1033,9 +1669,12 @@ function findVisualAspects(visual, state) {
         }
         const aspect = state.serializedObjectById.get(id);
         if (aspect) {
-            found.push(aspect);
+            if (!isFalse(aspect.textOf("IsEnabled"))) {
+                found.push(aspect);
+            }
+            continue;
         }
-        else if (state.options.includeUnsupported) {
+        if (state.options.includeUnsupported) {
             warn(state, {
                 code: "DEMO3D_THREE_MISSING_ASPECT",
                 message: `Visual aspect ${id} does not exist in SerializedObjects.`,
@@ -1112,6 +1751,125 @@ function positionSerializedPreviewMesh(mesh, index) {
     mesh.scale.setScalar(scale);
     mesh.position.set(gridX - center.x * scale, -center.y * scale, gridZ - center.z * scale);
 }
+function createDimensionGroup(state) {
+    const group = new state.three.Group();
+    group.name = "Demo3D dimensions";
+    for (const xml of state.serializedObjectById.values()) {
+        if (xml.xsiType !== "e3d:DimensionAspect") {
+            continue;
+        }
+        const dimension = createDimensionObject(new Demo3DDimensionAspect(xml.xsiType, xml), state);
+        if (dimension) {
+            group.add(dimension);
+        }
+    }
+    if (group.children.length > 0) {
+        group.userData.demo3d = { kind: "dimensions" };
+        state.stats.groups += 1;
+    }
+    return group;
+}
+function createDimensionObject(dimension, state) {
+    const start = dimensionPointToWorld(dimension.start, state);
+    const end = dimensionPointToWorld(dimension.end, state);
+    if (!start || !end) {
+        return undefined;
+    }
+    const extensionValues = dimension.extensionDirection;
+    const extension = new state.three.Vector3(extensionValues[0] ?? 0, extensionValues[1] ?? 1, -(extensionValues[2] ?? 0));
+    if (extension.lengthSq() === 0) {
+        extension.set(0, 1, 0);
+    }
+    extension.normalize().multiplyScalar(dimension.height);
+    const lineStart = start.clone().add(extension);
+    const lineEnd = end.clone().add(extension);
+    const positions = [];
+    pushVectorLine(positions, start, lineStart);
+    pushVectorLine(positions, end, lineEnd);
+    pushVectorLine(positions, lineStart, lineEnd);
+    const direction = lineEnd.clone().sub(lineStart);
+    const distance = direction.length();
+    if (distance > 0) {
+        direction.normalize();
+        const normal = extension.clone().normalize();
+        const perpendicular = new state.three.Vector3().crossVectors(direction, normal);
+        if (perpendicular.lengthSq() === 0) {
+            perpendicular.set(0, 0, 1);
+        }
+        perpendicular.normalize();
+        const startArrow = dimensionArrowSize(dimension.startArrow, distance);
+        const endArrow = dimensionArrowSize(dimension.endArrow, distance);
+        const startDirection = dimension.arrowsInside ? direction : direction.clone().negate();
+        const endDirection = dimension.arrowsInside ? direction.clone().negate() : direction;
+        addDimensionArrow(positions, lineStart, startDirection, perpendicular, startArrow.length, startArrow.width);
+        addDimensionArrow(positions, lineEnd, endDirection, perpendicular, endArrow.length, endArrow.width);
+    }
+    const geometry = new state.three.BufferGeometry();
+    geometry.setAttribute("position", new state.three.Float32BufferAttribute(positions, 3));
+    geometry.computeBoundingBox();
+    geometry.computeBoundingSphere();
+    const object = new state.three.Group();
+    const lines = new state.three.LineSegments(geometry, getLineMaterial(dimension.material, state));
+    lines.name = "Dimension lines";
+    object.add(lines);
+    if (distance > 0) {
+        const label = distance.toFixed(3);
+        const color = demo3dColorToHex(dimension.material?.diffuse ?? -16777216);
+        const lineHeight = clamp(distance * 0.035, 0.025, 0.12);
+        const text = canUseCanvas()
+            ? createCanvasTextMesh(label, lineHeight, color, false, state)
+            : createFallbackTextMesh(label, lineHeight, dimension.material, state);
+        text.position.copy(lineStart).lerp(lineEnd, 0.5).add(extension.clone().normalize().multiplyScalar(lineHeight));
+        text.name = `Dimension ${label}`;
+        object.add(text);
+        state.stats.meshes += 1;
+    }
+    object.name = dimension.id ?? "Dimension";
+    object.userData.demo3d = {
+        kind: "dimension",
+        id: dimension.id,
+        distance,
+        unit: dimension.unit,
+        format: dimension.format,
+        arrowsInside: dimension.arrowsInside,
+        flipText: dimension.flipText,
+        lockDirection: dimension.lockDirection,
+        depth: dimension.depth,
+        xmlPath: dimension.xml.path
+    };
+    state.stats.geometries += 1;
+    state.stats.lines += positions.length / 6;
+    state.stats.groups += 1;
+    state.stats.dimensions += 1;
+    return object;
+}
+function dimensionArrowSize(profile, distance) {
+    const points = profile?.polygons.flatMap((polygon) => polygon.points) ?? [];
+    const anchorX = profile?.anchor.x ?? 0;
+    const anchorY = profile?.anchor.y ?? 0;
+    const profileLength = points.reduce((largest, point) => Math.max(largest, Math.abs(point.y - anchorY)), 0);
+    const profileWidth = points.reduce((largest, point) => Math.max(largest, Math.abs(point.x - anchorX)), 0);
+    const fallbackLength = clamp(distance * 0.04, 0.02, 0.08);
+    const length = profileLength > 0 ? Math.min(profileLength, distance * 0.25) : fallbackLength;
+    const width = profileWidth > 0 ? Math.min(profileWidth, distance * 0.125) : length * 0.45;
+    return { length, width };
+}
+function dimensionPointToWorld(point, state) {
+    if (!point) {
+        return undefined;
+    }
+    const local = new state.three.Vector3(point.point[0] ?? 0, point.point[1] ?? 0, -(point.point[2] ?? 0));
+    const visual = point.visualId ? state.visualObjectById.get(point.visualId) : undefined;
+    return visual ? visual.localToWorld(local) : local;
+}
+function pushVectorLine(positions, start, end) {
+    positions.push(start.x, start.y, start.z, end.x, end.y, end.z);
+}
+function addDimensionArrow(positions, tip, direction, perpendicular, length, width) {
+    const base = tip.clone().addScaledVector(direction, length);
+    pushVectorLine(positions, tip, base.clone().addScaledVector(perpendicular, width));
+    pushVectorLine(positions, tip, base.clone().addScaledVector(perpendicular, -width));
+}
 function createPlaceholderMesh(name, meshReferenceId, material, state) {
     const geometry = new state.three.BoxGeometry(0.25, 0.25, 0.25);
     convertTriangleGeometryToThreeCoordinates(geometry);
@@ -1208,7 +1966,20 @@ function demo3dColorToHex(color) {
 }
 function demo3dColorToOpacity(color) {
     const alpha = (color >>> 24) & 0xff;
-    return alpha === 0 ? 1 : alpha / 255;
+    return alpha / 255;
+}
+function demo3dMaterialOpacity(material) {
+    const colorOpacity = material?.diffuse === undefined
+        ? 1
+        : demo3dColorToOpacity(material.diffuse);
+    const transparency = clamp01(material?.transparency ?? 0);
+    return colorOpacity * (1 - transparency);
+}
+function clamp01(value) {
+    return clamp(value, 0, 1);
+}
+function clamp(value, minimum, maximum) {
+    return Math.min(maximum, Math.max(minimum, value));
 }
 function applyDemo3DTransform(object, transformText) {
     const values = parsePipeNumbers(transformText);