How to use @here/harp-text-canvas - 10 common examples

scene.add(cube);

        // Init TextCanvas
        textRenderStyle = new TextRenderStyle({
            fontSize: { unit: FontUnit.Pixel, size: 64.0, backgroundSize: 8.0 },
            color: new THREE.Color(0xff0000),
            backgroundColor: new THREE.Color(0x000000),
            backgroundOpacity: 1.0
        });
        textLayoutStyle = new TextLayoutStyle({
            horizontalAlignment: HorizontalAlignment.Center,
            verticalAlignment: VerticalAlignment.Below,
            lineWidth: 1024.0,
            wrappingMode: WrappingMode.Character
        });
        FontCatalog.load("resources/fonts/Default_FontCatalog.json", 2048)
            .then((loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: characterCount
                });
                loadedFontCatalog.loadCharset(textSample, textRenderStyle).then(() => {
                    assetsLoaded = true;
                });
            })
            .catch(error => {
                // tslint:disable-next-line:no-console
                console.error(error);
            });

        // Init Debug Visualization

textElementStyle: TextElementStyle,
        tempParams: TempParams
    ): boolean {
        // Trigger the glyph load if needed.
        if (textElement.loadingState === LoadingState.Initialized) {
            return true;
        }

        assert(textElementStyle.textCanvas !== undefined);
        const textCanvas = textElementStyle.textCanvas!;

        if (textElement.loadingState === undefined) {
            textElement.loadingState = LoadingState.Requested;

            if (textElement.renderStyle === undefined) {
                textElement.renderStyle = new TextRenderStyle({
                    ...textElementStyle.renderParams,
                    ...textElement.renderParams
                });
            }
            if (textElement.layoutStyle === undefined) {
                textElement.layoutStyle = new TextLayoutStyle({
                    ...textElementStyle.layoutParams,
                    ...textElement.layoutParams
                });
            }

            if (textElement.text === "") {
                textElement.loadingState = LoadingState.Loaded;
            } else {
                const newLoadPromise = textCanvas.fontCatalog
                    .loadCharset(textElement.text, textElement.renderStyle)

window.addEventListener("resize", onWindowResize);
        window.addEventListener("keydown", onKeyDown);
        window.addEventListener("keyup", onKeyUp);

        camera = new THREE.OrthographicCamera(
            -window.innerWidth / 2.0,
            window.innerWidth / 2.0,
            window.innerHeight / 2.0,
            -window.innerHeight / 2.0
        );
        camera.position.z = 1.0;
        camera.near = 0.0;
        camera.updateProjectionMatrix();

        // Init TextCanvas
        textRenderStyle = new TextRenderStyle({
            fontSize: { unit: FontUnit.Pixel, size: 64.0, backgroundSize: 8.0 },
            color: new THREE.Color(0xff0000),
            backgroundColor: new THREE.Color(0x000000),
            backgroundOpacity: 1.0
        });
        FontCatalog.load("resources/fonts/Default_FontCatalog.json", 2048).then(
            (loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    minGlyphCount: 16,
                    maxGlyphCount: characterCount
                });
                loadedFontCatalog.loadCharset(textSample, textRenderStyle).then(() => {
                    assetsLoaded = true;
                });

uniform float time;
        varying float yPos;

        void main() {
            vec4 color = vec4(1.0, 0.0, 0.0, vColor.a);
            float a = abs(sin((yPos / 300.0 + time * 0.5) * 10.0)) - 0.5;
            float b = smoothstep(0.0, 1.0, a) + 0.5;
            color.a *= getOpacity(vec2(0.0), vWeight + b * 0.25);
            if (color.a < 0.05) {
                discard;
            }
            gl_FragColor = color;
        }`;

        // Init TextCanvas
        textRenderStyle = new TextRenderStyle({
            fontSize: {
                unit: FontUnit.Percent,
                size: 300.0,
                backgroundSize: 0.0
            }
        });
        textLayoutStyle = new TextLayoutStyle({
            horizontalAlignment: HorizontalAlignment.Center
        });
        FontCatalog.load("resources/fonts/Default_FontCatalog.json", 16).then(
            (loadedFontCatalog: FontCatalog) => {
                // snippet:textcanvas_material_0.ts
                materialA = createSdfTextMaterial({
                    fontCatalog: loadedFontCatalog,
                    vertexSource: materialVertexSource,
                    fragmentSource: materialFragmentSourceA

document.body.appendChild(stats.dom);
        window.addEventListener("resize", onWindowResize);
        window.addEventListener("mouseup", onMouseClick);

        camera = new THREE.OrthographicCamera(
            -window.innerWidth / 2.0,
            window.innerWidth / 2.0,
            window.innerHeight / 2.0,
            -window.innerHeight / 2.0
        );
        camera.position.z = 1.0;
        camera.near = 0.0;
        camera.updateProjectionMatrix();

        // Init TextCanvas
        textRenderStyle = new TextRenderStyle({
            fontSize: {
                unit: FontUnit.Percent,
                size: 200.0,
                backgroundSize: 0.0
            }
        });
        FontCatalog.load("resources/fonts/Default_FontCatalog.json", 32).then(
            (loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: 64
                });
                loadedFontCatalog
                    .loadCharset("black" + "red" + "green" + "blue", textRenderStyle)
                    .then(() => {

-window.innerWidth / 2.0,
            window.innerWidth / 2.0,
            window.innerHeight / 2.0,
            -window.innerHeight / 2.0
        );
        camera.position.z = 1.0;
        camera.near = 0.0;
        camera.updateProjectionMatrix();

        // Init textLayoutManager
        textLayoutStyle = new TextLayoutStyle({
            horizontalAlignment: HorizontalAlignment.Center,
            verticalAlignment: VerticalAlignment.Below,
            lineWidth: window.innerWidth
        });
        textRenderStyle = new TextRenderStyle({
            fontSize: {
                unit: FontUnit.Pixel,
                size: 8.0,
                backgroundSize: 0.0
            }
        });
        FontCatalog.load("resources/fonts/Default_FontCatalog.json", 2048).then(
            (loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: characterCount
                });
                loadedFontCatalog.loadCharset(textSample, textRenderStyle).then(() => {
                    assetsLoaded = true;
                    guiOptions.update();

camera = new THREE.OrthographicCamera(
            -window.innerWidth / 2.0,
            window.innerWidth / 2.0,
            window.innerHeight / 2.0,
            -window.innerHeight / 2.0
        );
        camera.position.z = 1.0;
        camera.near = 0.0;
        camera.updateProjectionMatrix();

        // Init textCanvas
        textLayoutStyle = new TextLayoutStyle({
            horizontalAlignment: HorizontalAlignment.Left,
            verticalAlignment: VerticalAlignment.Center
        });
        textRenderStyle = new TextRenderStyle();
        FontCatalog.load("resources/fonts/Default_FontCatalog.json", 1024).then(
            (loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: characterCount
                });
                loadedFontCatalog.loadCharset(applicationCharset, textRenderStyle).then(() => {
                    assetsLoaded = true;
                });
            }
        );

        // Init Debug Visualization
        initDebugBounds();
        initDebugGrid();

// Place text elements one by one.
        for (const textElement of this.m_overlayTextElements!) {
            // Get the TextElementStyle.
            const textElementStyle = this.m_textStyleCache.getTextElementStyle(textElement.style);
            const textCanvas = textElementStyle.textCanvas;
            if (textCanvas === undefined) {
                continue;
            }
            const layer = textCanvas.getLayer(textElement.renderOrder || DEFAULT_TEXT_CANVAS_LAYER);

            // Trigger the glyph load if needed.
            if (textElement.loadingState === undefined) {
                textElement.loadingState = LoadingState.Requested;

                if (textElement.renderStyle === undefined) {
                    textElement.renderStyle = new TextRenderStyle({
                        ...textElementStyle.renderParams,
                        ...textElement.renderParams
                    });
                }
                if (textElement.layoutStyle === undefined) {
                    textElement.layoutStyle = new TextLayoutStyle({
                        ...textElementStyle.layoutParams,
                        ...textElement.layoutParams
                    });
                }

                if (textElement.text === "") {
                    textElement.loadingState = LoadingState.Loaded;
                } else {
                    textCanvas.fontCatalog
                        .loadCharset(textElement.text, textElement.renderStyle)

color.a *= getOpacity(vec2(0.0), vWeight + b * 0.25);
            if (color.a < 0.05) {
                discard;
            }
            gl_FragColor = color;
        }`;

        // Init TextCanvas
        textRenderStyle = new TextRenderStyle({
            fontSize: {
                unit: FontUnit.Percent,
                size: 300.0,
                backgroundSize: 0.0
            }
        });
        textLayoutStyle = new TextLayoutStyle({
            horizontalAlignment: HorizontalAlignment.Center
        });
        FontCatalog.load("resources/fonts/Default_FontCatalog.json", 16).then(
            (loadedFontCatalog: FontCatalog) => {
                // snippet:textcanvas_material_0.ts
                materialA = createSdfTextMaterial({
                    fontCatalog: loadedFontCatalog,
                    vertexSource: materialVertexSource,
                    fragmentSource: materialFragmentSourceA
                });
                materialA.uniforms.time = new THREE.Uniform(0.0);
                materialB = createSdfTextMaterial({
                    fontCatalog: loadedFontCatalog,
                    vertexSource: materialVertexSource,
                    fragmentSource: materialFragmentSourceB
                });

document.body.appendChild(webglRenderer.domElement);
        document.body.appendChild(stats.dom);
        window.addEventListener("resize", onWindowResize);

        camera = new THREE.OrthographicCamera(
            -window.innerWidth / 2.0,
            window.innerWidth / 2.0,
            window.innerHeight / 2.0,
            -window.innerHeight / 2.0
        );
        camera.position.z = 1.0;
        camera.near = 0.0;
        camera.updateProjectionMatrix();

        // Init TextCanvas
        textLayoutStyle = new TextLayoutStyle({
            horizontalAlignment: HorizontalAlignment.Center,
            verticalAlignment: VerticalAlignment.Below,
            lineWidth: window.innerWidth
        });
        textRenderStyle = new TextRenderStyle();
        FontCatalog.load("resources/fonts/Default_FontCatalog.json", 128).then(
            (loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: characterCount
                });
                loadedFontCatalog.loadCharset(textSample, textRenderStyle).then(() => {
                    assetsLoaded = true;
                });
            }