第四节 WebGL中的图形变换：旋转、平移和缩放

最新推荐文章于 2023-03-09 20:25:14 发布
置顶 VIP文章 最新推荐文章于 2023-03-09 20:25:14 发布
阅读量4.8k 收藏 10
点赞数 1
分类专栏： WebGL入门 文章标签： 旋转变换 缩放变换 平移变换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37338983/article/details/78556107
版权

在WebGL中，如果我们想实现更高级的动态场景，或者是对物体进行坐标变换，那么旋转、平移和缩放必不可少。这些变换所涉及的是一些矩阵运算，先从二维平面讲起，再推导至三维空间。下面分别对这几种变换进行一个讲解：

学习交流欢迎加群：789723098，博主会将一些demo整理共享

1 旋转变换

试想一下，如果当一个场景只是静态的，没有动画，那将是多么令人乏味的画面，而旋转变换的加入将会使场景的动画效果更具观赏性。如下图所示，表示点(x, y)绕原点旋转一定角度后到达新的位置，假设原点到想（x, y）半径为R。可参考我另一篇博客的完整示例，绘制一个旋转的彩色立方体：点击打开链接
这里写图片描述

图中的关系可由系列式子计算：

最低0.47元/天 解锁文章
coder_路远
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【零基础学WebGL】矩阵变换
老司机的后备箱
05-13 725
矩阵变量 GLSL ES语言中，通过关键字mat2、mat3、mat4声明矩阵，并提供内置函数mat2()、mat3()、mat4()构造矩阵。 支持三种方式初始化矩阵： 从第一列开始，逐列指定元素的值。这里与，高数中习惯按照逐行书写矩阵不同。 只传入一个值，作为对角矩阵的对角线值； 传入多个向量； 如下代码初始化2x2单位矩阵： // 按照列优先，逐列指定每个元素 mat2 aMat = mat2( 1.0, 0, // 第一列 0, 1.0 // 第二列 ); // 构造对角矩阵，值
WebGL中的旋转和移动
无涯
03-13 2811
WebGL中使用rotate(mvMatrix,[0,1,0])函数进行旋转操作，其旋转总是以自身为中心轴进行。 使用translate(mvMatrix,[x,y,z])函数进行移动操作，其移动也是以当前物体变换后的坐标轴为基础。物体进行旋转后，其坐标轴的方向也发生了变化，其自身坐标系与物体坐标系已经不同，其移动方向以变化后的自身坐标系方向为基准。 使用两种操作时，一定要考虑两种操作
WebGL入门(二十五)-物体变换时光照处理、立方体平移旋转缩放变换时漫反射光照计算、逆转置矩阵
点燃火柴的博客
04-03 566
立方体平移旋转缩放时漫反射光照计算1.demo效果2.相关知识点2.1 物体坐标变换法向量变化2.2 矩阵逆转置3. demo代码4.后续 1.demo效果 如上，图一为变换前的效果，是贴的上一个demo的运行效果图，图二是本次demo的效果，在上一个demo的基础上，处理了物体坐标变换时光照变化的效果 2.相关知识点 2.1 物体坐标变换法向量变化 如上图，归纳一下物体坐标变换法向量变化的规律如下 平移变换， 法向量不会改变 旋转变换， 大多数情况下法向量会变 ，如果绕某个轴旋转360度，又回到原
threejs第一课 30行代码实现旋转的立方体
谷子的博客
09-12 2175
需要电子档书籍可以Q群：828202939   希望可以和大家一起学习、一起进步！！ 花了大概2个月时间把webgl编程指南肯完了，有时候工作忙就没来得及更新博客！ 接下的时间让我们重温threeTS的乐趣！ ...
WebGL实现立方体旋转动画
u014291990的博客
11-25 1565
立方体旋转动画 本文是WebGL电子书的1.10节内容 要通过WebGL渲染出立方体旋转的动画效果，你首要了解“帧”这个概念，比如你观看的视频其实就是一帧一帧的图片连续播放的效果，只要图片刷新的频率的不是太低，人的眼睛都不会察觉，一般30~60FPS就可以。 WebGL如何产生一帧一帧的图片，这个很简单，执行一次绘制函数gl.drawArrays()，WebGL图形系统就会通知GPU渲染管线处理顶...
opengl绘制带贴图的立方体并设置自动旋转
y0205yang的博客
03-09 242
opengl绘制带贴图的立方体，使用vs2013编译
WEBGL学习【六】动起来的三棱锥和立方体
weixin_34159110的博客
11-02 366
版权声明：本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/78429154 &...
webgl——绘制一个旋转的彩色立方体（四）
jiegiser博客
03-06 957
文章目录前言一、整体代码以及实现效果二、绘制步骤1.构建顶点数据2.通过顶点索引构建立方体总结 前言 前面文章介绍了如何通过多点来绘制图形，通过建立缓冲区对象，将多个数据传入到缓冲区中；然后 webgl 进行读取缓冲区中的数据进行渲染。上个例子绘制 “F” 的坐标点不是很多；但是如果我们绘制一个立方体。如果还跟之前一样的绘制方式；立方体的每一个面由两个三角形组成，每个三角形有三个顶点，所以每个月需要有六个顶点，那么顶点数据需要有 36 个，我们会发现其实我们只需要用 8 个顶点来进行绘制立方体，但是如何
OpenGL编程逐步深入（七）旋转变换
whl0071的专栏
06-10 1874
这一节我们来看一下旋转变换。旋转变换指的是给我们一个指点的点和角度，我们需要绕着过该点的轴线將对象旋转对应的角度。这里我们只改变X/Y/Z中的两个分量，第三个分量保持不变。这意味着我们的图形只在三个平面内旋转：XY平面（绕着Z轴）、YZ平面（绕着X轴）、XZ（绕着Y轴）。还有更复杂的旋转方式这里我们暂时用不到。我们来概括性的定义这个问题。考虑下面这样的图形：我们需要沿着圆把点（x1,y2）移动到（x2,y2），换句话说就是把（x1,y1）旋转a2角度。我们假定圆的半径为1，则有：使用正余弦展开公式：可得：在
webgl图形平移、缩放、旋转
qq_37987033的博客
01-07 1427
在webgl中将图形进行平移、旋转、缩放的操作称为变换或仿射变换，图形的仿射变换涉及到顶点位置的修改，通过顶点着色器是比较直接的方式。本文通过着色器实现对webgl图形的仿射变换。
WebGL实现一个长方体包围盒随鼠标旋转缩放
02-17
通过一个长方体包围盒随鼠标旋转缩放具体实例，涵盖了WebGL中设置模型变换、视图变换、投影变换的技巧
ThreeJs的旋转缩放平移控件和性能监控控件
11-29
ThreeJs的旋转缩放平移控件OrbitControls和性能监控控件stats.min.js
webgl2-2d:WebGL2 中的画布 API 实现
05-29
webgl2-2d WebGL2 中的画布 API 实现用法 // const ctx = canvas.getContext('2d') // origin canvas 2D contextconst ctx = canvas . getContext ( 'webgl2-2d' ) // WebGL2 implementation清单参考： : ...
WebGL实现两个模型的独立运动：旋转、前进后退、缩放
11-18
WebGL实现两个三维模型的独立运动，包括每个模型的转向、前进后退、缩放功能。此处方向均以运动模型作为参考，模型正面方向为前进，相反方向为后退，绕动物中轴线转向。
paint-webgl:WebGL中的交互式和动态绘画模拟
04-30
介绍WebGL中的交互式和动态绘画模拟。 现场版。 这是OpenGL项目可视化部分的WebGL端口。描述这幅画实际上是几层的叠加。 每层都由一组粒子，流图和背景图像组成。背景背景图像是固定的，有两个用途： 为颗粒赋予颜色...
webgl-experiments:WebGL中正在进行的实验集合
05-27
WebGL实验 免责声明 在查看，评估或使用此存储库中演示的任何代码或想法时，应...Transform -位置，旋转和比例的组合 实验 演示使用实例化更有效地渲染大量对象。 演示可用于进行更有效的场景查询的QuadTree实现。 ..
第五节 WebGL绘制、鼠标与键盘交互实例
Bruce_wjh的博客
11-16 9119
学习交流欢迎加群：789723098，博主会将一些demo整理共享 前几篇一直在讲一些基础性的内容，之前的介绍一直都是理论上的解释，理论总要与实际相结合，才能有所收获，知识也才能得到有效的应用。下面，就从一个实例开始讲解，这个实例绘制了一个彩色立方体，且实现了键盘与鼠标的交互，shift+鼠标左键或中建是旋转立方体，shift+鼠标右键是平移立方体，shift+鼠标滚轮缩放立方体，其效果图如下：...
第三节 WebGL中使用gl.drawArrays()和gl.drawElements()绘制图形
Bruce_wjh的博客
11-16 7803
学习交流欢迎加群：789723098，博主会将一些demo整理共享 我们可能都知道，很多三维模型构成的基本单位都是三角形（三角面片），例如.stl和.obj这两种应用广泛的三维模型文件格式。再复杂的模型都可以由三角面片来组成，由此可见三角形在图形学中的重要地位。而且WebGL里面除了支持点（gl.POINTS）、线（gl.LINES、gl.LINE_STRIP和gl.LINE_LOOP），就是三...
WebGL画一个彩色矩形
Bruce_wjh的博客
06-26 7105
学习交流欢迎加群：789723098，博主会将一些demo整理共享 今天和大家分享一个用WebGL画矩形(rectangle)的小Demo,也可用来绘制三角形(triangle)。本文适用于初学者掌握WebGL的基本绘图知识，WebGL是OpenGL的Web版本，所以它的绘图过程与OpenGL是一样的，这里不赘述，大家自行百度。 今天分享的是绘制一个二维的图形--矩形；二维...
mapbox 渲染图标报错 webGl: INvALID ENuM: activeTexture: texture unit out of range
最新发布
06-09
这个错误通常是由于 WebGL 中纹理单元超出范围导致的。纹理单元是指显卡中用于存储和处理纹理数据的硬件单元，它们的数量是有限的，超出范围就会出现这个错误。 解决这个问题的方法是调整地图中渲染图标的纹理单元数量。你可以通过 Mapbox 的 API 中的 `map.addImage()` 方法来添加地图图标，该方法有一个可选参数 `options`，其中包含了 `pixelRatio` 和 `sdf` 两个可选属性，可以通过调整这两个属性的值来解决问题。 例如，你可以将 `pixelRatio` 的值设置为1，将 `sdf` 的值设置为false，这样就可以避免出现上述错误。 ``` map.addImage('marker', marker, { pixelRatio: 1, sdf: false }); ``` 如果以上方法仍然无法解决问题，你可以提供更多的细节信息，例如代码片段或相关的报错信息，这样我才能更准确地帮助你解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值