js/base/TextureBank.js

'use strict'

/**
 * TextureBank class
 * @access public
 */
export class TextureBank {
  /**
   * constructor
   * @access public
   * @constructor
   */
  constructor() {
    /** @type {WebGLContext} */
    this._gl = null

    /** @type {Map} */
    this._textures = new Map()
  }

  setContext(gl) {
    this._gl = gl
  }

  getTextureID(canvas) {
    if(!(canvas instanceof HTMLCanvasElement)){
      return ''
    }
    if(!canvas._textureID){
      const radix = 16
      const length = 20
      let id = '_'

      for(let i=0; i<length; i++){
        const n = Math.floor(Math.random() * radix)
        id += n.toString(radix)
      }
      canvas._textureID = id
    }
    //return 'CANVAS:' + canvas._textureID
    return `CANVAS:${canvas._textureID}`
  }

  getTexture(textureName){
    let key = textureName
    if(textureName instanceof HTMLCanvasElement){
      key = this.getTextureID(textureName)
    }

    let texture = this._textures.get(key)

    if(texture === undefined){
      texture = this._gl.createTexture()
      const orgImage = new Image()
      let texImage = null
      const gl = this._gl
      const obj = this

      const texCallback = () => {
        //gl.enable(gl.TEXTURE_2D)
        gl.checkGLError('gl.TEXTURE_2D')
        gl.bindTexture(gl.TEXTURE_2D, texture)
        gl.checkGLError('gl.bindTexture')
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texImage)
        gl.checkGLError('gl.texImage2D')
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
        gl.checkGLError('gl.texParameteri: MAG_FILTER')
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
        gl.checkGLError('gl.texParameteri: MIN_FILTER')
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
        gl.checkGLError('gl.texParameteri: WRAP_S')
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
        gl.checkGLError('gl.texParameteri: WRAP_T')
        gl.generateMipmap(gl.TEXTURE_2D)
        gl.checkGLError('gl.generateMipmap')
        gl.bindTexture(gl.TEXTURE_2D, null)
        gl.checkGLError('gl.bindTexture')
        //myAlert('error:' + gl.getError())
      }

      if(textureName instanceof HTMLCanvasElement){
        texImage = textureName
        texCallback()
      }else{
        orgImage.onload = () => {
          gl.checkGLError('before image.onload')
          texImage = obj._createTextureImage(orgImage, texCallback)
        }
        orgImage.src = textureName
      }

      this._textures.set(key, texture)
    }
    return texture
  }

  _createTextureImage(orgImage, callback){
    // adjust image width/height to powers of 2
    const texImage = new Image()

    let orgWidth = (orgImage.width >> 1)
    let texWidth = 1
    while(orgWidth > 0){
      orgWidth >>= 1
      texWidth <<= 1
    }

    let orgHeight = (orgImage.height >> 1)
    let texHeight = 1
    while(orgHeight > 0){
      orgHeight >>= 1
      texHeight <<= 1
    }

    // create canvas
    const texCanvas = document.createElement('canvas')
    texCanvas.width = texWidth
    texCanvas.height = texHeight
    const texContext = texCanvas.getContext('2d')

    // drawImage
    texContext.drawImage(orgImage, 0, 0, orgImage.width, orgImage.height,
                                   0, 0, texWidth, texHeight)

    // createImage from canvas data
    if(callback){
      texImage.onload = callback
    }
    texImage.src = texCanvas.toDataURL()

    return texImage
  }
}

// for singleton
export default new TextureBank()