three#RGBAFormat TypeScript Examples

/**
	 * Load tile texture from the server.
	 *
	 * Aditionally in this height node it loads elevation data from the height provider and generate the appropiate maps.
	 */
	public async loadTexture(): Promise<void> 
	{
		const texture = new Texture();
		texture.image = await this.mapView.provider.fetchTile(this.level, this.x, this.y);
		texture.generateMipmaps = false;
		texture.format = RGBAFormat;
		texture.magFilter = LinearFilter;
		texture.minFilter = LinearFilter;
		texture.needsUpdate = true;

		// @ts-ignore
		this.material.map = texture;
		// @ts-ignore
		this.material.needsUpdate = true;

		this.textureLoaded = true;
		this.nodeReady();
	}

public async loadTexture(): Promise<void> 
	{
		const image = await this.mapView.provider.fetchTile(this.level, this.x, this.y);

		const texture = new Texture(image as any);
		texture.generateMipmaps = false;
		texture.format = RGBAFormat;
		texture.magFilter = LinearFilter;
		texture.minFilter = LinearFilter;
		texture.needsUpdate = true;
		
		// @ts-ignore
		this.material.map = texture;
		// @ts-ignore
		this.material.needsUpdate = true;

		this.textureLoaded = true;
		this.nodeReady();

		await this.loadHeightGeometry();
	}

public async loadHeightGeometry(): Promise<void> 
	{
		if (this.mapView.heightProvider === null) 
		{
			throw new Error('GeoThree: MapView.heightProvider provider is null.');
		}

		const texture = new Texture();
		texture.image = await this.mapView.heightProvider.fetchTile(this.level, this.x, this.y);
		texture.generateMipmaps = false;
		texture.format = RGBAFormat;
		texture.magFilter = NearestFilter;
		texture.minFilter = NearestFilter;
		texture.needsUpdate = true;
		
		// @ts-ignore
		this.material.userData.heightMap.value = texture;
		// @ts-ignore
		this.material.map = texture;
		// @ts-ignore
		this.material.needsUpdate = true;

		this.heightLoaded = true;
		this.nodeReady();
	}

/**
	 * Load tile texture from the server.
	 *
	 * This base method assumes the existence of a material attribute with a map texture.
	 */
	public async loadTexture(): Promise<void>
	{
		try 
		{
			const image: HTMLImageElement = await this.mapView.provider.fetchTile(this.level, this.x, this.y);
		
			const texture = new Texture(image);
			texture.generateMipmaps = false;
			texture.format = RGBAFormat;
			texture.magFilter = LinearFilter;
			texture.minFilter = LinearFilter;
			texture.needsUpdate = true;
			
			// @ts-ignore
			this.material.map = texture;
			this.nodeReady();
		}
		catch (e) 
		{
			const canvas = CanvasUtils.createOffscreenCanvas(1, 1);
			const context = canvas.getContext('2d');
			context.fillStyle = '#FF0000';
			context.fillRect(0, 0, 1, 1);

			const texture = new Texture(canvas as any);
			texture.generateMipmaps = false;
			texture.needsUpdate = true;

			// @ts-ignore
			this.material.map = texture;
			this.nodeReady();
		}
	}

export function HDRI(props: HDRIProps) {
  const { src, size = 1204, disableBackground, disableEnvironment } = props;

  const { gl, scene } = useThree();

  const loader = useMemo(
    () => new RGBELoader().setDataType(UnsignedByteType),
    []
  );

  useEffect(() => {
    loader.load(src, (texture) => {
      const opts = {
        format: RGBAFormat,
        generateMipmaps: false,
        magFilter: NearestFilter,
        minFilter: NearestFilter,
      };

      const envMap = new WebGLCubeRenderTarget(
        size,
        opts
      ).fromEquirectangularTexture(gl, texture).texture;

      // sent envmap onto scene env and background
      if (!disableBackground) {
        scene.background = envMap;
      }
      if (!disableEnvironment) {
        scene.environment = envMap;
      }

      texture.dispose();

      return () => {
        scene.background = null;
        scene.environment = null;
        envMap.dispose();
      };
    });
  }, [src, scene, loader, disableBackground, disableEnvironment]);

  return null;
}

/**
	 * Process the height texture received from the tile data provider.
	 * 
	 * @param image - Image element received by the tile provider.
	 */
	public async onHeightImage(image: HTMLImageElement): Promise<void> 
	{
		const tileSize = image.width;
		const gridSize = tileSize + 1;
		var canvas = CanvasUtils.createOffscreenCanvas(tileSize, tileSize);

		var context = canvas.getContext('2d');
		context.imageSmoothingEnabled = false;
		context.drawImage(image, 0, 0, tileSize, tileSize, 0, 0, canvas.width, canvas.height);
		
		var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
		var data = imageData.data;

		const terrain = MapMartiniHeightNode.getTerrain(data, tileSize, this.elevationDecoder);
		const martini = new Martini(gridSize);
		const tile = martini.createTile(terrain);
		const {vertices, triangles} = tile.getMesh(typeof this.meshMaxError === 'function' ? this.meshMaxError(this.level) : this.meshMaxError);

		const attributes = MapMartiniHeightNode.getMeshAttributes(vertices, terrain, tileSize, [-0.5, -0.5, 0.5, 0.5], this.exageration);

		this.geometry = new BufferGeometry();
		this.geometry.setIndex(new Uint32BufferAttribute(triangles, 1));
		this.geometry.setAttribute('position', new Float32BufferAttribute( attributes.position.value, attributes.position.size));
		this.geometry.setAttribute('uv', new Float32BufferAttribute( attributes.uv.value, attributes.uv.size));
		this.geometry.rotateX(Math.PI);

		var texture = new Texture(image);
		texture.generateMipmaps = false;
		texture.format = RGBAFormat;
		texture.magFilter = NearestFilter;
		texture.minFilter = NearestFilter;
		texture.needsUpdate = true;

		this.material.userData.heightMap.value = texture;
		// @ts-ignore
		this.material.map = texture;
		// @ts-ignore
		this.material.needsUpdate = true;
	}