How to use the webgl-operate.Text 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);
        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);
github cginternals / webgl-operate / examples / colorscale-example.ts View on Github external
// 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);
        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 = [
github cginternals / webgl-operate / examples / labelelide-example.ts View on Github external
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
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;
            label.color.fromHex('#fff');
            label.fontSizeUnit = Label.Unit.Pixel;
        }
    }
github cginternals / webgl-operate / examples / label3d-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._labelWrap = new Position3DLabel(new Text(`Wrap: ${kafka}`), Label.Type.Dynamic);
        this._labelWrap.wrap = true;
        this._labelWrap.lineWidth = 0.8;

        this._labelCentered = new Position3DLabel(new Text(`Label.LineAnchor\n+\nLabel.Alignment.Center`),
            Label.Type.Dynamic);
        this._labelCentered.lineAnchor = Label.LineAnchor.Center;
        this._labelCentered.alignment = Label.Alignment.Center;

        this._labelPass.labels = [this._labelWrap, this._labelCentered];

        for (const label of this._labelPass.labels) {
            label.fontSize = 0.05;
            label.color.fromHex('#fff');
            label.fontSizeUnit = Label.Unit.World;
        }
    }
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;
github cginternals / webgl-operate / examples / labelelide-example.ts View on Github external
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(
            new Text(`Label.Elide.Middle |  ${werther}  | Label.Elide.Middle`), Label.Type.Dynamic);
github cginternals / webgl-operate / examples / label3d-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._labelWrap = new Position3DLabel(new Text(`Wrap: ${kafka}`), Label.Type.Dynamic);
        this._labelWrap.wrap = true;
        this._labelWrap.lineWidth = 0.8;

        this._labelCentered = new Position3DLabel(new Text(`Label.LineAnchor\n+\nLabel.Alignment.Center`),
            Label.Type.Dynamic);
        this._labelCentered.lineAnchor = Label.LineAnchor.Center;
        this._labelCentered.alignment = Label.Alignment.Center;

        this._labelPass.labels = [this._labelWrap, this._labelCentered];

        for (const label of this._labelPass.labels) {
            label.fontSize = 0.05;
            label.color.fromHex('#fff');
            label.fontSizeUnit = Label.Unit.World;
        }
    }