Function

Creates box-shaped Geometry.

Usage

In the example below we'll create a Mesh with a box-shaped ReadableGeometry.

[Run this example]

import {Viewer, Mesh, buildBoxGeometry, ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.js";

const viewer = new Viewer({
        canvasId: "myCanvas"
});

viewer.scene.camera.eye = [0, 0, 5];
viewer.scene.camera.look = [0, 0, 0];
viewer.scene.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {
     geometry: new ReadableGeometry(viewer.scene, buildBoxGeometry({
        center: [0,0,0],
        xSize: 1,  // Half-size on each axis
        ySize: 1,
        zSize: 1
     }),
     material: new PhongMaterial(viewer.scene, {
        diffuseMap: new Texture(viewer.scene, {
            src: "textures/diffuse/uvGrid2.jpg"
        })
     })
});

Creates a box-shaped lines Geometry.

Usage

In the example below we'll create a Mesh with a box-shaped ReadableGeometry that has lines primitives.

[Run this example]

import {Viewer, Mesh, buildBoxLinesGeometry, ReadableGeometry, PhongMaterial} from "xeokit-sdk.es.js";

const viewer = new Viewer({
        canvasId: "myCanvas"
});

viewer.scene.camera.eye = [0, 0, 5];
viewer.scene.camera.look = [0, 0, 0];
viewer.scene.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {
     geometry: new ReadableGeometry(viewer.scene, buildBoxLinesGeometry({
        center: [0,0,0],
        xSize: 1,  // Half-size on each axis
        ySize: 1,
        zSize: 1
     })),
     material: new PhongMaterial(viewer.scene, {
        emissive: [0,1,0]
     })
});

Creates a box-shaped lines Geometry from AABB.

Usage

In the example below we'll create a Mesh with a box-shaped ReadableGeometry that has lines primitives. This box will be created from AABB of a model.

[Run this example]

    import {Viewer, Mesh, Node, buildBoxGeometry, buildBoxLinesGeometryFromAABB, ReadableGeometry, PhongMaterial} from "../../dist/xeokit-sdk.min.es.js";

    const viewer = new Viewer({
        canvasId: "myCanvas"
    });

    viewer.scene.camera.eye = [-21.80, 4.01, 6.56];
    viewer.scene.camera.look = [0, -5.75, 0];
    viewer.scene.camera.up = [0.37, 0.91, -0.11];

    const boxGeometry = new ReadableGeometry(viewer.scene, buildBoxGeometry({
        xSize: 1,
        ySize: 1,
        zSize: 1
    }));

    new Node(viewer.scene, {
        id: "table",
        isModel: true, // <--------------------- Node represents a model
        rotation: [0, 50, 0],
        position: [0, 0, 0],
        scale: [1, 1, 1],

        children: [

            new Mesh(viewer.scene, { // Red table leg
                id: "redLeg",
                isObject: true, // <---------- Node represents an object
                position: [-4, -6, -4],
                scale: [1, 3, 1],
                rotation: [0, 0, 0],
                geometry: boxGeometry,
                material: new PhongMaterial(viewer.scene, {
                    diffuse: [1, 0.3, 0.3]
                })
            }),

            new Mesh(viewer.scene, { // Green table leg
                id: "greenLeg",
                isObject: true, // <---------- Node represents an object
                position: [4, -6, -4],
                scale: [1, 3, 1],
                rotation: [0, 0, 0],
                geometry: boxGeometry,
                material: new PhongMaterial(viewer.scene, {
                    diffuse: [0.3, 1.0, 0.3]
                })
            }),

            new Mesh(viewer.scene, {// Blue table leg
                id: "blueLeg",
                isObject: true, // <---------- Node represents an object
                position: [4, -6, 4],
                scale: [1, 3, 1],
                rotation: [0, 0, 0],
                geometry: boxGeometry,
                material: new PhongMaterial(viewer.scene, {
                    diffuse: [0.3, 0.3, 1.0]
                })
            }),

            new Mesh(viewer.scene, {  // Yellow table leg
                id: "yellowLeg",
                isObject: true, // <---------- Node represents an object
                position: [-4, -6, 4],
                scale: [1, 3, 1],
                rotation: [0, 0, 0],
                geometry: boxGeometry,
                material: new PhongMaterial(viewer.scene, {
                    diffuse: [1.0, 1.0, 0.0]
                })
            }),

            new Mesh(viewer.scene, { // Purple table top
                id: "tableTop",
                isObject: true, // <---------- Node represents an object
                position: [0, -3, 0],
                scale: [6, 0.5, 6],
                rotation: [0, 0, 0],
                geometry: boxGeometry,
                material: new PhongMaterial(viewer.scene, {
                    diffuse: [1.0, 0.3, 1.0]
                })
            })
        ]
    });

    let aabb = viewer.scene.aabb;
    console.log(aabb);

    new Mesh(viewer.scene, {
        geometry: new ReadableGeometry(viewer.scene, buildBoxLinesGeometryFromAABB({
            id: "aabb",
            aabb: aabb,
        })),
        material: new PhongMaterial(viewer.scene, {
            emissive: [0, 1,]
        })
    });

Creates a cylinder-shaped Geometry.

Usage

Creating a Mesh with a cylinder-shaped ReadableGeometry :

[Run this example]

import {Viewer, Mesh, buildCylinderGeometry, ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.js";

const viewer = new Viewer({
     canvasId: "myCanvas"
 });

viewer.camera.eye = [0, 0, 5];
viewer.camera.look = [0, 0, 0];
viewer.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {
     geometry: new ReadableGeometry(viewer.scene, buildCylinderGeometry({
         center: [0,0,0],
         radiusTop: 2.0,
         radiusBottom: 2.0,
         height: 5.0,
         radialSegments: 20,
         heightSegments: 1,
         openEnded: false
     }),
     material: new PhongMaterial(viewer.scene, {
        diffuseMap: new Texture(viewer.scene, {
            src: "textures/diffuse/uvGrid2.jpg"
        })
     })
});

Creates a grid-shaped Geometry.

Usage

Creating a Mesh with a GridGeometry and a PhongMaterial:

[Run this example]

import {Viewer, Mesh, buildGridGeometry, VBOGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.js";

const viewer = new Viewer({
     canvasId: "myCanvas"
});

viewer.camera.eye = [0, 0, 5];
viewer.camera.look = [0, 0, 0];
viewer.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {
     geometry: new VBOGeometry(viewer.scene, buildGridGeometry({
         size: 1000,
         divisions: 500
     })),
     material: new PhongMaterial(viewer.scene, {
         color: [0.0, 0.0, 0.0],
         emissive: [0.4, 0.4, 0.4]
     }),
     position: [0, -1.6, 0]
});

Creates a 3D line Geometry.

Usage

In the example below we'll create a Mesh with a line ReadableGeometry.

[Run this example]

//------------------------------------------------------------------------------------------------------------------
// Import the modules we need for this example
//------------------------------------------------------------------------------------------------------------------

import {buildLineGeometry, Viewer, Mesh, ReadableGeometry, PhongMaterial} from "../../dist/xeokit-sdk.min.es.js";

//------------------------------------------------------------------------------------------------------------------
// Create a Viewer and arrange the camera
//------------------------------------------------------------------------------------------------------------------

const viewer = new Viewer({
    canvasId: "myCanvas"
});

viewer.camera.eye = [0, 0, 8];
viewer.camera.look = [0, 0, 0];
viewer.camera.up = [0, 1, 0];

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with simple 2d line shape
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
        startPoint: [-5,-2,0],
        endPoint: [-5,2,0],
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [0, 1,]
    })
});

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with simple 2d line shape with black color
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
        startPoint: [-4,-2,0],
        endPoint: [-4,2,0],
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [0, 0, 0]
    })
});

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with simple 2d line shape with black color and simple pattern
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
        startPoint: [-3,-2,0],
        endPoint: [-3,2,0],
        pattern: [0.10],
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [0, 0, 0]
    })
});

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with simple 2d line shape with blue color and simple pattern extended to end
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
        startPoint: [-2,-2,0],
        endPoint: [-2,2,0],
        pattern: [0.10],
        extendToEnd: true,
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [0, 0, 1]
    })
});

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with simple 2d line shape with black color and more complex pattern
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
        startPoint: [-1,-2,0],
        endPoint: [-1,2,0],
        pattern: [0.15, 0.05],
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [0, 0, 0]
    })
});

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with simple 2d line shape with blue color and more complex pattern extended to end
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
        startPoint: [0,-2,0],
        endPoint: [0,2,0],
        pattern: [0.15, 0.05],
        extendToEnd: true,
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [0, 0, 1]
    })
});

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with simple 2d line shape with black color and complex pattern
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
        startPoint: [1,-2,0],
        endPoint: [1,2,0],
        pattern: [0.15, 0.05, 0.50],
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [0, 0, 0]
    })
});

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with simple 2d line shape with blue color and complex pattern extended to end
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
        startPoint: [2,-2,0],
        endPoint: [2,2,0],
        pattern: [0.15, 0.05, 0.50],
        extendToEnd: true,
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [0, 0, 1]
    })
});

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with simple 3d line shape with white color and simple pattern
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
        startPoint: [3,-2,-1],
        endPoint: [5,2,1],
        pattern: [0.10],
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [1, 1, 1]
    })
});

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with simple 3d line shape with black color and simple dot pattern
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
        startPoint: [5,-2,-1],
        endPoint: [7,2,1],
        pattern: [0.03],
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [0, 0, 0]
    })
});

Creates a plane-shaped Geometry.

Usage

Creating a Mesh with a PlaneGeometry and a PhongMaterial with diffuse Texture:

[Run this example]

import {Viewer, Mesh, buildPlaneGeometry, ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.js";

const viewer = new Viewer({
     canvasId: "myCanvas"
});

viewer.camera.eye = [0, 0, 5];
viewer.camera.look = [0, 0, 0];
viewer.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {
     geometry: new ReadableGeometry(viewer.scene, buildPlaneGeometry({
         center: [0,0,0],
         xSize: 2,
         zSize: 2,
         xSegments: 10,
         zSegments: 10
     }),
     material: new PhongMaterial(viewer.scene, {
         diffuseMap: new Texture(viewer.scene, {
             src: "textures/diffuse/uvGrid2.jpg"
         })
     })
 });

Creates a 3D polyline Geometry.

Usage

In the example below we'll create a Mesh with a polyline ReadableGeometry that has lines primitives.

[Run this example]

//------------------------------------------------------------------------------------------------------------------
// Import the modules we need for this example
//------------------------------------------------------------------------------------------------------------------

import {buildPolylineGeometry, Viewer, Mesh, ReadableGeometry, PhongMaterial} from "../../dist/xeokit-sdk.min.es.js";

//------------------------------------------------------------------------------------------------------------------
// Create a Viewer and arrange the camera
//------------------------------------------------------------------------------------------------------------------

const viewer = new Viewer({
    canvasId: "myCanvas"
});

viewer.camera.eye = [0, 0, 8];
viewer.camera.look = [0, 0, 0];
viewer.camera.up = [0, 1, 0];

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with polyline shape
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildPolylineGeometry({
        points: [
            0, 2.83654, 0,
            -0.665144, 1.152063, 0,
            -2.456516, 1.41827, 0,
            -1.330288, 0, 0,
            -2.456516, -1.41827, 0,
            -0.665144, -1.152063, 0,
            0, -2.83654, 0,
            0.665144, -1.152063, 0,
            2.456516, -1.41827, 0,
            1.330288, 0, 0,
            2.456516, 1.41827, 0,
            0.665144, 1.152063, 0,
            0, 2.83654, 0,
        ]
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [0, 1,]
    })
});

Creates a 3D polyline from curve Geometry.

Usage

In the example below we'll create a Mesh with a polyline ReadableGeometry created from curves.

[Run this example]

//------------------------------------------------------------------------------------------------------------------
// Import the modules we need for this example
//------------------------------------------------------------------------------------------------------------------

import {buildPolylineGeometryFromCurve, Viewer, Mesh, PhongMaterial, NavCubePlugin, CubicBezierCurve, SplineCurve, QuadraticBezierCurve, ReadableGeometry} from "../../dist/xeokit-sdk.min.es.js";

//------------------------------------------------------------------------------------------------------------------
// Create a Viewer and arrange the camera
//------------------------------------------------------------------------------------------------------------------

const viewer = new Viewer({
    canvasId: "myCanvas"
});

new NavCubePlugin(viewer, {
    canvasId: "myNavCubeCanvas",
    visible: true,
    size: 250,
    alignment: "bottomRight",
    bottomMargin: 100,
    rightMargin: 10
});

viewer.camera.eye = [0, -250, 1];
viewer.camera.look = [0, 0, 0];
viewer.camera.up = [0, 1, 0];

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with polyline shape from Spline
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildPolylineGeometryFromCurve({
        id: "SplineCurve",
        curve: new SplineCurve(viewer.scene, {
            points: [
                [-65.77614, 0, -88.881992],
                [90.020852, 0, -61.589088],
                [-67.766247, 0, -22.071238],
                [93.148164, 0, -13.826507],
                [-14.033343, 0, 3.231558],
                [32.592034, 0, 9.20188],
                [3.309023, 0, 22.848332],
                [23.210098, 0, 28.818655],
            ],
        }),
        divisions: 100,
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [1, 0, 0]
    })
});

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with polyline shape from CubicBezier
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildPolylineGeometryFromCurve({
        id: "CubicBezierCurve",
        curve: new CubicBezierCurve(viewer.scene, {
            v0: [120, 0, 100],
            v1: [120, 0, 0],
            v2: [80, 0, 100],
            v3: [80, 0, 0],
        }),
        divisions: 50,
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [0, 1, 0]
    })
});

//------------------------------------------------------------------------------------------------------------------
// Create a mesh with polyline shape from QuadraticBezier
//------------------------------------------------------------------------------------------------------------------

new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildPolylineGeometryFromCurve({
        id: "QuadraticBezierCurve",
        curve: new QuadraticBezierCurve(viewer.scene, {
            v0: [-100, 0, 100],
            v1: [-50, 0, 150],
            v2: [-50, 0, 0],
        }),
        divisions: 20,
    })),
    material: new PhongMaterial(viewer.scene, {
        emissive: [0, 0, 1]
    })
});

Creates a sphere-shaped Geometry.

Usage

Creating a Mesh with a sphere-shaped ReadableGeometry :

[Run this example]

import {Viewer, Mesh, buildSphereGeometry, ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.js";

const viewer = new Viewer({
    canvasId: "myCanvas"
});

viewer.camera.eye = [0, 0, 5];
viewer.camera.look = [0, 0, 0];
viewer.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {
     geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({
         center: [0,0,0],
         radius: 1.5,
         heightSegments: 60,
         widthSegments: 60
     }),
     material: new PhongMaterial(viewer.scene, {
        diffuseMap: new Texture(viewer.scene, {
            src: "textures/diffuse/uvGrid2.jpg"
        })
     })
});

Creates a torus-shaped Geometry.

Usage

Creating a Mesh with a torus-shaped ReadableGeometry :

[Run this example]

import {Viewer, Mesh, buildTorusGeometry, ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.js";

const viewer = new Viewer({
     canvasId: "myCanvas"
});

viewer.camera.eye = [0, 0, 5];
viewer.camera.look = [0, 0, 0];
viewer.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {
     geometry: new ReadableGeometry(viewer.scene, buildTorusGeometry({
         center: [0,0,0],
         radius: 1.0,
         tube: 0.5,
         radialSegments: 32,
         tubeSegments: 24,
         arc: Math.PI * 2.0
     }),
     material: new PhongMaterial(viewer.scene, {
        diffuseMap: new Texture(viewer.scene, {
            src: "textures/diffuse/uvGrid2.jpg"
        })
     })
});

Creates wireframe vector text Geometry.

Usage

Creating a Mesh with vector text ReadableGeometry :

[Run this example]

import {Viewer, Mesh, buildVectorTextGeometry, ReadableGeometry, PhongMaterial} from "xeokit-sdk.es.js";

const viewer = new Viewer({
     canvasId: "myCanvas"
});

viewer.camera.eye = [0, 0, 100];
viewer.camera.look = [0, 0, 0];
viewer.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {
     geometry: new ReadableGeometry(viewer.scene, buildVectorTextGeometry({
         origin: [0,0,0],
         text: "On the other side of the screen, it all looked so easy"
     }),
     material: new PhongMaterial(viewer.scene, {
        diffuseMap: new Texture(viewer.scene, {
            src: "textures/diffuse/uvGrid2.jpg"
        })
     })
});

Loads Geometry from 3DS.

Usage

In the example below we'll create a Mesh with PhongMaterial, Texture and a ReadableGeometry loaded from 3DS.

import {Viewer, Mesh, load3DSGeometry, ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.js";

const viewer = new Viewer({
     canvasId: "myCanvas"
});

viewer.scene.camera.eye = [40.04, 23.46, 79.06];
viewer.scene.camera.look = [-6.48, 13.92, -0.56];
viewer.scene.camera.up = [-0.04, 0.98, -0.08];

load3DSGeometry(viewer.scene, {
     src: "models/3ds/lexus.3ds",
     compressGeometry: false

 }).then(function (geometryCfg) {

     // Success

     new Mesh(viewer.scene, {

         geometry: new ReadableGeometry(viewer.scene, geometryCfg),

         material: new PhongMaterial(viewer.scene, {

             emissive: [1, 1, 1],
             emissiveMap: new Texture({  // .3DS has no normals so relies on emissive illumination
                 src: "models/3ds/lexus.jpg"
             })
         }),

         rotation: [-90, 0, 0] // +Z is up for this particular 3DS
     });
 }, function () {
     // Error
 });

Loads Geometry from OBJ.

Usage

In the example below we'll create a Mesh with MetallicMaterial and ReadableGeometry loaded from OBJ.

import {Viewer, Mesh, loadOBJGeometry, ReadableGeometry,
     MetallicMaterial, Texture} from "xeokit-sdk.es.js";

const viewer = new Viewer({
     canvasId: "myCanvas"
});

viewer.scene.camera.eye = [0.57, 1.37, 1.14];
viewer.scene.camera.look = [0.04, 0.58, 0.00];
viewer.scene.camera.up = [-0.22, 0.84, -0.48];

loadOBJGeometry(viewer.scene, {

     src: "models/obj/fireHydrant/FireHydrantMesh.obj",
     compressGeometry: false

 }).then(function (geometryCfg) {

     // Success

     new Mesh(viewer.scene, {

         geometry: new ReadableGeometry(viewer.scene, geometryCfg),

         material: new MetallicMaterial(viewer.scene, {

             baseColor: [1, 1, 1],
             metallic: 1.0,
             roughness: 1.0,

             baseColorMap: new Texture(viewer.scene, {
                 src: "models/obj/fireHydrant/fire_hydrant_Base_Color.png",
                 encoding: "sRGB"
             }),
             normalMap: new Texture(viewer.scene, {
                 src: "models/obj/fireHydrant/fire_hydrant_Normal_OpenGL.png"
             }),
             roughnessMap: new Texture(viewer.scene, {
                 src: "models/obj/fireHydrant/fire_hydrant_Roughness.png"
             }),
             metallicMap: new Texture(viewer.scene, {
                 src: "models/obj/fireHydrant/fire_hydrant_Metallic.png"
             }),
             occlusionMap: new Texture(viewer.scene, {
                 src: "models/obj/fireHydrant/fire_hydrant_Mixed_AO.png"
             }),

             specularF0: 0.7
         })
     });
 }, function () {
     // Error
 });

This function obtains unique positionsCompressed in the provided object .positionsCompressed array and calculates an index mapping, which is then applied to the provided object .indices and .edgeindices.

The input object items are not modified, and instead new set of positionsCompressed, indices and edgeIndices with the applied optimization are returned.

The algorithm, instead of being based in a hash-like LUT for identifying unique positionsCompressed, is based in pre-sorting the input positionsCompressed...

(it's possible to define a "consistent ordering" for the positionsCompressed as positionsCompressed are quantized and thus not suffer from float number comparison artifacts)

... so same positionsCompressed are adjacent in the sorted array, and then it's easy to scan linearly the sorted array. During the linear run, we will know that we found a different position because the comparison function will return != 0 between current and previous element.

During this linear traversal of the array, a unique counter is used in order to calculate the mapping between original indices and unique indices.