Interface InfiniteEngineInterface

The InfiniteEngineInterface interface is used to render the content of the DMU.

The usage is very basic :

• create an InfiniteEngineInterface connected to a MetadataManagerInterface.
• connect it to a DOMElement.
• change the way geometric instances are rendered.

WARNING : There is no automatic conversion of the content of FilterSolverInterface to the 3D engine. It is the role of the web application to show/hide/ghost geometries depending on the application needs.

Initialization.

The InfiniteEngineInterface is initialized from a MetadataManagerInterface by an InfiniteFactory.
The InfiniteEngineInterface takes advantage of the MetadataManagerInterface connected to a DataSessionInterface. The use of the InfiniteEngineInterface is only relevant when a DataSessionInterface is connected to a 3djuump infinite build.

/** 
 * Sample to illustrate the initialization of an InfiniteEngineInterface.
 */
import { InfiniteEngineInterface, InfiniteFactory, InfiniteEngineInterfaceSignal, MetadataManagerInterface, tListenerCallback } from 'generated/documentation/appinfiniteapi';

// created previously
let lMetadataManager : MetadataManagerInterface;
// the callback when a pick request is completed
let onPicking : tListenerCallback;

// create an infinite engine
const lInfiniteEngine : InfiniteEngineInterface = InfiniteFactory.CreateInfiniteEngine(lMetadataManager);
// get the html element that will host the 3d rendering
const lView3D: HTMLElement = <HTMLElement>document.getElementById('rendering');
// bind the rendering to the given div
lInfiniteEngine.setView(lView3D);
// and use anti-aliasing => smoother
lInfiniteEngine.enableAntiAliasing(true);
// register the callback for pick result
lInfiniteEngine.addEventListener(InfiniteEngineInterfaceSignal.Picked, onPicking);

Creation of an InfiniteEngineInterface.

Rendering.

The InfiniteEngineInterface display is governed by a resource controller. Indeed, the display is based on some low definition rendering of the DMU, and HD geometric data rendered on top of it. The amount of acceptable data is governed by the PerformanceInterface that provides a way to set the budgets. Such budgets rely heavily on the hardware of the end-user. It is recommended to allow the end-user to manipulate such budgets.
The low definition version of the DMU is composed of a static version (not configurable), and a dynamic one, whom triangle number can be configured.

/** 
 * Sample to illustrate setting some performance settings of the InfiniteEngineInterface 
 * by using the PerformanceInterface.
 */
import { MetadataManagerInterface, PerformanceInterface } from 'generated/documentation/appinfiniteapi';

// created previously
let lMetadataManager : MetadataManagerInterface;
// get the performance interface
const lPerformanceInfos : PerformanceInterface = lMetadataManager.getPerformanceInfos();

// reset the number of triangles to display in the dynamic low definition DMU
lPerformanceInfos.setMaxNbDynamicLowDefTrianglesDisplayed(lPerformanceInfos.GetMaxDynamicLowDefTrianglesDefault());
// reset the number of total triangles to be displayed
lPerformanceInfos.setMaxNbTrianglesDisplayed(lPerformanceInfos.GetMaxTrianglesDefault());
// reset the VRAM (RAM on the GPU) amount to be used 
lPerformanceInfos.setMaxRenderingMemory(lPerformanceInfos.GetMaxRenderingMemoryDefault());
// reset the RAM to use when downloading data (if geometries are too big, less geometries will be downloaded at the same time)
lPerformanceInfos.setMaxWorkingMemory(lPerformanceInfos.GetMaxWorkingMemoryDefault());

The state of the resource controller (ok, out of budget, running) is retrieved from [getResourceLoadingState](InfiniteEngineInterface.html#getResourceLoadingState) and the [LoadingStates](../enums/LoadingStates.html) enumeration.

 /** 
 * Sample to illustrate getting the loading state (updating, ok, out of budget) of the InfiniteEngineInterface.
 */
import { InfiniteEngineInterface, LoadingStates } from 'generated/documentation/appinfiniteapi';

// created previously
let lInfiniteEngine : InfiniteEngineInterface;
// gets the loading state of the resource controller when the DMU has been loaded
const lLoadingState : LoadingStates = lInfiniteEngine.getResourceLoadingState();
// and output its value
console.log('current loading state ' + lLoadingState)

An optional [InfiniteCacheInterface](InfiniteCacheInterface.html) may be included in the [DataSessionInterface](DataSessionInterface.html) upon creation to speed up the retrieving of HD geometric data.

Geometric instances are accessed through their geometric instance ids, and each geometric instance may be :

• Hidden : object is not displayed.
• Selected : objet is rendered in a pulsing orange.
• Ghosted : the object is rendered semi transparent in a light blue color.
• Ignore cut plane : object cannot be hidden by a cut plane.

Such a state is a bit field, and bits can be changed in a batch for multiple geometric instances.
Use VisualStates with updateGeometricState, getGeometricState and updateGeometricStateForAll functions to change the way geometries are rendered. The visibility is coded on a 8 bits unsigned number.

In the following examples, x represent an irrelevant bit :

/** 
 * Sample to illustrate how to change the visibility of a set of `geometric instances`.
 */
import { InfiniteEngineInterface, VisualStates } from 'generated/documentation/appinfiniteapi';

// created previously
let lInfiniteEngine : InfiniteEngineInterface;

// 8 bits for visibility
// sets all instances visible and not ghosted (do not care about "x" values)
//                      Mask                            => xxxx 1101
//
//                      not ghosted                     => xxxx x0xx
//                      not hidden (visible)            => xxxx 0xx0
// we want to set                                       => xxxx 00x0
// we can use 0 for values !!!!
lInfiniteEngine.updateGeometricStateForAll(VisualStates.S_Ghost | VisualStates.S_Hidden, 0);

// sets 2 instances hidden, but clear the ghost for them, and clear selection
//                      Mask                            => xxxx 1111
//
//                      not ghosted                     => xxxx x0xx
//                      hidden                          => xxxx 1xx1
//                      not selected                    => xxxx xx0x
// we want to set                                       => xxxx 1001
// we can use VisualStates.S_Hidden for values !!!!
const lCurrentGeometries : Uint32Array = new Uint32Array(2);
lCurrentGeometries[0] = 57;
lCurrentGeometries[1] = 64;
lInfiniteEngine.updateGeometricState(lCurrentGeometries, VisualStates.S_Ghost | VisualStates.S_Hidden | VisualStates.S_Selected, VisualStates.S_Hidden);

The color of each `geometric instance` can be modified with the use of the [MaterialManagerInterface](MaterialManagerInterface.html) accessed through [getMaterialManager](InfiniteEngineInterface.html#getMaterialManager). The [MaterialManagerInterface](MaterialManagerInterface.html) stores the properties of the default and user defined materials.
It is recommended to reuse (if possible) user defined materials since only a limited number of materials can be created. Materials are accessed by their id (a positive number). Colors are defined as a [Vector3](../classes/Vector3.html), `x` being the red component, `y` being the green component, `z` the blue component in the `[0:1]` range (e.g `[1,0,0]` is pure red, `[0,1,0]` is pure green, ...).

/** 
 * Sample to illustrate the change of colors of `geometric instance` (MaterialManagerInterface).
 */
import { InfiniteEngineInterface, MaterialManagerInterface, Vector3 } from 'generated/documentation/appinfiniteapi';

// created previously
let lInfiniteEngine : InfiniteEngineInterface;
// the `geometric instance id` to check
let lGeometricInstanceId : number;
// get the material manager
const lMaterialManager : MaterialManagerInterface = lInfiniteEngine.getMaterialManager();

// warning, in case of multi materials, multiple materials may be retrieved
const lNbMaterials : number = lMaterialManager.getOriginalNbMaterialsOfInstance(lGeometricInstanceId);
const lOriginalMaterials : number[] = [];

if ((!lMaterialManager.getOriginalMaterialsOfInstance(lGeometricInstanceId, lOriginalMaterials)) || (lOriginalMaterials.length === 0))
{
    console.log('Error while fetching original materials');
}
console.assert(lNbMaterials === (lOriginalMaterials.length));

// get the diffuse color of the given `geometric instance`
const lOriginalColor : Vector3 = new Vector3();
if (!lMaterialManager.getMaterialDiffuse(lOriginalMaterials[0], lOriginalColor))
{
    console.log('Error while fetching original material color')
}

// colors are expressed as Vector3 red,green,blue (in this order), in the range [0:1]
// 
const lGreenColor : Vector3 = new Vector3(0, 1, 0);
const lRedColor : Vector3 = new Vector3(1, 0, 0);
const lBlueColor : Vector3 = new Vector3(0, 0, 1);
const lWhiteColor : Vector3 = new Vector3(1, 1, 1);

// create an array of colors to cycle through
const lColors : Vector3 [] = [lGreenColor, lRedColor, lBlueColor, lWhiteColor];
// where are we in the array ?
let lCurrentColorOffset : number = 0;

// create a custom material, but instead of creating multiple materials, use one and 
// modify it
const lCustomMaterialId : number = lMaterialManager.createNewMaterial(lRedColor);

// callback to be called on mouse down
const onChangeMaterial = () : void =>
{
    // should we set a color or restore it ?
    if (lCurrentColorOffset < lColors.length)
    {
        // modify the custom material
        lMaterialManager.modifyMaterial(lCustomMaterialId, lColors[lCurrentColorOffset]);
        if (lMaterialManager.getMaterialOfInstance(lGeometricInstanceId) !== lCustomMaterialId)
        {
            // and change the current material if relevant
            lMaterialManager.changeMaterialOfInstance(lGeometricInstanceId, lCustomMaterialId);
        }
        // next color for next time
        ++lCurrentColorOffset;
    }
    else
    {
        // we should restore the material for the element
        if (lMaterialManager.getMaterialOfInstance(lGeometricInstanceId) === lCustomMaterialId)
        {
            // but only if relevant
            lMaterialManager.restoreOriginalMaterialOfInstance(lGeometricInstanceId);
        }
        // go back to the start of tests
        lCurrentColorOffset = 0;
    }
}

// when should we change the colors of the given `geometric instance` ?
// => mouse down
document.addEventListener('mousedown', onChangeMaterial);

Changing materials.

Picking.

The "picking" is the action to get the visible item under a specific position in the 3d view. The picking is dependant on the state of the resource controller, i.e. querying multiple picks at the same location without changing the camera position may result in different results, depending on the loaded data.

The picking is asynchronous, meaning a Picked signal is triggered when the result is available, with an attachment of the PickingAttachment type, which stores for each picked object :

• its id (geometric instance id/point id/line id/box id).
• its closest 3D position (a virtual ray is casted on the scene for each picking position, the resulting point is the closest point of the set of the intersection of these rays and the object).
• the number of times this object is intersected (minimum one).
• the picking request id (please see getLastPickingRequestId).

Multiple pick requests can be queued, calling multiple times pickAt without waiting for the result will trigger multiple Picked events, they can be distinguished with their picking request ids (getLastPickingRequestId and pickingRequestId).
Geometric instances, lines, boxes, and points are queried at the same time on a single pick request (see PrimitiveManagerLineInterface, PrimitiveManagerBoxInterface, PrimitiveManagerPointInterface). The pickRay and projectToScreen functions may be used with the pick functions to make some more 3D calculations. You may pick a single point (pickAt), a rectangular area (pickRect), or the 3D that intersects a 3D ray. There are some limitations to the 3D ray pick :

• The ray must be oriented toward the direction of the camera (the dot vector between the direction of the camera and the direction of the ray must be positive).
• Only 3D elements actually rendered may be picked (no ray pick outside the frustum).
• The pick ray algorithm rely on the projection of the surfaces to the near plane, objects that are less than 2 pixels wide and 2 pixels high cannot be picked.

The picking system works with client coordinates :

• x between 0 and clientWidth-1.
• y between 0 and clientHeight-1.

The actual picked point follows the following convention :
The PrimitiveManagerRubberBandInterface can be used to display a rectangular area on top of the 3d rendering element.

/** 
 * Sample to illustrate the handling of a mouse pick in an InfiniteEngineInterface.
 */
import { InfiniteEngineInterface, InfiniteFactory, MetadataManagerInterface, PickingAttachment, PickingAttachmentItem, Vector3, VisualStates, InfiniteEngineInterfaceSignal, Rectangle, InfiniteEvent, PrimitiveManagerInterface } from 'generated/documentation/appinfiniteapi';

// created previously
let lMetadataManager : MetadataManagerInterface;
// the div to render to
let lView3D: HTMLElement;

// create an 3D engine
const lInfiniteEngine: InfiniteEngineInterface = InfiniteFactory.CreateInfiniteEngine(lMetadataManager);

// What to do on pick ?
let onButtonClicked : (pEvent) => void = undefined;

// What to do on pick ?
let onPicking : (pEvent : InfiniteEvent, _pCallbackData) => void = undefined;

// We pick a rectangle if big enough, else only a point
let pickAtImpl : () => void = undefined;

// bind the 3D rendering to the div
lInfiniteEngine.setView(lView3D);

// ####################################################################################################################################
// ############################################ PICKING ###############################################################################
// ####################################################################################################################################
// Used to copy the relevant portion of a MouseEvent
// position, previous buttons, current button and type 
// store also if we started showing the rubber band
interface EventPos
{
    x : number;
    y : number;
    buttons : number;
    button : number;
    type : string;
    // is the rubber band initialized, i.e. have we begun to draw a rectangle ?
    rubberInit : boolean;
}
// store the last click to know the extent of the rectangle to pick, and after pick request
// to know the properties of the pick request
// we store a copy of the MouseEvent 
const lLastClickEvent: EventPos = {
    x: 0,
    y: 0,
    buttons: 0,
    button: 0,
    type: '',
    rubberInit: false,
};

// What to do on pick ?
onPicking = (pEvent : InfiniteEvent, _pCallbackData) : void =>
{
    const lAttachment: PickingAttachment = <PickingAttachment>pEvent.attachments;
    // care only about 3d geometries (no line, point, box)
    const l3dAttachment: PickingAttachmentItem[] | undefined = lAttachment.geometric;

    let lFirstGeometricId: number = 0;
    let l3dPosition: Vector3 | undefined = undefined;
    if (l3dAttachment !== undefined && l3dAttachment.length > 0)
    {
        lFirstGeometricId = l3dAttachment[0].instanceId;
        l3dPosition = l3dAttachment[0].position;
    }

    // Mid button click => set Center Of Interest (COI)
    if (lLastClickEvent.button === 1) {
        if (!l3dPosition) return;
        // set the center coi
        lInfiniteEngine.getCameraManager().lookAt(l3dPosition);
        return;
    }

    // no left button click => do nothing
    if (lLastClickEvent.button !== 0)
    {
        return;
    }
    // if double click
    if (lLastClickEvent.type === 'dblclick')
    {
        // fit to geometry
        lInfiniteEngine.getCameraManager().fitGeometry(lFirstGeometricId);
        return;
    }
    // clear selected state on pick
    let lWasSelected: boolean = false;
    if (lFirstGeometricId !== 0)
    {
        const lGeomState = lInfiniteEngine.getGeometricState(lFirstGeometricId);
        lWasSelected = ((lGeomState & VisualStates.S_Selected) !== 0);
    }
    // if multiple selections => do not change the selected state of a single geometry
    // but select all the relevant 3D data instead
    if (l3dAttachment && l3dAttachment.length > 1)
    {
        lWasSelected = false;
    }
    // unselect everyone
    lInfiniteEngine.updateGeometricStateForAll(VisualStates.S_Selected, ~VisualStates.S_Selected);
    // and begin 
    if (lFirstGeometricId !== 0 && !lWasSelected && l3dAttachment)
    {
        // update visual state of selected items
        const lIds = new Uint32Array(l3dAttachment.length);
        for (let i = 0; i < l3dAttachment.length; ++i) {
            lIds[i] = l3dAttachment[i].instanceId;
        }
        lInfiniteEngine.updateGeometricState(lIds, VisualStates.S_Selected, VisualStates.S_Selected);
    }
};

// and bind the callback on pick result
lInfiniteEngine.addEventListener(InfiniteEngineInterfaceSignal.Picked, onPicking);

// the rectangle to pick (if relevant)
const lRubberBand: Rectangle = new Rectangle();

// We pick a rectangle if big enough, else only a point
pickAtImpl = (): void =>
{
    // single pick if small rectangle
    if (((lRubberBand.width <= 3) && (lRubberBand.height <= 3)) || (lRubberBand.width === 0) || (lRubberBand.height === 0))
    {
        // pick the last point 
        lInfiniteEngine.pickAt(lLastClickEvent.x, lLastClickEvent.y);
    }
    else
    {
        // pick an area
        lInfiniteEngine.pickRect(lRubberBand);
    }
    // and clear the rectangle in all the cases
    lRubberBand.clear();
}

onButtonClicked = (event) : void =>
{
    lLastClickEvent.x = event.offsetX;
    lLastClickEvent.y = event.offsetY;
    lLastClickEvent.button = event.button;
    lLastClickEvent.buttons = event.buttons;
    lLastClickEvent.type = event.type;
    lLastClickEvent.rubberInit = false;

    if (lLastClickEvent.buttons === 0)
    {
        // make a pick
        pickAtImpl();
    }
}
// on left click => pick
lView3D.addEventListener('click', onButtonClicked);

const onMouseDown = (event) : void =>
{
    // store the pick start
    lLastClickEvent.x = event.offsetX;
    lLastClickEvent.y = event.offsetY;
    lLastClickEvent.button = event.button;
    lLastClickEvent.buttons = event.buttons;
    lLastClickEvent.type = event.type;
    // no rubber
    lLastClickEvent.rubberInit = false;
}
// store the position to the first pick pos
lView3D.addEventListener('mousedown', onMouseDown);

// when we release the mouse button, make a pick only on middle mouse if close to start pos
// and hide the rubber band
const onMouseUp = (event) : void =>
{
    // middle click
    if (lLastClickEvent.button === 1 && event.button === 1)
    {
        if (!lLastClickEvent.rubberInit) {
            // if no rectangle => set COI
            lLastClickEvent.x = event.offsetX;
            lLastClickEvent.y = event.offsetY;
            lLastClickEvent.button = event.button;
            lLastClickEvent.buttons = event.buttons;
            lLastClickEvent.type = event.type;
            lLastClickEvent.rubberInit = false;
            pickAtImpl();
        }
    }
    const lPrimitiveManager : PrimitiveManagerInterface = lInfiniteEngine.getPrimitiveManager();
    lPrimitiveManager.getRubberBandManager().setRubberBandVisible(false);
    lLastClickEvent.x = event.offsetX;
    lLastClickEvent.y = event.offsetY;
    lLastClickEvent.button = event.button;
    lLastClickEvent.buttons = event.buttons;
    lLastClickEvent.type = event.type;
    lLastClickEvent.rubberInit = false;
}

lView3D.addEventListener('mouseup', onMouseUp);

// we we move the mouse, display the rubber band
const onMouseMove = (event) : void =>
{
    if (lLastClickEvent.rubberInit || (Math.abs(lLastClickEvent.x - event.offsetX) > 3 || Math.abs(lLastClickEvent.y - event.offsetY) > 3))
    {
        lRubberBand.x = Math.min(lLastClickEvent.x, event.offsetX);
        lRubberBand.y = Math.min(lLastClickEvent.y, event.offsetY);
        lRubberBand.width = Math.abs(lLastClickEvent.x - event.offsetX);
        lRubberBand.height = Math.abs(lLastClickEvent.y - event.offsetY);
        lLastClickEvent.rubberInit = true;
    }
    if ((lLastClickEvent.buttons === 1) && (event.buttons === 1) && lLastClickEvent.rubberInit)
    {
        // show/update the rubber band
        const lPrimitiveManager: PrimitiveManagerInterface = lInfiniteEngine.getPrimitiveManager();
        lPrimitiveManager.getRubberBandManager().setRubberBandRectangle(lRubberBand);
        lPrimitiveManager.getRubberBandManager().setRubberBandVisible(true);
    }
}
lView3D.addEventListener('mousemove', onMouseMove);

or with async calls :

/** 
 * Sample to illustrate the handling of an asynchronous mouse pick in an InfiniteEngineInterface.
 */
import {
    InfiniteEngineInterface, InfiniteFactory, MetadataManagerInterface, PickingAttachment, PickingAttachmentItem, Vector3, VisualStates, AsyncPickingResult,
    Rectangle, AsyncResultReason, PrimitiveManagerInterface,
} from 'generated/documentation/appinfiniteapi';

// created previously
let lMetadataManager : MetadataManagerInterface;
// the div to render to
let lView3D: HTMLElement;

// create an 3D engine
const lInfiniteEngine: InfiniteEngineInterface = InfiniteFactory.CreateInfiniteEngine(lMetadataManager);

// What to do on pick ?
let onButtonClicked : (pEvent) => void = undefined;

// We pick a rectangle if big enough, else only a point
let pickAtImpl : () => void = undefined;

// bind the 3D rendering to the div
lInfiniteEngine.setView(lView3D);

// ####################################################################################################################################
// ############################################ PICKING ###############################################################################
// ####################################################################################################################################
// Used to copy the relevant portion of a MouseEvent
// position, previous buttons, current button and type 
// store also if we started showing the rubber band
interface EventPos
{
    x : number;
    y : number;
    buttons : number;
    button : number;
    type : string;
    // is the rubber band initialized, i.e. have we begun to draw a rectangle ?
    rubberInit : boolean;
}
// store the last click to know the extent of the rectangle to pick, and after pick request
// to know the properties of the pick request
// we store a copy of the MouseEvent 
const lLastClickEvent: EventPos = {
    x: 0,
    y: 0,
    buttons: 0,
    button: 0,
    type: '',
    rubberInit: false,
};

// What to do on pick ?
const onPicking = (pAttachment: PickingAttachment) : void =>
{
    // care only about 3d geometries (no line, point, box)
    const l3dAttachment: PickingAttachmentItem[] | undefined = pAttachment.geometric;

    let lFirstGeometricId: number = 0;
    let l3dPosition: Vector3 | undefined = undefined;
    if (l3dAttachment !== undefined && l3dAttachment.length > 0)
    {
        lFirstGeometricId = l3dAttachment[0].instanceId;
        l3dPosition = l3dAttachment[0].position;
    }

    // Mid button click => set Center Of Interest (COI)
    if (lLastClickEvent.button === 1) {
        if (!l3dPosition) return;
        // set the center coi
        lInfiniteEngine.getCameraManager().lookAt(l3dPosition);
        return;
    }

    // no left button click => do nothing
    if (lLastClickEvent.button !== 0)
    {
        return;
    }
    // if double click
    if (lLastClickEvent.type === 'dblclick')
    {
        // fit to geometry
        lInfiniteEngine.getCameraManager().fitGeometry(lFirstGeometricId);
        return;
    }
    // clear selected state on pick
    let lWasSelected: boolean = false;
    if (lFirstGeometricId !== 0)
    {
        const lGeomState = lInfiniteEngine.getGeometricState(lFirstGeometricId);
        lWasSelected = ((lGeomState & VisualStates.S_Selected) !== 0);
    }
    // if multiple selections => do not change the selected state of a single geometry
    // but select all the relevant 3D data instead
    if (l3dAttachment && l3dAttachment.length > 1)
    {
        lWasSelected = false;
    }
    // unselect everyone
    lInfiniteEngine.updateGeometricStateForAll(VisualStates.S_Selected, ~VisualStates.S_Selected);
    // and begin 
    if (lFirstGeometricId !== 0 && !lWasSelected && l3dAttachment)
    {
        // update visual state of selected items
        const lIds = new Uint32Array(l3dAttachment.length);
        for (let i = 0; i < l3dAttachment.length; ++i) {
            lIds[i] = l3dAttachment[i].instanceId;
        }
        lInfiniteEngine.updateGeometricState(lIds, VisualStates.S_Selected, VisualStates.S_Selected);
    }
};

// the rectangle to pick (if relevant)
const lRubberBand: Rectangle = new Rectangle();

// We pick a rectangle if big enough, else only a point
pickAtImpl = async () : Promise<any> =>
{
    let lPickingResult : AsyncPickingResult;
    // single pick if small rectangle
    if (((lRubberBand.width <= 3) && (lRubberBand.height <= 3)) || (lRubberBand.width === 0) || (lRubberBand.height === 0))
    {
        // pick the last point 
        lPickingResult = await lInfiniteEngine.asyncPickAt(lLastClickEvent.x, lLastClickEvent.y);
    }
    else
    {
        // pick an area
        lPickingResult = await lInfiniteEngine.asyncPickRect(lRubberBand);
    }
    // and clear the rectangle in all the cases
    lRubberBand.clear();
    if (lPickingResult.reason !== AsyncResultReason.ARR_Success || lPickingResult.value === undefined)
    {
        return;
    }
    onPicking(lPickingResult.value);
}

onButtonClicked = (event) : void =>
{
    lLastClickEvent.x = event.offsetX;
    lLastClickEvent.y = event.offsetY;
    lLastClickEvent.button = event.button;
    lLastClickEvent.buttons = event.buttons;
    lLastClickEvent.type = event.type;
    lLastClickEvent.rubberInit = false;

    if (lLastClickEvent.buttons === 0)
    {
        // make a pick
        pickAtImpl();
    }
}
// on left click => pick
lView3D.addEventListener('click', onButtonClicked);

const onMouseDown = (event) : void =>
{
    // store the pick start
    lLastClickEvent.x = event.offsetX;
    lLastClickEvent.y = event.offsetY;
    lLastClickEvent.button = event.button;
    lLastClickEvent.buttons = event.buttons;
    lLastClickEvent.type = event.type;
    // no rubber
    lLastClickEvent.rubberInit = false;
}
// store the position to the first pick pos
lView3D.addEventListener('mousedown', onMouseDown);

// when we release the mouse button, make a pick only on middle mouse if close to start pos
// and hide the rubber band
const onMouseUp = (event) : void =>
{
    // middle click
    if (lLastClickEvent.button === 1 && event.button === 1)
    {
        if (!lLastClickEvent.rubberInit) {
            // if no rectangle => set COI
            lLastClickEvent.x = event.offsetX;
            lLastClickEvent.y = event.offsetY;
            lLastClickEvent.button = event.button;
            lLastClickEvent.buttons = event.buttons;
            lLastClickEvent.type = event.type;
            lLastClickEvent.rubberInit = false;
            pickAtImpl();
        }
    }
    const lPrimitiveManager : PrimitiveManagerInterface = lInfiniteEngine.getPrimitiveManager();
    lPrimitiveManager.getRubberBandManager().setRubberBandVisible(false);
    lLastClickEvent.x = event.offsetX;
    lLastClickEvent.y = event.offsetY;
    lLastClickEvent.button = event.button;
    lLastClickEvent.buttons = event.buttons;
    lLastClickEvent.type = event.type;
    lLastClickEvent.rubberInit = false;
}

lView3D.addEventListener('mouseup', onMouseUp);

// we we move the mouse, display the rubber band
const onMouseMove = (event) : void =>
{
    if (lLastClickEvent.rubberInit || (Math.abs(lLastClickEvent.x - event.offsetX) > 3 || Math.abs(lLastClickEvent.y - event.offsetY) > 3))
    {
        lRubberBand.x = Math.min(lLastClickEvent.x, event.offsetX);
        lRubberBand.y = Math.min(lLastClickEvent.y, event.offsetY);
        lRubberBand.width = Math.abs(lLastClickEvent.x - event.offsetX);
        lRubberBand.height = Math.abs(lLastClickEvent.y - event.offsetY);
        lLastClickEvent.rubberInit = true;
    }
    if ((lLastClickEvent.buttons === 1) && (event.buttons === 1) && lLastClickEvent.rubberInit)
    {
        // show/update the rubber band
        const lPrimitiveManager: PrimitiveManagerInterface = lInfiniteEngine.getPrimitiveManager();
        lPrimitiveManager.getRubberBandManager().setRubberBandRectangle(lRubberBand);
        lPrimitiveManager.getRubberBandManager().setRubberBandVisible(true);
    }
}
lView3D.addEventListener('mousemove', onMouseMove);

Please make sure the destination browser supports promises before using async calls.

Screenshots.

Screenshots can be performed with the screenshot call. The screenshot procedure is asynchronous, and the ScreenshotReady event is fired when the screenshot is ready. The screenshot call returns an id, and this is must match the attachment of the ScreenshotReady event which is an InfiniteImageInterface (screenshotid). An empty string means the screenshot procedure has failed (a missing setView call probably). An empty width or height means the image is invalid. Multiple screenshot calls can be executed concurrently.

You may want to call setFixedResolution to get a screenshot of this size.

/** 
 * Sample to illustrate the screenshot procedure of the InfiniteEngineInterface.
 */
import {
    InfiniteEngineInterface, LoadingStates, Vector3, InfiniteEngineLoadingStateAttachment,
    InfiniteEngineInterfaceSignal, InfiniteEvent, InfiniteImageInterface, ScreenshotType
} from 'generated/documentation/appinfiniteapi';

// We try to make a screenshot when all data is loaded

// the div to render the 3D display
let lView3D: HTMLElement;

// created previously, should receive the image data to be displayed to the user (or ask for a download maybe ?)
let lImageData : HTMLImageElement;

// created previously the position of the camera for the screenshot
let lCameraLocation : Vector3;

// created previously the camera center of interest
let lCenterOfInterest : Vector3;

// created previously the 3D engine
let lInfiniteEngine: InfiniteEngineInterface;

let lScreenshotId : string = '';
// What to do when screenshot is ready ?
let onScreenshotReady : (pEvent : InfiniteEvent, _pCallbackData) => void = undefined;

// What to do when all data is loaded ?
let onDataStateChanged : (pEvent : InfiniteEvent, _pCallbackData) => void = undefined;

// bind the 3D rendering to the div (should have been done earlier :) )
lInfiniteEngine.setView(lView3D);

// we will make screenshot of 1024x1024
lInfiniteEngine.setFixedResolution(1024, 1024, 1);

lInfiniteEngine.addEventListener(InfiniteEngineInterfaceSignal.LoadingStateChanged, onDataStateChanged);
lInfiniteEngine.addEventListener(InfiniteEngineInterfaceSignal.ScreenshotReady, onScreenshotReady);

// go to the expected position / location
lInfiniteEngine.getCameraManager().setCameraLocation(lCameraLocation);
lInfiniteEngine.getCameraManager().lookAt(lCenterOfInterest, 0);

// ####################################################################################################################################
// ############################################ Screenshot ############################################################################
// ####################################################################################################################################

// What to do when state changes ? We wait till everything is loaded and then make a screenshot
onDataStateChanged = (pEvent : InfiniteEvent, _pCallbackData) : void =>
{
    // check the attachment
    const lStateAttachment : InfiniteEngineLoadingStateAttachment = pEvent.attachments;

    // some check, but useless, only for illustration purpose
    console.assert(lStateAttachment.newLoadingState === lInfiniteEngine.getResourceLoadingState());

    switch (lStateAttachment.newLoadingState)
    {
        case LoadingStates.S_Loading:
            // do nothing if we are still loading
            return;
        case LoadingStates.S_OutOfBudget:
            // some fancy message
            console.log('Taking a screenshot without everything loaded');
            // but we still make a screenshot :)
            break;
        default:
            break;
    }
    // make a screenshot request in jpeg with 95% quality, data will be base64 encoded
    lScreenshotId = lInfiniteEngine.screenshot(ScreenshotType.ST_Color, true, 'image/jpeg', 0.95);
    if (lScreenshotId.length === 0)
    {
        // for some reason, this failed
        console.log('Screenshot request failed');
    }
}

// what to do when we get the screenshot result ?
onScreenshotReady = (pEvent : InfiniteEvent, _pCallbackData) : void =>
{
    // the image result
    const lInfiniteImage : InfiniteImageInterface = pEvent.attachments;

    // if the id does not match, bail out
    if (lInfiniteImage.screenshotid !== lScreenshotId)
    {
        console.log('This is not the expected screenshot id, aborting')
        return;
    }

    // is the image valid ? and base64 encoded ?
    if ((lInfiniteImage.width === 0) || (!lInfiniteImage.data) || (!lInfiniteImage.base64))
    {
        console.log('Unexpected screenshot error, aborting')
        return;
    }

    // create the data url in base64
    // even if we did not get the expected format, we still get the result
    const lDataUrl : string = 'data:' + lInfiniteImage.format + ';base64,' + lInfiniteImage.data;

    // resize the image markup
    lImageData.width = lInfiniteImage.width;
    lImageData.height = lInfiniteImage.height;
    // and set data
    lImageData.src = lDataUrl;

    // we get back to the size of the 3d view but this is up to the application needs
    lInfiniteEngine.unsetFixedResolution();
}

or with async calls :

/** 
 * Sample to illustrate the asynchronous screenshot procedure of the InfiniteEngineInterface.
 */
import {
    InfiniteEngineInterface, LoadingStates, Vector3,
    InfiniteImageInterface, ScreenshotType, AsyncDataLoadedResult, AsyncResultReason, AsyncScreenshotResult
} from 'generated/documentation/appinfiniteapi';

// We try to make a screenshot when all data is loaded

// the div to render the 3D display
let lView3D: HTMLElement;

// created previously, should receive the image data to be displayed to the user (or ask for a download maybe ?)
let lImageData : HTMLImageElement;

// created previously the position of the camera for the screenshot
let lCameraLocation : Vector3;

// created previously the camera center of interest
let lCenterOfInterest : Vector3;

// created previously the 3D engine
let lInfiniteEngine: InfiniteEngineInterface;

const takeScreenshot = async () : Promise<void> =>
{
    // bind the 3D rendering to the div (should have been done earlier :) )
    lInfiniteEngine.setView(lView3D);

    // we will make screenshot of 1024x1024
    lInfiniteEngine.setFixedResolution(1024, 1024, 1);

    // go to the expected position / location
    lInfiniteEngine.getCameraManager().setCameraLocation(lCameraLocation);
    lInfiniteEngine.getCameraManager().lookAt(lCenterOfInterest, 0);

    // What to do when all data is loaded ?
    const lDataLoaded : AsyncDataLoadedResult = await lInfiniteEngine.asyncWaitForDataLoaded();
    if (lDataLoaded.reason !== AsyncResultReason.ARR_Success || lDataLoaded.value === undefined)
    {
        // this is an error that should not happen (perhaps the engine interface has been destroyed ?)
        console.log('screenshot procedure failed for some reason');
        return;
    }
    const lDataLoadedState : LoadingStates = lDataLoaded.value.newLoadingState;
    switch (lDataLoadedState)
    {
        case LoadingStates.S_Loading:
            // this is an unexpected error
            console.log('unexpected error');
            return;
        case LoadingStates.S_OutOfBudget:
            // some fancy message
            console.log('Taking a screenshot without everything loaded');
            // but we still make a screenshot :)
            break;
        default:
            break;
    }
    const lScreenshot : AsyncScreenshotResult = await lInfiniteEngine.asyncScreenshot(ScreenshotType.ST_Color, true, 'image/jpeg', 0.95);
    if (lScreenshot.reason !== AsyncResultReason.ARR_Success || lScreenshot.value === undefined)
    {
        // this is an error that may happen (perhaps the engine interface has been destroyed ?, or bad inputs ?)
        console.log('screenshot procedure failed for some reason');
        return;
    }
    // What to do when screenshot is ready ?

    // the image result
    const lInfiniteImage : InfiniteImageInterface = lScreenshot.value;

    // is the image valid ? and base64 encoded ?
    if ((lInfiniteImage.width === 0) || (!lInfiniteImage.data) || (!lInfiniteImage.base64))
    {
        console.log('Unexpected screenshot error, aborting')
        return;
    }

    // create the data url in base64
    // even if we did not get the expected format, we still get the result
    const lDataUrl : string = 'data:' + lInfiniteImage.format + ';base64,' + lInfiniteImage.data;

    // resize the image markup
    lImageData.width = lInfiniteImage.width;
    lImageData.height = lInfiniteImage.height;
    // and set data
    lImageData.src = lDataUrl;

    // we get back to the size of the 3d view but this is up to the application needs
    lInfiniteEngine.unsetFixedResolution();
}

takeScreenshot();

Please make sure the destination browser supports promises before using async calls.

Camera manipulation.

The camera is manipulated from the CameraManagerInterface, accessed through getCameraManager. Some default behaviors are available in order to avoid the developer to code a lot of event handling in order to make the camera move in an interesting way. Available behaviors are orbital ones, i.e. the camera moves around a center of interest, but mouse manipulation is different from modes.

You may create animations to move, rotate the camera.

Cut Plane manipulation.

A cut plane is a theoretical 3D plane that "cut" objects. A cut plane (3D Affine hyperplane) is defined by a position P that belong to the plane and a normal N : (Nx,Ny,Nz). Such a plane has the equation : {x,y,z} / Nx.x + Ny.y + Nz.z = dot(N,P). Each vertex on the side of the normal N will be discarded, so every vertex V : {Vx,Vy,Vz} / Nx.Vx + Ny.Vy + Nz.Vz > dot(N,P) will be discarded.

Cut planes are modified through the CutPlaneManagerInterface accessible through getCutPlaneManager.

A CutPlaneManipulatorInterface may be created and bound to a cut plane to display a GUI element that allows the end user to change the cut plane orientation / position through createCutPlaneManipulator.

Object with a visual state S_IgnoreCutPlane will not be affected by cut planes.

/** 
 * Sample to illustrate the creation of a cut plane, manipulated with a CutPlaneManipulatorInterface.
 */
import { InfiniteEngineInterface, CutPlaneManagerInterface, Vector3, CutPlaneManipulatorInterface } from 'generated/documentation/appinfiniteapi';

// lEngine has been created previously
let lEngine : InfiniteEngineInterface;

// we want to hide items that are above (and not under), thus the normal is in the positive side.
const lNormal : Vector3 = new Vector3(0, 0, 1);
// any point with z = 10 is ok
const lPoint : Vector3 = new Vector3(Math.random(), Math.random(), 10);
// get the cut plane manager
const lCutPlaneManager : CutPlaneManagerInterface = lEngine.getCutPlaneManager();
const lCutPlaneId = lCutPlaneManager.createCutPlane(lPoint, lNormal);
console.assert(lCutPlaneId !== 0);
// do what you want, the cut plane is working as it is enabled upon creation
// and create a cut plane manipulator to allow the end user to change the cut plane geometry.
const lCutPlaneManipulator : CutPlaneManipulatorInterface = lCutPlaneManager.createCutPlaneManipulator();
// bind the manipulator to the newly created cut plane
lCutPlaneManipulator.setCutPlaneId(lCutPlaneId);
// hide it for the moment, we may need it later
lCutPlaneManipulator.setVisible(false);

Setting cut planes.

Annotations.

The rendering may be enriched to display 2D data representing measures, drawings (Functional Tolerancing and Annotations, Product Manufacturing Information, Measures, etc). These data are basically a 3D plane containing information in form of texts, curves, and symbols in this plane. Data of this type is referred to an Annotation.

3D Primitives.

3D Points, 3D lines, 3D boxes and a single 2D rectangle can be rendered on top of the DMU, with a rendering hint depending on the relative depth between the 3D primitives and the geometries. 3D primitives are accessed through the getPrimitiveManager function (PrimitiveManagerInterface). The colors of the 3D primitive are handled by the PrimitiveManagerMaterialInterface, accessed through getMaterialManager. Materials are accessed by their ids, and modified by their ids. 3D primitives are rendered colored with their material id, and not directly from a color.

3D Points.

The rendering can be enriched with 3D points rendered on top of the geometries, with a rendering hint telling if the point is over or under a geometry.

Point Creation sample :

/** 
 * Sample to explain how to create 3d points on top of the rendering (PrimitiveManagerPointInterface).
 */
import { InfiniteEngineInterface, PrimitiveManagerMaterialInterface, PrimitiveManagerPointInterface, Vector4, Vector3 } from 'generated/documentation/appinfiniteapi';

// created previously
let lInfiniteEngine : InfiniteEngineInterface;
// created previously, the point position
let lPointPosition : Vector3;

// the material for the inner point color
let lInnerPointColorMaterial : number = -1;
// the material for the outer point color
let lOuterPointColorMaterial : number = -1;
// the primitive material manager
const lPrimitiveMaterialManager : PrimitiveManagerMaterialInterface = lInfiniteEngine.getPrimitiveManager().getMaterialManager();
// the point manager
const lPointManager : PrimitiveManagerPointInterface = lInfiniteEngine.getPrimitiveManager().getPointManager();

// inner point color is white opaque (1 as last parameter)
const lInnerPointColor : Vector4 = new Vector4(1, 1, 1, 1);
// outer point color is black semi transparent (0.5 as last parameter)
const lOuterPointColor : Vector4 = new Vector4(0, 0, 0, 0.5);

// create materials
lInnerPointColorMaterial = lPrimitiveMaterialManager.createMaterial(lInnerPointColor);
lOuterPointColorMaterial = lPrimitiveMaterialManager.createMaterial(lOuterPointColor);

// and create the point
const lPointId : number = lPointManager.createPoint(
    // position
    lPointPosition,
    // sizes (quite a large point :) )
    40,
    35,
    // colors
    lInnerPointColorMaterial,
    lOuterPointColorMaterial
);

console.log('Point id is ' + lPointId);

Creating a point.

3D Lines.

The rendering can be enriched with 3D lines rendered on top of the geometries.

Line Creation sample :

/** 
 * Sample to explain how to create 3d lines on top of the rendering (PrimitiveManagerLineInterface).
 */
import { InfiniteEngineInterface, PrimitiveManagerMaterialInterface, PrimitiveManagerLineInterface, Vector4, Vector3 } from 'generated/documentation/appinfiniteapi';

// created previously
let lInfiniteEngine : InfiniteEngineInterface;
// created previously, the segment point position 1
let lLinePosition1 : Vector3;
// created previously, the segment point position 2
let lLinePosition2 : Vector3;

// the material for the line color
let lLineColorMaterial : number = -1;
// the primitive material manager
const lPrimitiveMaterialManager : PrimitiveManagerMaterialInterface = lInfiniteEngine.getPrimitiveManager().getMaterialManager();
// the line manager
const lLineManager : PrimitiveManagerLineInterface = lInfiniteEngine.getPrimitiveManager().getLineManager();
// line color is white opaque (1 as last parameter)
const lLineColor : Vector4 = new Vector4(1, 1, 1, 1);

// create material
lLineColorMaterial = lPrimitiveMaterialManager.createMaterial(lLineColor);

// and create the line
const lLineId : number = lLineManager.createLine(
    // segment extents
    lLinePosition1,
    lLinePosition2,
    lLineColorMaterial,
    // line width
    5
);

console.log('Line id is ' + lLineId);

Creating a line.

3D Boxes.

The rendering can be enriched with 3D boxes rendered on top of the geometries, with a rendering hint telling if the edge/face is over or under a geometry.

Box Creation sample :

/** 
 * Sample to explain how to create 3d boxes on top of the rendering (PrimitiveManagerBoxInterface).
 */
import { InfiniteEngineInterface, PrimitiveManagerMaterialInterface, PrimitiveManagerBoxInterface, Vector4, Vector3 } from 'generated/documentation/appinfiniteapi';

// created previously
let lInfiniteEngine : InfiniteEngineInterface;
// created previously, the box center
let lBoxCenter : Vector3;
// created previously, the box half extent in x,y,z
let lBoxHalfExtent : Vector3;

// the material edges of the box
let lEdgeColorMaterial : number = -1;
// the material for the faces of the box
let lFaceColorMaterial : number = -1;
// the primitive material manager
const lPrimitiveMaterialManager : PrimitiveManagerMaterialInterface = lInfiniteEngine.getPrimitiveManager().getMaterialManager();
// the box manager
const lBoxManager : PrimitiveManagerBoxInterface = lInfiniteEngine.getPrimitiveManager().getBoxManager();

// face color is white opaque (1 as last parameter)
const lFaceColor : Vector4 = new Vector4(1, 1, 1, 1);
// edge color is red semi transparent (0.5 as last parameter)
const lEdgeColor : Vector4 = new Vector4(1, 0, 0, 0.5);

// create materials
lFaceColorMaterial = lPrimitiveMaterialManager.createMaterial(lFaceColor);
lEdgeColorMaterial = lPrimitiveMaterialManager.createMaterial(lEdgeColor);

// and create the box
const lBoxId : number = lBoxManager.createBox(
    // center, half extent
    lBoxCenter,
    lBoxHalfExtent,
    // colors
    lEdgeColorMaterial,
    lFaceColorMaterial,
    // line width
    5
);

console.log('Box id is ' + lBoxId);

Creating a Box.

2D rectangle (rubber band).

The rendering can be enriched with a single 2D rectangle rendered on top of the geometries. The color cannot be changed.

Rectangle usage sample :

/** 
 * Sample to explain how to create a 2D rectangle on top of the rendering (PrimitiveManagerRubberBandInterface).
 */
import { InfiniteEngineInterface, PrimitiveManagerRubberBandInterface, Vector2, Rectangle } from 'generated/documentation/appinfiniteapi';

// created previously
let lInfiniteEngine : InfiniteEngineInterface;
const lSelectionRectangle : Rectangle = new Rectangle();

// created previously, the rectangle extents
let lRectanglePosition1 : Vector2;
let lRectanglePosition2 : Vector2;

// the rubber band manager
const lRubberBandManager : PrimitiveManagerRubberBandInterface = lInfiniteEngine.getPrimitiveManager().getRubberBandManager();

// compute rectangle geometry from the 2 extent points
lSelectionRectangle.x = Math.min(lRectanglePosition1.x, lRectanglePosition2.x);
lSelectionRectangle.y = Math.min(lRectanglePosition1.y, lRectanglePosition2.y);
lSelectionRectangle.width = Math.abs(lRectanglePosition1.x - lRectanglePosition2.x);
lSelectionRectangle.height = Math.abs(lRectanglePosition1.y - lRectanglePosition2.y);

// make sure rectangle is correct
console.assert(lSelectionRectangle.isValid() && (!lSelectionRectangle.isEmpty()));

// set rectangle and display it
lRubberBandManager.setRubberBandRectangle(lSelectionRectangle);
lRubberBandManager.setRubberBandVisible(true);

Using a Rectangle.

WebXR (experimental).

You may use the InfiniteEngineInterface api with WebXR sessions :

/** 
 * Sample to illustrate using a webxr session.
 */
import { InfiniteEngineInterface, InfiniteEngineInterfaceSignal, InfiniteEvent, InfiniteXRSession, CameraManagerInterfaceSignal, InfiniteXRReferenceSpace } from 'generated/documentation/appinfiniteapi';

// We try to make a screenshot when all data is loaded

// created previously the 3D engine
let lInfiniteEngine: InfiniteEngineInterface;
// the webXR session
let lCurSession : InfiniteXRSession;

// store the XRSession when ready
lInfiniteEngine.addEventListener(
    InfiniteEngineInterfaceSignal.XRSessionReady,
    (pEvent: InfiniteEvent) : void =>
    {
        lCurSession = pEvent.attachments;
    }
);

// make some fancy things on camera changes
// we may have used InfiniteEngineInterfaceSignal.DisplayDone
// to be called each frame
lInfiniteEngine.getCameraManager().addEventListener(
    CameraManagerInterfaceSignal.CameraLocationChanged,
    (_pEvent: InfiniteEvent) : void =>
    {
        if (!lCurSession)
        {
            return;
        }
        const lXRRefSpace : InfiniteXRReferenceSpace | undefined = lInfiniteEngine.getCameraManager().getXRReferenceFrame();
        if (!lXRRefSpace)
        {
            return;
        }
        // make some computations with XRSession inputs
        console.log(lCurSession.inputSources.length);
    }
);

// bind the 3D rendering to the div (should have been done earlier :) )
lInfiniteEngine.setView(undefined, { type: 'webxr', options: {} });

Please note that dedicated hardware is required to use WebXR. See [https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Fundamentals](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Fundamentals).

See

• InfiniteEngineInterfaceSignal
• InfiniteFactory
• MaterialManagerInterface
• PrimitiveManagerInterface
• PerformanceInterface
• CutPlaneManagerInterface