webgl模型矩阵

最新推荐文章于 2023-08-12 10:29:31 发布
最新推荐文章于 2023-08-12 10:29:31 发布
阅读量3.4k 收藏 4
点赞数 1
分类专栏： webgl 文章标签： webgl 模型矩阵 动画变换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_38766085/article/details/79722222
版权

模型矩阵在webgl中表示 模型的缩放 旋转 平移的

所以模型矩阵包含了 

旋转矩阵:


缩放矩阵:


平移矩阵:


下面给出一份演示:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<canvas id="cvs" width="800" height="800"></canvas>
<div></div>
<button οnclick="move('a')">右移动</button>
<button οnclick="move('b')">左移动</button>
<button οnclick="move('c')">上移动</button>
<button οnclick="move('d')">下移动</button>
<button οnclick="move('f')">放大</button>
<button οnclick="move('e')">缩小</button>
<script id="vertex" type="text/v-shader">
  precision highp float;
  attribute vec3 position;
  uniform mat4 mat;
  varying vec4 color;
  void main(){
    gl_Position=mat*vec4(position,1.0);

    color=vec4(gl_Position.x,gl_Position.y,gl_Position.z,0.8);}
</script>
<script  id="fragment" type="text/f-shader">
#ifdef GL_ES
    precision mediump float;
#endif
    varying vec4 color;
    void main(){
        gl_FragColor=color;
    }
</script>

<script type="text/javascript">
    var xInt = 0.0;
    function move(num){
        if(num=="a"){

            moveX(0.05);
        }else if(num=="b"){

            moveX(-0.05);
        }else if(num=="c"){
            moveY(0.05);
        }else if(num=="d"){
            moveY(-0.05);
        }else if(num=="e"){
            scaleFun(0.9);
        }else if(num=="f"){
            scaleFun(1.1);
        }
    }
    (function(global){
        var cvs = document.getElementById("cvs");
         var gl = cvs.getContext("experimental-webgl");
        var vertex = gl.createShader(gl.VERTEX_SHADER);
        var fragment = gl.createShader(gl.FRAGMENT_SHADER);
        var paogram = gl.createProgram();

        gl.shaderSource(vertex,document.getElementById("vertex").text);
        gl.shaderSource(fragment,document.getElementById("fragment").text);
        gl.compileShader(vertex);
        gl.compileShader(fragment);
        gl.attachShader(paogram,vertex);
        gl.attachShader(paogram,fragment);
        gl.linkProgram(paogram);
        gl.useProgram(paogram);

        var data = [
            0.5,0.5,0.5,
            0.5,-0.5,0.5,
            -0.5,0.5,0.5,
            -0.5,0.5,0.5,
            -0.5,-0.5,0.5,
            0.5,-0.5,0.5,

            0.5,0.5,-0.5,
            0.5,-0.5,-0.5,
            -0.5,0.5,-0.5,
            -0.5,0.5,-0.5,
            -0.5,-0.5,-0.5,
            0.5,-0.5,-0.5,

            0.5,0.5,0.5,
            0.5,0.5,-0.5,
            0.5,-0.5,-0.5,
            0.5,0.5,0.5,
            0.5,-0.5,0.5,
            0.5,-0.5,-0.5,

            -0.5,0.5,0.5,
            -0.5,0.5,-0.5,
            -0.5,-0.5,-0.5,
            -0.5,0.5,0.5,
            -0.5,-0.5,0.5,
            -0.5,-0.5,-0.5,

                0.5,0.5,0.5,
                -0.5,0.5,0.5,
                -0.5,0.5,-0.5,
            0.5,0.5,0.5,
            0.5,0.5,-0.5,
            -0.5,0.5,-0.5,

            0.5,-0.5,0.5,
            -0.5,-0.5,0.5,
            -0.5,-0.5,-0.5,
            0.5,-0.5,0.5,
            0.5,-0.5,-0.5,
            -0.5,-0.5,-0.5

        ];
        var positionIndex = gl.getAttribLocation(paogram,"position");
        var matIndex = gl.getUniformLocation(paogram,"mat");
        console.log(gl.getShaderInfoLog(vertex));
        var mM=[
            1,0,0,0,
            0,1,0,0,
            0,0,1,0,
            0,0,0,1
        ];
        console.log(gl.getShaderInfoLog(fragment));


        global.rotateX=function (angle){
            var c = Math.cos(Math.PI/180*angle);
            var s = Math.sin(Math.PI/180*angle);
            var mM1=mM[1],mM5=mM[5],mM9=mM[9];
            mM[1] = c*mM[1] - s*mM[2];
            mM[5] = c*mM[5] - s*mM[6];
            mM[9] = c*mM[9] - s*mM[10];

            mM[2]=s*mM1+c*mM[2];
            mM[6]=s*mM5+c*mM[6];
            mM[10]=s*mM9+c*mM[10];

        };
        global.rotateY=function (angle){
            var c = Math.cos(Math.PI/180*angle);
            var s = Math.sin(Math.PI/180*angle);
            var mM0=mM[0],mM8=mM[8],mM4=mM[4];
            mM[0] = c*mM[0] + s*mM[2];
            mM[4] = c*mM[4] + s*mM[6];
            mM[8] = c*mM[8] + s*mM[10];

            mM[2] = c*mM[2]-s*mM0;
            mM[6] = c*mM[6]-s*mM4;
            mM[10] = c*mM[10]-s*mM8;
        };
        global.rotateZ=function (angle){
            var c = Math.cos(Math.PI/180*angle);
            var s = Math.sin(Math.PI/180*angle);
            var mM0=mM[0],mM4=mM[4],mM8=mM[8];
            mM[0] = c*mM[0]-s*mM[1];
            mM[4] =  c*mM[4]-s*mM[5];
            mM[8] =  c*mM[8]-s*mM[9];

            mM[1]=s*mM0+c*mM[1];
            mM[5]=s*mM4+c*mM[5];
            mM[9]=s*mM8+c*mM[9];
        };
        global.moveX= function(distance){
            mM[0]=mM[0]+distance*mM[3];
            mM[4]=mM[4]+distance*mM[7];
            mM[8]=mM[8]+distance*mM[11];
            mM[12]=mM[12]+distance*mM[15];
        };
        global.moveY= function(distance){
            mM[1]=distance*mM[3]+mM[1];
            mM[5]=distance*mM[7]+mM[5];
            mM[9]=distance*mM[11]+mM[9];
            mM[13]=distance*mM[15]+mM[13];
        };
        global.moveZ= function(distance){
            mM[2]=distance*mM[3]+mM[2];
            mM[6]=distance*mM[7]+mM[6];
            mM[10]=distance*mM[11]+mM[10];
            mM[14]=distance*mM[15]+mM[14];
        };
        global.scaleFun=function(scale){
            mM[0]=scale*mM[0];
            mM[4]=scale*mM[4];
            mM[8]=scale*mM[8];
            mM[12]=scale*mM[12];
            mM[1]=scale*mM[1];
            mM[5]=scale*mM[5];
            mM[9]=scale*mM[9];
            mM[13]=scale*mM[13];
            mM[2]=scale*mM[2];
            mM[6]=scale*mM[6];
            mM[10]=scale*mM[10];
            mM[14]=scale*mM[14];
        };
        var buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
        gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(data),gl.STATIC_DRAW);
        gl.vertexAttribPointer(positionIndex,3,gl.FLOAT,false,0,0);

        gl.enableVertexAttribArray(positionIndex);
        var dis= 0.05;
        var angle=0.5;
        function fun(){

            rotateX(angle);
            rotateY(angle);
            rotateZ(angle);

            gl.uniformMatrix4fv(matIndex,false,new Float32Array(mM));
            gl.clearColor(0.5, 0.5, 0.5, 1);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES,0,30);
            requestAnimationFrame(fun);
        }
        fun();

    })(window);
</script>
</body>
</html>

上面的演示演示了 模型矩阵的一些使用

我们知道模型矩阵*vec4这个表示顶点的信息


变量mM在上面的列子中表示模型矩阵


在学习之前应该先了解一下矩阵相乘的概念:


可以看到是行乘以列得到新的行和列


webgl中我们采用一维数组表示矩阵.

那么问题来了 这个一维数组的前四个元素是表示列还是行啦？

在webgl中前四个元素表示列


设模型矩阵的位置关系是这样的

[

0,1,2,3,

4,5,6,7,

8,9,10,11,

12,13,14,15

]


下面来逐一介绍各个函数:


rotateX 沿着X轴旋转的旋转矩阵

其实就是沿着X轴旋转的矩阵乘以 模型矩阵最后得到一个新的矩阵

因为webgl中前四个元素表示列所以我们用X轴旋转矩阵乘以模型矩阵的前四个元素就表示行乘以列了

最终得到mM[0] =c*mM[1] - s*mM[2];

因为webgl中前四个元素表示列所以mM[1]就不是第一行的元素了 mM[4]才是第一行的第二个元素 所以得到

 mM[5] = c*mM[5] - s*mM[6];

还是同上面的理由可以得到

mM[9] = c*mM[9] - s*mM[10];

rotateX旋转的方法就到这里介绍完毕了 

rotateY和rotateZ都可以经过上面的原理进行推理得到结果


下面介绍moveX方法

moveX方法其实是平移矩阵乘以模型矩阵然后得到一个新的矩阵

根据上面平移矩阵的信息可以知道

我们如果以X轴移动那么就有这样的矩阵

[

    1,0,0,x,

    0,1,0,0,

    0,0,1,0,

    0,0,0,1

]

根据矩阵相乘的原理和webgl数组前四个元素表示列的原理可以知道

   mM[0]=mM[0]+distance*mM[3];
            mM[4]=mM[4]+distance*mM[7];
            mM[8]=mM[8]+distance*mM[11];
            mM[12]=mM[12]+distance*mM[15];

矩阵相乘的结果


moveY 方法:

moveY其实是矩阵

[

    1,0,0,0,

    0,1,0,y,

    0,0,1,0,

    0,0,0,1

]

乘以模型矩阵得到结果

以此类推可以知道moveZ的结果了吧


下面介绍scaleFun的原理

缩放函数其实是缩放矩阵乘以模型矩阵然后得到一个新的矩阵

[

    x,0,0,0,

    0,y,0,0,

    0,0,z,0,

    0,0,0,1

]

为什么缩放矩阵X Y Z都是在一个方法里面执行的拉 是因为楼主在写的时候 写了scaleX 和scaleY ，scaleZ 但是发现模型变形了所以就将缩放矩阵放到一起 就得到上面的结果 原来缩放要一起缩放 


下面说下为什么在执行了方法过后 即mM数组改变了 模型为什么会改变

是因为楼主在演示的最后加一个requestAnimationFrame方法 让模型一直在更新 并把mM数组赋值到着色器语言的mat变量里面






灰灰_世界
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webgl载入模型webgl载入模型webgl载入模型
08-07
webgl载入模型webgl载入模型webgl载入模型 webgl载入模型webgl载入模型webgl载入模型
WebGL 视图矩阵、模型视图矩阵
dabaooooq的博客
09-11 405
“根据自定义的观察者状态，绘制观察者看到的景象”与“使用默认的观察状态，但是对三维对象进行平移、旋转等变换，再绘制观察者看到的景象”，这两种行为是等价的。不论视图怎样变化，无疑就是旋转、平移等操作，最终本质上都是对物体进行相反方向的旋转平移（默认的视角）视点移动的方向与被观察对象（也就是整个世界）移动的方向正好相反。对于视点的旋转，也可以采用类似的方式。 如下式 ＜模型视图矩阵＞=＜视图矩阵＞×＜模型矩阵＞
WebGL学习系列-基础矩阵变换
android开发笔记
04-24 360
前言 在图形学中，特别是涉及到3D的时候，矩阵变换起着非常重要的作用。在实际使用的过程当中，通常每一帧画面可能都会涉及到成千上万个顶点的坐标变换，如果没有矩阵变换计算，一个是计算复杂，一个是难以达到我们想要的计算效率。本小节将介绍通过矩阵计算来实现基本的图形变换。 矩阵 矩阵是一种多个数据集合的表示方式，定义为：由 m × n 个数aijaij排成的m行n列的数表称为m行n列的矩阵，简称m × ...
WebGL -矩阵及其变换
凌风子夜
08-06 656
1.模型矩阵——模型变换 局部（物体）坐标系或者局部（物体）空间： 物体空间比较容易理解，就是需要绘制的3D物体所在的原始坐标系代表的空间。例如在进行设计时，物体的几何中心是摆放到坐标系原点的，这个坐标系代表的就是物体空间。 世界坐标系或者世界空间： 世界空间也不难理解，就是物体在最终3D场景中的摆放位置对应的坐标所属的坐标系代表的空间。 模型变换是将物体坐标系下的物体变换到世界坐标系下。 模型变...
学习WebGL_003_模型矩阵
qq_21476953的博客
10-09 261
1、模型矩阵的概念 模型矩阵,包括了以模型自己为坐标参考系的旋转、缩放、平移一系列变换的统一矩阵， 称为模型矩阵。 2、如何获得 1)变换的种类 this.position = new Vector3(0,0,0); //Traditional X,Y,Z 3d position this.scale = new Vector3(1,1,1); //How much to scale a mes...
WebGL矩阵变换总结（模型矩阵，视图矩阵，投影矩阵）
Webglzhang
04-04 6132
矩阵变换总结（模型矩阵，视图矩阵，投影矩阵） 最近在开发项目的时候，常常用到Three.js，用起来很方便。可是，当引擎迭代升级的时候，以前的很多的技巧，并不一定使用最新的引擎。我认为应当对底层的原生API有很深入的认识并掌握3D开发相关的数学知识才能成为一个合格的3D开发人员。最近在参与编辑WebGL2.0的书籍，也趁着这个机会好好学习下计算及图形学。 ...
webgl第29课-三维空间-模型视图矩阵
谷子的博客
08-12 545
需要电子档书籍可以Q群：828202939   希望可以和大家一起学习、一起进步！！ 上一节课我们学习了  三维空间之加入旋转矩阵的三角形 这一节课我们将学习  三维空间-模型视图矩阵 上节课你仔细看代码你会发...
webgl笔记-1.模型视图矩阵和投影矩阵
dayuan5183的博客
09-12 465
最近在学习WebGL技术的过程中，我补充了一些原本了解甚少的计算机图形学知识。如果有同学和我一样，没有系统学过计算机图形学就接触了3D图形编程，而对不少略为艰深的概念有困惑，希望这些笔记能够帮助你。 模型矩阵 我们必须考虑，当空间中点的位置会发生变化的时候，其坐标如何变化。考虑三种基本的变换：平移、旋转和缩放。 “变换”的含义就是，将点的初始位置的坐标P映射到平移、旋转、缩放后的位置坐标...
webgl 2.0 camera
04-06
WebGL成像采用的是虚拟相机模型。在场景中你通过模型变换，将物体放在场景中不同位置后，最终哪些部分需要成像，显示在屏幕上，主要由视变换和后面要介绍的投影变换、视口变换等决定。其中视变换阶段，通过假想的...
webGL-modelViewer:用原始WebGL编写的极简模型查看器，不依赖于其他框架
05-05
WebGL模型查看器 该项目的目的是为测试WebGL和在浏览器中预览模型提供基础，而又不依赖于其他框架。 如果您正在寻找更强大的功能，请查看Three.js。 安装 您将需要在Web服务器中打开它（由于CORS问题，因此无法将其...
webGL3D机房模型
10-17
一个基于webGL的3D机房demo，实现了烟雾、巡检、漏水、机柜容量等功能
纯原生webgl制作地球模型
08-12
纯原生webgl制作地球模型,涉及着色器，纹理，矩阵变换，事件交互等webgl知识
WebGL编程指南
11-26
247 示例程序（perspectiveview.js） 249 投影矩阵的作用 251 共冶一炉（模型矩阵、视图矩阵和投影矩阵） 252 示例程序（PerspectiveView_mvp.js） 254 用示例程序做实验 257 正确处理对象的前后关系 258 隐藏面消除...
JavaScript WebGL 矩阵
XXHolic
03-26 1436
引子 本以为可以开始尝试三维的效果了，查了一下资料之后发现要先了解矩阵。在这里集中收集一下相关基础知识点。 Origin My GitHub 简介 简单来说，矩阵（Matrix）是数字按行和列的矩形排列。一般描述先行后列，例如下面 2×3 矩阵： 矩阵中每个元素表示也可以根据行和列标记，例如 a1,2 表示第 1 行的第 2 列元素。 在应用数学学科中，矩阵常见于统计分析。 在物理学中，矩阵于电路学、力学、光学和量子物理中都有应用。 计算机科学中，三维动画制作需要用到矩阵。 单位矩阵 单位矩阵有如
WEBGL学习【四】模型视图矩阵
weixin_30653023的博客
10-26 122
<html lang="zh-CN"> <!--服务器运行地址：http://127.0.0.1:8080/webgl/LearnNeHeWebGL/NeHeWebGL4.html--> <head> <title>NeHe's WebGL</title> <meta chars...
模型矩阵、视图矩阵、投影矩阵
热门推荐
Jared_LAU的专栏
09-05 1万+
模型视图投影矩阵的作用，就是将顶点从局部坐标系转化到规范立方体(Canonical View Volnme)中。总而言之，模型视图投影矩阵=投影矩阵×视图矩阵×模型矩阵，模型矩阵将顶点从局部坐标系转化到世界坐标系中，视图矩阵将顶点从世界坐标系转化到视图坐标系下，而投影矩阵将顶点从视图坐标系转化到规范立方体中。 如下图所示，假设现在要将三维空间中的三角形渲染到屏幕上。三角形的模型文件中，顶点坐标是
webgl 入门的简单小模型
戴帽子的猫
09-01 694
onload = function () { var c = document.getElementById("canvas"); c.width = 500; c.height = 300; var gl = c.getContext('webgl') || c.getContext('experimental-webgl'); gl.clearCo
[WebGL入门]五，矩阵的基础知识
lufy小屋
07-31 1万+
这次，不是让你完全理解矩阵，就是先介绍一下，如果要阵的讲解矩阵的话，你必须一个脚踩进数学世界的大门才行。 进行3D渲染，矩阵是不可缺少的，而且要彻底理解矩阵是非常难的。所以现在先明白一下矩阵到底是个什么东西就行了。 以后，我有可能会专门进行矩阵的讲解，首先，简单理解一下就好。重要的是，比起零基础，先来知道一下矩阵的用处。如果有兴趣的话，网上有很多相关的介绍，理解的越深肯定越好。如果有时间的话，可以先自己看一下。
体渲染原理及WebGL实现【Volume Rendering】
新缸中之脑
08-12 2057
体渲染（Volume Rendering）是NeRF神经场辐射AI模型的基础，与传统渲染使用三角形来显示 3D 图形不同，体渲染使用其他方法，例如体积光线投射 (Volume Ray Casting)。本文介绍体渲染的原理并提供Three.js实现代码，源代码可以从下载。推荐：用快速搭建可编程3D场景。
前端工程师webgl
最新发布
11-13
WebGL是一种基于OpenGL ES 2.0的3D图形标准，它允许在浏览器中呈现交互式3D和2D图形，而无需使用插件。作为前端工程师，如果你想攻陷可视化（WebGL方向）应用平台开发，你需要掌握以下技能： 1.了解WebGL的基本概念和原理，包括WebGL的渲染流程、着色器语言等。 2.掌握JavaScript编程语言，包括ES6及以上版本的语法和特性。 3.熟悉HTML和CSS，了解WebGL与HTML和CSS的交互方式。 4.掌握WebGL的相关库和框架，例如Three.js、Babylon.js等。 5.了解计算机图形学的基本概念和算法，例如矩阵变换、光照模型、纹理映射等。 6.具备良好的数学基础，包括线性代数、微积分等。 7.具备良好的团队协作和沟通能力，能够与设计师、后端工程师等进行有效的沟通和协作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值