How to use @here/harp-materials - 10 common examples

);

                    // Configure the edge material based on the theme values.
                    const materialParams: EdgeMaterialParameters = {
                        color: fadingParams.color,
                        colorMix: fadingParams.colorMix,
                        fadeNear: fadingParams.lineFadeNear,
                        fadeFar: fadingParams.lineFadeFar
                    };
                    const edgeMaterial = new EdgeMaterial(materialParams);
                    const edgeObj = new THREE.LineSegments(edgeGeometry, edgeMaterial);

                    // Set the correct render order.
                    edgeObj.renderOrder = object.renderOrder + 0.1;

                    FadingFeature.addRenderHelper(
                        edgeObj,
                        viewRanges,
                        fadingParams.lineFadeNear,
                        fadingParams.lineFadeFar,
                        false,
                        extrudedPolygonTechnique.lineColor !== undefined &&
                            Expr.isExpr(extrudedPolygonTechnique.lineColor)
                            ? (renderer, mat) => {
                                  edgeMaterial.color.set(
                                      getPropertyValue(
                                          extrudedPolygonTechnique.lineColor!,
                                          mapView.zoomLevel
                                      )
                                  );
                              }
                            : undefined

displayZoomLevel,
                        fillTechnique
                    );

                    // Configure the edge material based on the theme values.
                    const materialParams: EdgeMaterialParameters = {
                        color: fadingParams.color,
                        colorMix: fadingParams.colorMix,
                        fadeNear: fadingParams.lineFadeNear,
                        fadeFar: fadingParams.lineFadeFar
                    };
                    const outlineMaterial = new EdgeMaterial(materialParams);
                    const outlineObj = new THREE.LineSegments(outlineGeometry, outlineMaterial);
                    outlineObj.renderOrder = object.renderOrder + 0.1;

                    FadingFeature.addRenderHelper(
                        outlineObj,
                        viewRanges,
                        fadingParams.lineFadeNear,
                        fadingParams.lineFadeFar,
                        false,
                        fillTechnique.lineColor !== undefined &&
                            Expr.isExpr(fillTechnique.lineColor)
                            ? (renderer, mat) => {
                                  const edgeMaterial = mat as EdgeMaterial;
                                  edgeMaterial.color.set(
                                      getPropertyValue(fillTechnique.lineColor!, mapView.zoomLevel)
                                  );
                              }
                            : undefined
                    );

if (
                    (isCirclesTechnique(technique) || isSquaresTechnique(technique)) &&
                    technique.enablePicking !== undefined
                ) {
                    // tslint:disable-next-line:max-line-length
                    (object as MapViewPoints).enableRayTesting = technique.enablePicking!;
                }

                if (
                    isLineTechnique(technique) ||
                    (isSegmentsTechnique(technique) &&
                        technique.color !== undefined &&
                        Expr.isExpr(technique.color))
                ) {
                    const fadingParams = this.getFadingParams(displayZoomLevel, technique);
                    FadingFeature.addRenderHelper(
                        object,
                        viewRanges,
                        fadingParams.fadeNear,
                        fadingParams.fadeFar,
                        false,
                        (renderer, mat) => {
                            const lineMaterial = mat as THREE.LineBasicMaterial;
                            lineMaterial.color.set(
                                getPropertyValue(technique.color, mapView.zoomLevel)
                            );
                        }
                    );
                }

                if (isSolidLineTechnique(technique)) {
                    const fadingParams = this.getFadingParams(displayZoomLevel, technique);

);
                    }
                }

                this.addFeatureData(srcGeometry, technique, object);
                this.addGeometryObjInfos(tile, srcGeometry, technique, object);

                if (isExtrudedPolygonTechnique(technique) || isFillTechnique(technique)) {
                    // filled polygons are normal meshes, and need transparency only when fading or
                    // dynamic properties is defined.
                    const hasDynamicColor =
                        (technique.color !== undefined && Expr.isExpr(technique.color)) ||
                        (isExtrudedPolygonTechnique(technique) && Expr.isExpr(technique.emissive));
                    if (technique.fadeFar !== undefined || hasDynamicColor) {
                        const fadingParams = this.getFadingParams(displayZoomLevel, technique);
                        FadingFeature.addRenderHelper(
                            object,
                            viewRanges,
                            fadingParams.fadeNear,
                            fadingParams.fadeFar,
                            true,
                            hasDynamicColor
                                ? (renderer, mat) => {
                                      const polygonMaterial = mat as
                                          | MapMeshBasicMaterial
                                          | MapMeshStandardMaterial;

                                      polygonMaterial.color.set(
                                          getPropertyValue(technique.color!, mapView.zoomLevel)
                                      );

                                      if (

// Read the uniforms from the technique values (and apply the default values).
                    const extrudedPolygonTechnique = technique as ExtrudedPolygonTechnique;

                    const fadingParams = this.getPolygonFadingParams(
                        displayZoomLevel,
                        extrudedPolygonTechnique
                    );

                    // Configure the edge material based on the theme values.
                    const materialParams: EdgeMaterialParameters = {
                        color: fadingParams.color,
                        colorMix: fadingParams.colorMix,
                        fadeNear: fadingParams.lineFadeNear,
                        fadeFar: fadingParams.lineFadeFar
                    };
                    const edgeMaterial = new EdgeMaterial(materialParams);
                    const edgeObj = new THREE.LineSegments(edgeGeometry, edgeMaterial);

                    // Set the correct render order.
                    edgeObj.renderOrder = object.renderOrder + 0.1;

                    FadingFeature.addRenderHelper(
                        edgeObj,
                        viewRanges,
                        fadingParams.lineFadeNear,
                        fadingParams.lineFadeFar,
                        false,
                        extrudedPolygonTechnique.lineColor !== undefined &&
                            Expr.isExpr(extrudedPolygonTechnique.lineColor)
                            ? (renderer, mat) => {
                                  edgeMaterial.color.set(
                                      getPropertyValue(

const fillTechnique = technique as FillTechnique;

                    const fadingParams = this.getPolygonFadingParams(
                        displayZoomLevel,
                        fillTechnique
                    );

                    // Configure the edge material based on the theme values.
                    const materialParams: EdgeMaterialParameters = {
                        color: fadingParams.color,
                        colorMix: fadingParams.colorMix,
                        fadeNear: fadingParams.lineFadeNear,
                        fadeFar: fadingParams.lineFadeFar
                    };
                    const outlineMaterial = new EdgeMaterial(materialParams);
                    const outlineObj = new THREE.LineSegments(outlineGeometry, outlineMaterial);
                    outlineObj.renderOrder = object.renderOrder + 0.1;

                    FadingFeature.addRenderHelper(
                        outlineObj,
                        viewRanges,
                        fadingParams.lineFadeNear,
                        fadingParams.lineFadeFar,
                        false,
                        fillTechnique.lineColor !== undefined &&
                            Expr.isExpr(fillTechnique.lineColor)
                            ? (renderer, mat) => {
                                  const edgeMaterial = mat as EdgeMaterial;
                                  edgeMaterial.color.set(
                                      getPropertyValue(fillTechnique.lineColor!, mapView.zoomLevel)
                                  );

const iconTexture = new IconTexture(this.imageItem);
        const texture = new THREE.Texture(
            iconTexture.image.imageData as any,
            THREE.UVMapping,
            undefined,
            undefined,
            bilinear ? THREE.LinearFilter : THREE.NearestFilter,
            bilinear ? THREE.LinearFilter : THREE.NearestFilter,
            THREE.RGBAFormat
        );
        texture.needsUpdate = true;
        texture.premultiplyAlpha = premultipliedAlpha;
        texture.generateMipmaps = false; // not needed, always rendered in full size

        this.m_material = new IconMaterial({
            map: texture
        });

        this.boxBuffer = new BoxBuffer(this.m_material, this.renderOrder);

        const mesh = this.boxBuffer.mesh;

        mesh.frustumCulled = false;

        this.scene.add(mesh);

        this.mapView.update();
    }
}

].value = this.m_renderTargetsVertical[2].texture;
        this.m_compositeMaterial.uniforms[
            "blurTexture4"
        ].value = this.m_renderTargetsVertical[3].texture;
        this.m_compositeMaterial.uniforms[
            "blurTexture5"
        ].value = this.m_renderTargetsVertical[4].texture;
        this.m_compositeMaterial.uniforms["bloomStrength"].value = strength;
        this.m_compositeMaterial.uniforms["bloomRadius"].value = 0.1;
        this.m_compositeMaterial.needsUpdate = true;

        const bloomFactors = [1.0, 0.8, 0.6, 0.4, 0.2];
        this.m_compositeMaterial.uniforms["bloomFactors"].value = bloomFactors;
        this.m_compositeMaterial.uniforms["bloomTintColors"].value = this.m_bloomTintColors;

        this.m_copyUniforms = THREE.UniformsUtils.clone(CopyShader.uniforms);
        this.m_copyUniforms["opacity"].value = 1.0;
        // tslint:enable:no-string-literal

        this.m_materialCopy = new THREE.ShaderMaterial({
            uniforms: this.m_copyUniforms,
            vertexShader: CopyShader.vertexShader,
            fragmentShader: CopyShader.fragmentShader,
            blending: THREE.AdditiveBlending,
            depthTest: false,
            depthWrite: false,
            transparent: true
        });
    }
    dispose() {

export function createPoints(
        pointPositions: ArrayLike,
        materialParameters?: PointsMaterialParameters | HighPrecisionPointMaterial
    ): HPP.HighPrecisionPoints {
        const indices: number[] = [];

        // tslint:disable-next-line:prefer-for-of - pointPositions doesn't have iterable interface
        for (let i = 0; i < pointPositions.length; i++) {
            indices.push(indices.length / 3);
        }

        const hpPointsGeometry = new BufferGeometry();

        const hpPointsMaterial = isHighPrecisionPointMaterial(materialParameters)
            ? materialParameters
            : new HighPrecisionPointMaterial(materialParameters);

        const pointsObject = new HPP.HighPrecisionPoints(hpPointsGeometry, hpPointsMaterial);

        setPositions(pointsObject, pointPositions);

        pointsObject.setupForRendering();

        return pointsObject;
    }
}

) {
                        const tileSize = lineMaterial.uniforms.tileSize;
                        const size = new THREE.Vector3();
                        tile.boundingBox.getSize(size);
                        tileSize.value.x = size.x;
                        tileSize.value.y = size.y;
                        lineMaterial.defines.TILE_CLIP = 1;
                    }

                    if (bufferGeometry.getAttribute("color")) {
                        lineMaterial.defines.USE_COLOR = 1;
                    }

                    if (
                        technique.caps !== undefined &&
                        LineCapsDefinitions.hasOwnProperty(technique.caps)
                    ) {
                        lineMaterial.defines[LineCapsDefinitions[technique.caps]] = 1;
                    }
                }

                // Add the solid line outlines as a separate object.
                const hasSolidLinesOutlines: boolean =
                    isSolidLineTechnique(technique) && technique.secondaryWidth !== undefined;

                const object = new ObjectCtor(bufferGeometry, material);
                object.renderOrder = technique.renderOrder!;

                if (group.renderOrderOffset !== undefined) {
                    object.renderOrder += group.renderOrderOffset;
                }