Failed to import image texture

[TQtong]

I create custom layer(extend SolidPolygonLayer), want to change top polygon by texture, however it not work

this is code

class CustomLayer extends SolidPolygonLayer {
initializeState() {
super.initializeState()
this.state = {
...this.state,
// Add a new property to the state
}
}

protected _getModels() {
const { id, filled, extruded } = this.props

let topModel
let sideModel
let wireframeModel

if (filled) {
  const shaders = this.getShaders('top')

  shaders.vs = shaders.vs.replace('out vec4 vColor;', 'out vec4 vColor;\n out vec2 fragUV; layout(location=1) in vec2 texCoords;')
  shaders.vs = shaders.vs.replace('props.normal = vec3(0.0, 0.0, 1.0);', 'props.normal = vec3(0.0, 0.0, 1.0);\nfragUV = texCoords;')

  shaders.fs = shaders.fs.replace('out vec4 fragColor;', 'out vec4 fragColor;\n in vec2 fragUV;\nuniform sampler2D uTexture;')
  shaders.fs = shaders.fs.replace('geometry.uv = vec2(0.);', '')
  shaders.fs = shaders.fs.replace('DECKGL_FILTER_COLOR(fragColor, geometry);', '')
  shaders.fs = shaders.fs.replace('fragColor = vColor;', 'fragColor = texture(uTexture, fragUV);')

  shaders.defines.NON_INSTANCED_MODEL = 1
  const bufferLayout = this.getAttributeManager()!.getBufferLayouts({
    isInstanced: false,
  })

  const texture = new AsyncTexture(this.context.device, {
    data: loadImageBitmap('vis-logo.png'),
    mipmaps: true,
    sampler: this.context.device.createSampler({
      minFilter: 'linear',
      magFilter: 'linear',
      mipmapFilter: 'linear'
    })
  });

  topModel = new Model(this.context.device, {
    ...shaders,
    id: `${id}-top`,
    topology: 'triangle-list',
    bufferLayout,
    isIndexed: true,
    userData: {
      excludeAttributes: { instanceVertexValid: true },
    },
    bindings: {
      uTexture: texture,
    }

  })
}
if (extruded) {
  const bufferLayout = this.getAttributeManager()!.getBufferLayouts({
    isInstanced: true,
  })

  sideModel = new Model(this.context.device, {
    ...this.getShaders('side'),
    id: `${id}-side`,
    bufferLayout,
    geometry: new Geometry({
      topology: 'triangle-strip',
      attributes: {
        // top right - top left - bottom right - bottom left
        positions: {
          size: 2,
          value: new Float32Array([1, 0, 0, 0, 1, 1, 0, 1]),
        },
      },
    }),
    isInstanced: true,
    userData: {
      excludeAttributes: { indices: true },
    },
  })

  wireframeModel = new Model(this.context.device, {
    ...this.getShaders('side'),
    id: `${id}-wireframe`,
    bufferLayout,
    geometry: new Geometry({
      topology: 'line-strip',
      attributes: {
        // top right - top left - bottom left - bottom right
        positions: {
          size: 2,
          value: new Float32Array([1, 0, 0, 0, 0, 1, 1, 1]),
        },
      },
    }),
    isInstanced: true,
    userData: {
      excludeAttributes: { indices: true },
    },
  })
}

return {
  models: [sideModel, wireframeModel, topModel].filter(Boolean),
  topModel,
  sideModel,
  wireframeModel,
}

}

getShaders(type: any) {
const shaders = super.getShaders(type)

return shaders

}
}