webgl does not draw texture?

Question

I develop my project with webpack, when I run in development mode and production mode I see texture my canvas. My production page a bit big. And other things are drawed correctly.

when I try to more little and simple sample page webgl texture does not draw to canvas. I check all xhttp call and returned value but not draw on simple sample. I do not understand why its work on developer and production mode but does not draw when I create simple sapmle page.

Here is my code:

//this is my draw call start

      // after some translate and scale functions
      this.gl.enable(this.gl.BLEND)
      this.gl.disable(this.gl.DEPTH_TEST)

      this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);

      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.CompassTextureBufferC)
      this.gl.vertexAttribPointer(this.obj.P2DtextCoordLoc,2, this.gl.FLOAT, false, 0, 0)
      this.gl.enableVertexAttribArray(this.obj.P2DtextCoordLoc)


        this.gl.bindTexture(this.gl.TEXTURE_2D, this.CompassTextureBuffer)


      this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.CompassVertexBuffer)
      this.gl.vertexAttribPointer(this.obj.P2DvertexPos,3, this.gl.FLOAT, false, 0, 0)
      this.gl.enableVertexAttribArray(this.obj.P2DvertexPos)

      this.gl.drawArrays(this.gl.TRIANGLES, 0,6)

      this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL,true)

      this.gl.disable(this.gl.BLEND)
      this.gl.enable(this.gl.DEPTH_TEST)

//this is my draw call end


//this part I download image and create texture start 

this.compassImage= document.createElement("img")
        this.compassImage.src="images/compassN.png"
        this.compassImage.onload=()=>{
          this.compassCtx.clearRect(0, 0, 128, 128)
          this.compassCtx.drawImage(this.compassImage, 0,0,128,128)
          this.CompassTextureBuffer =this.CreateCompassTexture(this.compassCtx)
        }

// this part I download image and create texture end

// my funcs for use create texture buffers: 
CreateCompassTexture(canvas){

    //this.compass=canvas.getImageData(0, 0, 128, 128)
    var compassTexture=this.gl.createTexture()
    this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL,false)
    this.gl.bindTexture(this.gl.TEXTURE_2D, compassTexture)

    this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA,  this.gl.RGBA, this.gl.UNSIGNED_BYTE, canvas.getImageData(0, 0, 128, 128))
    this.gl.generateMipmap(this.gl.TEXTURE_2D)
    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE)
    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE)
    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR)
    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR)
    return compassTexture
  }
  CreateCompassTextureBuffer(){
    this.CompassTextureBufferC= this.gl.createBuffer()

    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.CompassTextureBufferC)
    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array([  1, 1,
      0, 0,
      0, 1,
      0, 0,
      1, 1,
      1, 0,
    ]), this.gl.STATIC_DRAW)
  }
  CreateCompassVertexBuffer(){

    this.CompassVertexBuffer= this.gl.createBuffer()
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.CompassVertexBuffer)
    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array([
      64, 64,0,
      -64,-64,0,
      -64,64,0,
      -64,-64,0,
      64, 64,0,
      64,-64,0
    ]), this.gl.STATIC_DRAW)

  }

here is my shader code:

  static CreateProgram2D(gl){


    var VertexShaderCode= "precision mediump float;"+
    "attribute vec3 vertexPos;\n" +
    "uniform mat4 modelViewMatrix;\n" +
    "uniform mat4 projectionMatrix;\n" +
    "attribute vec2 aTextureCoord;"+
    "varying vec2 vTextureCoord;"+

    // "varying vec2 vTextureCoord;"+
    "    void main(void) {\n" +
    "           gl_Position= projectionMatrix*modelViewMatrix*vec4(vertexPos, 1.0); \n"+
    "           vTextureCoord= aTextureCoord;"+
    "}\n"


    var vertexShader= gl.createShader(gl.VERTEX_SHADER)
    gl.shaderSource(vertexShader, VertexShaderCode)
    gl.compileShader(vertexShader)

    var FragmentShaderCode= //"precision mediump float;"+//" uniform float r; uniform float g; uniform float b;"+
    // Passed in from the vertex shader.
    "precision lowp float;"+
    "varying vec2 vTextureCoord;"+
    "uniform sampler2D uSampler;"+
    "uniform vec4 v;"+
    "void main() { "+
    "gl_FragColor= texture2D(uSampler, vTextureCoord)*vec4(v.r/255.0,v.g/255.0,v.b/255.0,v.a);"+
    "}"


    var fragmentShader= gl.createShader(gl.FRAGMENT_SHADER)
    gl.shaderSource(fragmentShader, FragmentShaderCode)
    gl.compileShader(fragmentShader)
    var shaderProgram= gl.createProgram()
    gl.attachShader(shaderProgram, vertexShader )
    gl.attachShader(shaderProgram, fragmentShader )
    gl.linkProgram(shaderProgram)
    return shaderProgram
  }

Answer 1

It might be next reasons why sample code is not working:

• Your code contains a lot of lines without ending semicolons ; , it does not cause issue in regular code but after minifying might be reason of issue too.

• Some browsers could not support functions with ES style.

• Calling functions with this statement inside other functions might be caused issue too.

• Another thing that I encountered it was matrix position that multiplying inside vertex shader. It replaced texture over the canvas.

• And the good idea is init drawing after image loading.

   this.compassImage= document.createElement("img"); this.compassImage.crossOrigin = "Anonymous"; this.compassImage.src="images/compassN.png" this.compassImage.onload=()=>{ this.compassCtx.clearRect(0, 0, 128, 128) this.compassCtx.drawImage(this.compassImage, 0,0,128,128) this.CompassTextureBuffer = CreateCompassTexture(this.compassCtx); init(); } function init { //contains code for drawing }

there is adapted version of your code https://jsfiddle.net/6Lfm3g1p/5/