WebGL之点精灵的旋转（Rotation Sprite）

最新推荐文章于 2025-03-26 11:09:53 发布

转载最新推荐文章于 2025-03-26 11:09:53 发布 · 631 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wema/p/7084855.html

本文介绍如何在WebGL中实现点上的纹理旋转效果。通过修改顶点坐标并使用旋转矩阵操作gl_PointCoord来达到目的。提供了包含顶点着色器和片元着色器的完整代码示例。

上一篇已经把WebGL如何在点（Point）上添加图片进行了说明，并且直接提供了源代码，理解起来应该不难；

矩形上面添加纹理，我们都知道是可以旋转的，那么点上面添加的纹理能不能进行旋转呢？答案是肯定的

我们只需要建立一个旋转矩阵，这个旋转直接去操作Shader里面的gl_PointCoord，这样就能达到旋转纹理的目的；

//顶点着色器
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;",    
        "uniform float u_Angle"        
        "void main() {",
        "    float x=gl_PointCoord.x-0.5;",//将顶点坐标进行偏移，使得旋转中心点位于（0.5，0.5）
        "    float y=gl_PointCoord.y-0.5;",//将顶点坐标进行偏移，是的旋转中心点位于（0.5，0.5）

　　　　" float nx=(cos(u_Angle) * x - sin(u_Angle ) * y);",//对x的旋转后的值
 　　　　" float ny = (sin( u_Angle ) * x + cos( u_Angle ) * y);",//对y的旋转后的值


　　　　 " gl_FragColor = texture2D( u_Sampler, vec2( nx+0.5,ny+0.5) );", //获取图片颜色

 "}" 
].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 u_Angle=gl.getUniformLocation(gl.program,'u_Angle'); 
gl.uniform1f(u_Angle,3.14*0.25); 

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