XBIM Web Viewer - Calculate HTML position from WCS

Question

I'm trying to put an overlay over the top face of the bounding box of selected object. What I'm doing is:

1- Get the vertices of the bounding box top face in WCS, from center point

2- Translate each vertices into point in HTML space

3- Put a div at the point in HTML space

However, only the center point is correct, other vertices are off. Like in the screenshot, the blue floor is the selected object.

Here is the code:

// Translate a point from WCS to HTML space
    public getHTMLPosition(position: vec3) : number[] {
        // transformation matrix from projection pMatrix and view mvMatrix
        const transform = mat4.multiply(mat4.create(), this.pMatrix, this.mvMatrix);
        // apply transform to position
        const glPosition = vec3.transformMat4(vec3.create(), position, transform);
        const glX = glPosition[0];
        const glY = glPosition[1];

        // translate from 0-1 space to html pixel position
        const htmlX = (glX + 1) / 2.0 * this.width;
        const htmlY = this.height - (glY + 1) / 2.0 * this.height;

        return [htmlX, htmlY]
    }

document['getHTML'] = () => {
    const elements = viewer.getProductsWithState(State.HIGHLIGHTED);
    if (elements !== null) {
        const bbox = viewer.getProductBoundingBox(elements[0].id, elements[0].model);
        const center = BBox.centre(bbox);

        const wcs = viewer.getCurrentWcs();

        const boxInView = BBox.getSizeInView(bbox, cameraDir, cameraUp);

        const upleftLocal = vec3.fromValues(bbox[0], bbox[4], bbox[5]);
        const uprightLocal = vec3.fromValues(bbox[3], bbox[4], bbox[5]);
        const downleftLocal = vec3.fromValues(bbox[0], bbox[1], bbox[5]);
        const downrightLocal = vec3.fromValues(bbox[3], bbox[1], bbox[5]);

        const upleft = vec3.add(vec3.create(), upleftLocal, wcs);
        const upright = vec3.add(vec3.create(), uprightLocal, wcs);
        const downleft = vec3.add(vec3.create(), downleftLocal, wcs);
        const downright = vec3.add(vec3.create(), downrightLocal, wcs);
       
        const glCoords = [upleft, upright, downleft, downright, vec3.fromValues(center[0], center[1], center[2])];

        glCoords.forEach((c, index) => {
            const htmlCoord = viewer.getHTMLPosition(c);
            const cube = document.createElement('div');
            document.body.appendChild(cube);
            cube.setAttribute("class", `cube${index}`);
            cube.style.backgroundColor = 'red';
            cube.style.position = 'absolute';
            cube.style.width = '20px';
            cube.style.height = '20px';
            cube.style.borderRadius = '30px';
            cube.style.left = `${htmlCoord[0] - 10}px`;
            cube.style.top = `${htmlCoord[1] - 10}px`;
        });
    }
}

score 0 · Answer 1 · answered Jan 07 '22 at 07:58

Turns out I mistook how BBox are stored.

0, 1, 2 are x, y, z of minPoint.

3, 4, 5 are width, height, depth.

So the resulting points should be:

const upleftLocal = vec3.fromValues(
  bbox[0],
  bbox[1] + bbox[4],
  bbox[2] + bbox[5]
);
const uprightLocal = vec3.fromValues(
  bbox[0] + bbox[3],
  bbox[1] + bbox[4],
  bbox[2] + bbox[5]
);
const downleftLocal = vec3.fromValues(bbox[0], bbox[1], bbox[2] + bbox[5]);
const downrightLocal = vec3.fromValues(
  bbox[0] + bbox[3],
  bbox[1],
  bbox[2] + bbox[5]
);

XBIM Web Viewer - Calculate HTML position from WCS

1 Answers1