13 WebGL移动、旋转和缩放的旋转和缩放

最新推荐文章于 2024-04-28 22:17:04 发布

暮志未晚NAN

最新推荐文章于 2024-04-28 22:17:04 发布

阅读量4k

点赞数 1

分类专栏： WebGL 文章标签： webgl 旋转基本图形移动缩放

本文链接：https://blog.csdn.net/qq_30100043/article/details/71511908

版权

WebGL 专栏收录该内容

58 篇文章 74 订阅

订阅专栏

案例查看地址：点击这里

相对于平移来说，WebGL的选择就复杂一些，能够旋转，首先你要指明：

1.旋转轴：你要指明通过哪个轴进行旋转

2.旋转方向：逆时针还是顺时针旋转

3.旋转的角度

如下图这种，逆时针选择通过z轴旋转，为正旋转。那我们怎么通过这些所知的内容，求出旋转后的顶点的坐标呢？

p和p'是老点的位置和新点的位置，r是距离原点的距离，α是p点距离x轴的角度，β是选中的角度。

1.首选求出p点和x相交的角度a，旋转后两个点距离旋转轴原点距离都是相同的，所以r的长度可以确定。

2.得知α的度数以后，就能得到旋转后的p'点和x轴的角度。

3.然后再通过三角函数计算出旋转后的p'点的x坐标和y坐标。

首先通过：

推理出来：

cos a = x/r;
sin a = y/r;
cos(a+b) = x'/r;
sin(a+b) = y'/r;

换个角度：

r = x/cos a;
r = y/sin a;
x' = r*cos(a+b);
y' = r*sin(a+b);

然后通过：

得到：

x' = r*(cos a * cos b - sin a * sin b);
y' = r*(sin a * cos b + cos a * sin b);

x' = r*cos a * cos b - r*sin a * sin b;
y' = r*sin a*cos b + r*cos a * sin b;

x' = x * cos b - y * sin b;
y' = y * cos b + x * sin b;

所以：通过公式，我们只要求出sin b和cos b，就能得到旋转后的x坐标和y坐标。

这一块的内容由于老长时间没学了，本人也忘的差不多了，算了，就写成这样吧，你们如果还不懂，就找到高中的课本。。。

由于正方形不好看效果，所以就改为了用三角形实现

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body onload="main()">
<canvas id="canvas" height="400" width="400">
    你的浏览器不支持WebGL，请更换新的浏览器
</canvas>
</body>
<script src="lib/webgl-utils.js" ></script>
<script src="lib/webgl-debug.js" ></script>
<script src="lib/cuon-utils.js" ></script>
<script>
    //顶点着色器程序
    var VSHADER_SOURCE="" +
        "attribute vec4 a_Position;\n" +
        "uniform float u_SinB,u_CosB;\n" +//声明存储sin b 和 cos b 的浮点数变量
        "void main(){\n" +
        "   gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;\n" +//换算出x点的坐标
        "   gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;\n" +//换算出y点的坐标
        "   gl_Position.z = a_Position.z;\n" +//设置z坐标
        "   gl_Position.w = 1.0;\n" +
        "}\n";

    //片元着色器程序
    var FSHADER_SOURCE = "" +
        "void main(){\n" +
        "   gl_FragColor = vec4(0.0,1.0,0.0,1.0);\n" +//设置颜色
        "}\n";

    //设置旋转的角度
    var angle = 60.0;

    function main() {
        //首先获取到canvas的dom对象
        var canvas = document.getElementById("canvas");

        //获取到WebGL的上下文
        var gl = getWebGLContext(canvas);

        //不支持WebGL的浏览器将打印一个错误，并结束代码运行
        if (!gl) {
            console.log("浏览器不支持WebGL");
            return;
        }

        //初始化着色器
        if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
            console.log("初始化着色器失败");
            return;
        }

        //设置顶点位置
        var n = initVertexBuffers(gl);
        if(n < 0){
            console.log("无法获取顶点相关的信息");
            return;
        }

        //计算出sin b和cos b 的值
        var radin = Math.PI * angle/180.0;//转为弧度制
        var cosB = Math.cos(radin);//计算出cos b
        var sinB = Math.sin(radin);//计算出sin b

        //获取uniform变量的存储位置
        var u_SinB = gl.getUniformLocation(gl.program,"u_SinB");
        var u_CosB = gl.getUniformLocation(gl.program,"u_CosB");
        if(u_CosB < 0 || u_SinB < 0){
            console.log("无法获取变量的存储位置");
            return;
        }

        //给uniform变量赋值
        gl.uniform1f(u_SinB,sinB);
        gl.uniform1f(u_CosB,cosB);

        //指定一个覆盖（清空）canvas的颜色
        gl.clearColor(0.0, 0.0, 0.0, 1.0);

        //清除canvas
        gl.clear(gl.COLOR_BUFFER_BIT);

        //将三个点绘制出来
        gl.drawArrays(gl.TRIANGLES,0,n);
    }

    function initVertexBuffers(gl) {
        var vertices = new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5]);
        var n = 3; //绘制点的个数

        //创建缓冲区对象
        var vertexBuffer = gl.createBuffer();
        if(!vertexBuffer){
            console.log("创建缓冲区对象失败");
            return -1;
        }

        //将缓冲区对象绑定到目标
        gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);

        //向缓冲区对象中写入数据
        gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);

        //获取attribute变量的存储位置
        var a_Position = gl.getAttribLocation(gl.program, "a_Position");

        if(a_Position < 0){
            console.log("无法获取变量的存储位置");
            return;
        }

        //将缓冲区对象分配给a_Position变量
        gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);

        //链接a_Position变量与分配给它的缓冲区对象
        gl.enableVertexAttribArray(a_Position);

        return n;
    }
</script>
</html>

上面的代码实现了图形的旋转。

缩放：

图形的缩放就简单的多多了，为什么？

我们在设置顶点着色器的时候，是不是有一个gl_Position.w得值，在之前介绍顶点着色器的时候，介绍过第四个值得作用，就是实际点的位置都是除以w以后的值。

默认都是1.0，就是不缩小也不放大，如果要放大一倍呢，那就把这个值设置成0.5好了。

效果呢，就会变成下面的：

个人感觉，还是缩放简单啊，下一节，我们将会将到矩阵，现在我反正还看不懂。

暮志未晚NAN

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
13 WebGL移动、旋转和缩放的旋转和缩放

案例查看地址：点击这里相对于平移来说，WebGL的选择就复杂一些，能够旋转，首先你要指明：1.旋转轴：你要指明通过哪个轴进行旋转2.旋转方向：逆时针还是顺时针旋转3.旋转的角度如下图这种，逆时针选择通过z轴旋转，为正旋转。那我们怎么通过这些所知的内容，求出旋转后的顶点的坐标呢？p和p'是老点的位置和新点的位置，r是距离原点的距离，α是p点距离x轴的角度，β是选中的角度。...
复制链接

扫一扫