WebGL之點上添加圖片（using texture on point）

標籤：attribute   res   pixel   ogr   min   nbsp   clear   its   console   

var VSHADER_SOURCE =[            "attribute vec4 a_Position;",                                    "uniform mat4 u_ProjMatrix;",        "uniform float u_PointSize;",        "void main() {",            "    gl_PointSize = u_PointSize;",            "    gl_Position = u_ProjMatrix * a_Position;",        "}"    ].join("\n")var FSHADER_SOURCE =[        "precision mediump float;",            "uniform sampler2D u_Sampler;",                       "void main() {",     
　　　　　"　　gl_FragColor = texture2D(u_Sampler,vec2(gl_PointCoord.x,1.0 - gl_PointCoord.y));",        "}"    ].join("\n")function main() {    var canvas = document.getElementById(‘webgl‘);    var gl = getWebGLContext(canvas);    if (!gl) {            console.log(‘Failed to get the rendering context for WebGL‘);            return;    }    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {            console.log(‘Failed to intialize shaders.‘);        return;    }      var projMatrix4=new Matrix4();    projMatrix4.setOrtho(-1,1,-1,1,0.0,1.0);    var u_projMatrix=gl.getUniformLocation(gl.program,‘u_ProjMatrix‘);      gl.uniformMatrix4fv(u_projMatrix,false,projMatrix4.elements);    var position=gl.getAttribLocation(gl.program,‘a_Position‘);    gl.vertexAttrib3f(position,0.0,0.0,0.0);    gl.clearColor(0, 0, 0, 1);    gl.clear(gl.COLOR_BUFFER_BIT);          loadImg(gl);}function loadImg(gl){    var image=new Image();    image.onload=function(){        drawPic(gl,image)    }    image.src="pic.png";}function drawPic(gl,image){    var width=image.width;     var height=image.height;     var pointSize=gl.getUniformLocation(gl.program,"u_PointSize");    gl.uniform1f(pointSize,Math.max(width,height));        var texture=gl.createTexture();    //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);    gl.activeTexture(gl.TEXTURE0);    gl.bindTexture(gl.TEXTURE_2D,texture);        gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST);    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST);    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);        gl.uniform1i(gl.getUniformLocation(gl.program,"u_Sampler"),0);    gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,image);    gl.clear(gl.COLOR_BUFFER_BIT);    gl.drawArrays(gl.POINTS,0,1);    gl.bindTexture(gl.TEXTURE_2D, null);}

 

WebGL之點上添加圖片（using texture on point）