WebGL之点上添加图片(using texture on point)
2021-07-11 20:06
标签:attribute res pixel ogr min nbsp clear its console WebGL之点上添加图片(using texture on point) 标签:attribute res pixel ogr min nbsp clear its console 原文地址:http://www.cnblogs.com/wema/p/7084835.htmlvar 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)
文章链接:http://soscw.com/essay/103838.html