How to use the webgl-operate.Position2DLabel function in webgl-operate

To help you get started, we’ve selected a few webgl-operate examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github cginternals / webgl-operate / examples / colorscale-example.ts View on Github external
protected setupScene(): void {

        // test interpolation
        this._labelLAB = new Position2DLabel(new Text(`| should be violet |`), Label.Type.Static);

        // generated color
        this._labelGenerated1 = new Position2DLabel(new Text(`| generated 0 |`), Label.Type.Dynamic);
        this._labelGenerated2 = new Position2DLabel(new Text(`| generated 1 |`), Label.Type.Dynamic);
        this._labelGenerated3 = new Position2DLabel(new Text(`| generated 2 |`), Label.Type.Dynamic);
        this._labelGenerated4 = new Position2DLabel(new Text(`| generated 3 |`), Label.Type.Dynamic);

        // color scale linear
        this._labelLinear1 = new Position2DLabel(new Text(`| linear 0 |`), Label.Type.Dynamic);
        this._labelLinear2 = new Position2DLabel(new Text(`| linear 1 |`), Label.Type.Dynamic);
        this._labelLinear3 = new Position2DLabel(new Text(`| linear 2 |`), Label.Type.Dynamic);
        this._labelLinear4 = new Position2DLabel(new Text(`| linear 3 |`), Label.Type.Dynamic);
        this._labelLinear5 = new Position2DLabel(new Text(`| linear 4 |`), Label.Type.Dynamic);
        this._labelLinear6 = new Position2DLabel(new Text(`| linear 5 |`), Label.Type.Dynamic);
        this._labelLinear7 = new Position2DLabel(new Text(`| linear 6 |`), Label.Type.Dynamic);
        this._labelLinear8 = new Position2DLabel(new Text(`| linear 7 |`), Label.Type.Dynamic);

        // color scale nearest
        this._labelNearest1 = new Position2DLabel(new Text(`| nearest 0 |`), Label.Type.Dynamic);
        this._labelNearest2 = new Position2DLabel(new Text(`| nearest 1 |`), Label.Type.Dynamic);
github cginternals / webgl-operate / examples / colorscale-example.ts View on Github external
// color scale linear
        this._labelLinear1 = new Position2DLabel(new Text(`| linear 0 |`), Label.Type.Dynamic);
        this._labelLinear2 = new Position2DLabel(new Text(`| linear 1 |`), Label.Type.Dynamic);
        this._labelLinear3 = new Position2DLabel(new Text(`| linear 2 |`), Label.Type.Dynamic);
        this._labelLinear4 = new Position2DLabel(new Text(`| linear 3 |`), Label.Type.Dynamic);
        this._labelLinear5 = new Position2DLabel(new Text(`| linear 4 |`), Label.Type.Dynamic);
        this._labelLinear6 = new Position2DLabel(new Text(`| linear 5 |`), Label.Type.Dynamic);
        this._labelLinear7 = new Position2DLabel(new Text(`| linear 6 |`), Label.Type.Dynamic);
        this._labelLinear8 = new Position2DLabel(new Text(`| linear 7 |`), Label.Type.Dynamic);

        // color scale nearest
        this._labelNearest1 = new Position2DLabel(new Text(`| nearest 0 |`), Label.Type.Dynamic);
        this._labelNearest2 = new Position2DLabel(new Text(`| nearest 1 |`), Label.Type.Dynamic);
        this._labelNearest3 = new Position2DLabel(new Text(`| nearest 2 |`), Label.Type.Dynamic);
        this._labelNearest4 = new Position2DLabel(new Text(`| nearest 3 |`), Label.Type.Dynamic);
        this._labelNearest5 = new Position2DLabel(new Text(`| nearest 4 |`), Label.Type.Dynamic);
        this._labelNearest6 = new Position2DLabel(new Text(`| nearest 5 |`), Label.Type.Dynamic);
        this._labelNearest7 = new Position2DLabel(new Text(`| nearest 6 |`), Label.Type.Dynamic);
        this._labelNearest8 = new Position2DLabel(new Text(`| nearest 7 |`), Label.Type.Dynamic);


        const generatedLabels = [
            this._labelGenerated1, this._labelGenerated2, this._labelGenerated3, this._labelGenerated4]

        const linearLabels = [
            this._labelLinear1, this._labelLinear2, this._labelLinear3, this._labelLinear4, this._labelLinear5,
            this._labelLinear6, this._labelLinear7, this._labelLinear8];
        const nearestLabels = [
            this._labelNearest1, this._labelNearest2, this._labelNearest3, this._labelNearest4, this._labelNearest5,
            this._labelNearest6, this._labelNearest7, this._labelNearest8];

        this._labelPass.labels = [this._labelLAB, ...generatedLabels, ...linearLabels, ...nearestLabels];
github cginternals / webgl-operate / examples / colorscale-example.ts View on Github external
this._labelLinear1 = new Position2DLabel(new Text(`| linear 0 |`), Label.Type.Dynamic);
        this._labelLinear2 = new Position2DLabel(new Text(`| linear 1 |`), Label.Type.Dynamic);
        this._labelLinear3 = new Position2DLabel(new Text(`| linear 2 |`), Label.Type.Dynamic);
        this._labelLinear4 = new Position2DLabel(new Text(`| linear 3 |`), Label.Type.Dynamic);
        this._labelLinear5 = new Position2DLabel(new Text(`| linear 4 |`), Label.Type.Dynamic);
        this._labelLinear6 = new Position2DLabel(new Text(`| linear 5 |`), Label.Type.Dynamic);
        this._labelLinear7 = new Position2DLabel(new Text(`| linear 6 |`), Label.Type.Dynamic);
        this._labelLinear8 = new Position2DLabel(new Text(`| linear 7 |`), Label.Type.Dynamic);

        // color scale nearest
        this._labelNearest1 = new Position2DLabel(new Text(`| nearest 0 |`), Label.Type.Dynamic);
        this._labelNearest2 = new Position2DLabel(new Text(`| nearest 1 |`), Label.Type.Dynamic);
        this._labelNearest3 = new Position2DLabel(new Text(`| nearest 2 |`), Label.Type.Dynamic);
        this._labelNearest4 = new Position2DLabel(new Text(`| nearest 3 |`), Label.Type.Dynamic);
        this._labelNearest5 = new Position2DLabel(new Text(`| nearest 4 |`), Label.Type.Dynamic);
        this._labelNearest6 = new Position2DLabel(new Text(`| nearest 5 |`), Label.Type.Dynamic);
        this._labelNearest7 = new Position2DLabel(new Text(`| nearest 6 |`), Label.Type.Dynamic);
        this._labelNearest8 = new Position2DLabel(new Text(`| nearest 7 |`), Label.Type.Dynamic);


        const generatedLabels = [
            this._labelGenerated1, this._labelGenerated2, this._labelGenerated3, this._labelGenerated4]

        const linearLabels = [
            this._labelLinear1, this._labelLinear2, this._labelLinear3, this._labelLinear4, this._labelLinear5,
            this._labelLinear6, this._labelLinear7, this._labelLinear8];
        const nearestLabels = [
            this._labelNearest1, this._labelNearest2, this._labelNearest3, this._labelNearest4, this._labelNearest5,
            this._labelNearest6, this._labelNearest7, this._labelNearest8];

        this._labelPass.labels = [this._labelLAB, ...generatedLabels, ...linearLabels, ...nearestLabels];
github cginternals / webgl-operate / examples / colorscale-example.ts View on Github external
this._labelGenerated3 = new Position2DLabel(new Text(`| generated 2 |`), Label.Type.Dynamic);
        this._labelGenerated4 = new Position2DLabel(new Text(`| generated 3 |`), Label.Type.Dynamic);

        // color scale linear
        this._labelLinear1 = new Position2DLabel(new Text(`| linear 0 |`), Label.Type.Dynamic);
        this._labelLinear2 = new Position2DLabel(new Text(`| linear 1 |`), Label.Type.Dynamic);
        this._labelLinear3 = new Position2DLabel(new Text(`| linear 2 |`), Label.Type.Dynamic);
        this._labelLinear4 = new Position2DLabel(new Text(`| linear 3 |`), Label.Type.Dynamic);
        this._labelLinear5 = new Position2DLabel(new Text(`| linear 4 |`), Label.Type.Dynamic);
        this._labelLinear6 = new Position2DLabel(new Text(`| linear 5 |`), Label.Type.Dynamic);
        this._labelLinear7 = new Position2DLabel(new Text(`| linear 6 |`), Label.Type.Dynamic);
        this._labelLinear8 = new Position2DLabel(new Text(`| linear 7 |`), Label.Type.Dynamic);

        // color scale nearest
        this._labelNearest1 = new Position2DLabel(new Text(`| nearest 0 |`), Label.Type.Dynamic);
        this._labelNearest2 = new Position2DLabel(new Text(`| nearest 1 |`), Label.Type.Dynamic);
        this._labelNearest3 = new Position2DLabel(new Text(`| nearest 2 |`), Label.Type.Dynamic);
        this._labelNearest4 = new Position2DLabel(new Text(`| nearest 3 |`), Label.Type.Dynamic);
        this._labelNearest5 = new Position2DLabel(new Text(`| nearest 4 |`), Label.Type.Dynamic);
        this._labelNearest6 = new Position2DLabel(new Text(`| nearest 5 |`), Label.Type.Dynamic);
        this._labelNearest7 = new Position2DLabel(new Text(`| nearest 6 |`), Label.Type.Dynamic);
        this._labelNearest8 = new Position2DLabel(new Text(`| nearest 7 |`), Label.Type.Dynamic);


        const generatedLabels = [
            this._labelGenerated1, this._labelGenerated2, this._labelGenerated3, this._labelGenerated4]

        const linearLabels = [
            this._labelLinear1, this._labelLinear2, this._labelLinear3, this._labelLinear4, this._labelLinear5,
            this._labelLinear6, this._labelLinear7, this._labelLinear8];
        const nearestLabels = [
            this._labelNearest1, this._labelNearest2, this._labelNearest3, this._labelNearest4, this._labelNearest5,
github cginternals / webgl-operate / examples / colorscale-example.ts View on Github external
this._labelGenerated4 = new Position2DLabel(new Text(`| generated 3 |`), Label.Type.Dynamic);

        // color scale linear
        this._labelLinear1 = new Position2DLabel(new Text(`| linear 0 |`), Label.Type.Dynamic);
        this._labelLinear2 = new Position2DLabel(new Text(`| linear 1 |`), Label.Type.Dynamic);
        this._labelLinear3 = new Position2DLabel(new Text(`| linear 2 |`), Label.Type.Dynamic);
        this._labelLinear4 = new Position2DLabel(new Text(`| linear 3 |`), Label.Type.Dynamic);
        this._labelLinear5 = new Position2DLabel(new Text(`| linear 4 |`), Label.Type.Dynamic);
        this._labelLinear6 = new Position2DLabel(new Text(`| linear 5 |`), Label.Type.Dynamic);
        this._labelLinear7 = new Position2DLabel(new Text(`| linear 6 |`), Label.Type.Dynamic);
        this._labelLinear8 = new Position2DLabel(new Text(`| linear 7 |`), Label.Type.Dynamic);

        // color scale nearest
        this._labelNearest1 = new Position2DLabel(new Text(`| nearest 0 |`), Label.Type.Dynamic);
        this._labelNearest2 = new Position2DLabel(new Text(`| nearest 1 |`), Label.Type.Dynamic);
        this._labelNearest3 = new Position2DLabel(new Text(`| nearest 2 |`), Label.Type.Dynamic);
        this._labelNearest4 = new Position2DLabel(new Text(`| nearest 3 |`), Label.Type.Dynamic);
        this._labelNearest5 = new Position2DLabel(new Text(`| nearest 4 |`), Label.Type.Dynamic);
        this._labelNearest6 = new Position2DLabel(new Text(`| nearest 5 |`), Label.Type.Dynamic);
        this._labelNearest7 = new Position2DLabel(new Text(`| nearest 6 |`), Label.Type.Dynamic);
        this._labelNearest8 = new Position2DLabel(new Text(`| nearest 7 |`), Label.Type.Dynamic);


        const generatedLabels = [
            this._labelGenerated1, this._labelGenerated2, this._labelGenerated3, this._labelGenerated4]

        const linearLabels = [
            this._labelLinear1, this._labelLinear2, this._labelLinear3, this._labelLinear4, this._labelLinear5,
            this._labelLinear6, this._labelLinear7, this._labelLinear8];
        const nearestLabels = [
            this._labelNearest1, this._labelNearest2, this._labelNearest3, this._labelNearest4, this._labelNearest5,
            this._labelNearest6, this._labelNearest7, this._labelNearest8];
github cginternals / webgl-operate / examples / labelelide-example.ts View on Github external
new Text(`${werther}  | Label.Elide.Left`), Label.Type.Dynamic);
        this._labelRight.fontSizeUnit = Label.Unit.Pixel;
        this._labelRight.elide = Label.Elide.Left;
        this._labelRight.alignment = Label.Alignment.Right;
        this._labelRight.lineAnchor = Label.LineAnchor.Baseline;
        this._labelRight.color.fromHex('#fff');

        this._labelMiddle = new Position2DLabel(
            new Text(`Label.Elide.Middle |  ${werther}  | Label.Elide.Middle`), Label.Type.Dynamic);
        this._labelMiddle.fontSizeUnit = Label.Unit.Pixel;
        this._labelMiddle.elide = Label.Elide.Middle;
        this._labelMiddle.alignment = Label.Alignment.Center;
        this._labelMiddle.lineAnchor = Label.LineAnchor.Baseline;
        this._labelMiddle.color.fromHex('#fff');

        this._labelCustom = new Position2DLabel(
            new Text(`Custom Ellipsis |  ${werther}`), Label.Type.Dynamic);
        this._labelCustom.fontSizeUnit = Label.Unit.Pixel;
        this._labelCustom.elide = Label.Elide.Right;
        this._labelCustom.alignment = Label.Alignment.Left;
        this._labelCustom.lineAnchor = Label.LineAnchor.Baseline;
        this._labelCustom.color.fromHex('#fff');


        this._labelPass.aaStepScale = 1.0;

        this._labelPass.labels = [this._labelSize
            , this._labelLeft, this._labelRight, this._labelMiddle, this._labelCustom];

        setInterval(() => {
            const size = 16 + Math.sin(performance.now() * 0.001) * 4.0;
            this._labelSize.text.text = `// label.fontSize = ${size.toFixed(2)} (${this._labelSize.fontSizeUnit})`;
github cginternals / webgl-operate / examples / labelanchor-example.ts View on Github external
protected setupScene(): void {

        /** Wrapped labels, showcasing Ellipsis and NewLine */

        const kafka = 'One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in \
his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his \
brown belly, slightly domed and divided by arches into stiff sections.';

        this._labelTop = new Position2DLabel(new Text(`Label.Anchor.Top |  ${kafka}`), Label.Type.Dynamic);
        this._labelTop.lineAnchor = Label.LineAnchor.Top;

        this._labelAscent = new Position2DLabel(new Text(`Label.Anchor.Ascent |  ${kafka}`), Label.Type.Dynamic);
        this._labelAscent.lineAnchor = Label.LineAnchor.Ascent;

        this._labelCenter = new Position2DLabel(new Text(`Label.Anchor.Center |  ${kafka}`), Label.Type.Dynamic);
        this._labelCenter.lineAnchor = Label.LineAnchor.Center;

        this._labelBaseline = new Position2DLabel(new Text(`Label.Anchor.Baseline |  ${kafka}`), Label.Type.Dynamic);
        this._labelBaseline.lineAnchor = Label.LineAnchor.Baseline;

        this._labelDescent = new Position2DLabel(new Text(`Label.Anchor.Descent |  ${kafka}`), Label.Type.Dynamic);
        this._labelDescent.lineAnchor = Label.LineAnchor.Descent;

        this._labelBottom = new Position2DLabel(new Text(`Label.Anchor.Bottom |  ${kafka}`), Label.Type.Dynamic);
        this._labelBottom.lineAnchor = Label.LineAnchor.Bottom;

        this._labelPass.labels = [this._labelTop, this._labelAscent, this._labelCenter,
        this._labelBaseline, this._labelDescent, this._labelBottom];

        for (const label of this._labelPass.labels) {
            label.fontSize = 20;
github cginternals / webgl-operate / examples / labelelide-example.ts View on Github external
as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world \
among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the \
presence of the Almighty, who formed us in his own image, and the breath of that universal love which bears and \
sustains us, as it floats around us in an eternity of bliss;  and then, my friend, when darkness overspreads my eyes, \
and heaven and earth seem to dwell in my soul and absorb its power, like the form of a beloved mistress, then I often \
think with longing, Oh, would I could describe these conceptions, could impress upon paper all that is living so full \
and warm within me, that it might be the mirror of my soul, as my soul is the mirror of the infinite God!';

        this._labelSize = new Position2DLabel(new Text(), Label.Type.Dynamic);
        this._labelSize.fontSize = 20;
        this._labelSize.fontSizeUnit = Label.Unit.Pixel;
        this._labelSize.alignment = Label.Alignment.Left;
        this._labelSize.lineAnchor = Label.LineAnchor.Baseline;
        this._labelSize.color.fromHex('#27aae1');

        this._labelLeft = new Position2DLabel(
            new Text(`Label.Elide.Right |  ${werther}`), Label.Type.Dynamic);
        this._labelLeft.fontSizeUnit = Label.Unit.Pixel;
        this._labelLeft.elide = Label.Elide.Right;
        this._labelLeft.alignment = Label.Alignment.Left;
        this._labelLeft.lineAnchor = Label.LineAnchor.Baseline;
        this._labelLeft.color.fromHex('#fff');

        this._labelRight = new Position2DLabel(
            new Text(`${werther}  | Label.Elide.Left`), Label.Type.Dynamic);
        this._labelRight.fontSizeUnit = Label.Unit.Pixel;
        this._labelRight.elide = Label.Elide.Left;
        this._labelRight.alignment = Label.Alignment.Right;
        this._labelRight.lineAnchor = Label.LineAnchor.Baseline;
        this._labelRight.color.fromHex('#fff');

        this._labelMiddle = new Position2DLabel(