Question

我使用webpack开发项目，当我在开发模式和生产模式下运行时，我看到画布纹理。我的生产页面有点大。和其他东西绘制正确。

当我尝试将更多和简单的示例页面webgl纹理绘制到画布上时。我检查所有xhttp调用并返回了值，但没有使用简单的示例。我不明白为什么它会在开发人员和生产模式下工作，但是当我创建简单的sapmle页面时却无法绘制。

这是我的代码：

//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)

  }

这是我的着色器代码：

  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

以下可能是示例代码无法正常工作的原因：

您的代码包含很多行，但不以分号;结尾，它不会在常规代码中引起问题，但是在缩小之后可能也是引起问题的原因。
某些浏览器不支持ES风格的功能。
在其他函数中使用this语句调用函数也可能引起问题。
我遇到的另一件事是在顶点着色器内部相乘的矩阵位置。它取代了画布上的纹理。

好主意是图像加载后进行初始化绘图。

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
}

您的代码为https://jsfiddle.net/6Lfm3g1p/5/的改编版本

webgl没有绘制纹理？

1 个答案: