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
}