three#Texture TypeScript Examples

public reload(nativeTexture: Texture) {
        if (this._root != this)
            throw new Error("Reload is not allow to call on none root NTexture.");

        if (this._nativeTexture && this._nativeTexture != nativeTexture)
            this._nativeTexture.dispose();

        this._nativeTexture = nativeTexture;

        if (this._nativeTexture)
            this.originalSize.set(nativeTexture.image.width, nativeTexture.image.height);
        else
            this.originalSize.set(0, 0);
        this.region.set(0, 0, this.originalSize.x, this.originalSize.y);
    }

public constructor(texture?: Texture, xScale?: number, yScale?: number) {
        xScale = xScale || 1;
        yScale = yScale || 1;
        this._nativeTexture = texture;
        this._root = this;
        this.uvRect = new Rect(0, 0, xScale, yScale);
        if (yScale < 0) {
            this.uvRect.y = -yScale;
            this.uvRect.height = yScale;
        }
        if (xScale < 0) {
            this.uvRect.x = -xScale;
            this.uvRect.width = xScale;
        }
        this.originalSize = texture ? new Vector2(texture.image.width, texture.image.height) : new Vector2(2, 2);
        this.region = new Rect(0, 0, this.originalSize.x, this.originalSize.y);
        this.offset = new Vector2(0, 0);
    }

private createTexture(size: number): void {
        this._canvas.width = this._canvas.height = size;

        if (!this.mainTexture) {
            this._texture = new Texture(this._canvas);
            this._texture.generateMipmaps = false;
            this._texture.magFilter = LinearFilter;
            this._texture.minFilter = LinearFilter;
            this.mainTexture = new NTexture(this._texture);
        }
        else {
            this._texture.needsUpdate = true;
            this.mainTexture.reload(this._texture);
        }

        this.clearTexture();
    }

/**
	 * 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();
		}
	}

public map: Texture;

private _nativeTexture: Texture;

protected _texture: Texture;

static emptyTexture: Texture;

static emptyTexture: Texture;

/**
	 * Empty texture used as a placeholder for missing textures.
	 */
	public static emptyTexture: Texture = new Texture();

/**
	 * 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;
	}

/**
	 * Empty texture used as a placeholder for missing textures.
	 */
	public static emptyTexture: Texture = new Texture();

BaseMaterial = defineComponent({
  emits: ['created'],
  props: {
    color: { type: String, default: '#ffffff' },
    props: { type: Object as PropType<MaterialPropsInterface>, default: () => ({}) },
  },
  inject: {
    mesh: MeshInjectionKey as symbol,
  },
  setup(): MaterialSetupInterface {
    return {}
  },
  provide() {
    return {
      [MaterialInjectionKey as symbol]: this,
    }
  },
  created() {
    if (!this.mesh) {
      console.error('Missing parent Mesh')
      return
    }

    if (this.createMaterial) {
      const material = this.material = this.createMaterial()
      // @ts-ignore
      watch(() => this.color, (value) => { material.color.set(value) })
      bindObjectProp(this, 'props', material, false, this.setProp)
      this.$emit('created', material)
      this.mesh.setMaterial(material)
    }
  },
  unmounted() {
    this.material?.dispose()
  },
  methods: {
    getMaterialParams() {
      return { ...propsValues(this.$props, ['props']), ...this.props }
    },
    setProp(material: any, key: string, value: any, needsUpdate = false) {
      const dstVal = material[key]
      if (dstVal instanceof Color) dstVal.set(value)
      else material[key] = value
      material.needsUpdate = needsUpdate
    },
    setTexture(texture: Texture | null, key = 'map') {
      this.setProp(this.material, key, texture, true)
    },
  },
  render() {
    return this.$slots.default ? this.$slots.default() : []
  },
  __hmrId: 'Material',
})