WebGL之点上添加图片(using texture on point)

本文介绍了一种使用WebGL进行纹理点绘制的技术实现方法。通过加载图像作为纹理,并将其应用于点绘制中,使得每个点都能显示为具有纹理效果的小图片。文章详细展示了顶点着色器和片段着色器的编写过程,以及如何设置WebGL上下文和加载图像。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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); }

 

转载于:https://www.cnblogs.com/wema/p/7084835.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值