WebGL笔记:矩阵的变换之平移的实现

这篇具有很好参考价值的文章主要介绍了WebGL笔记:矩阵的变换之平移的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

矩阵的变换

变换

  • 变换有三种状态:平移旋转缩放
  • 当我们变换一个图形时,实际上就是在移动这个图形的所有顶点。
  • 解释
    • webgl 要绘图的话,它是先定顶点的,就比如说我要画个三角形,那它会先把这三角形的三个顶点定出来。
    • 然后它再考虑以什么样的方式去绘制这个三角形, 就比如说在 gl.drawArrays(gl.TRIANGLES, 0, 3) 这个方法
      • 第一个参数是 TRIANGLES,让它画一个独立三角形,我依次连接这三个点,然后逐片元给它们填充颜色
      • 接下来我就可以对三角形进行变换操作了,比如:旋转,缩放,平移。
      • 我在做这三种操作的时候,实际上就是改变了三角形的顶点位置

平移

  • 对图形的平移,就是对图形所有顶点的平移

  • 举个简单的例子

    • 就比如说已知点p的位置是(x,y,z)
    • 那我要对它进行一个相对的移动,
    • 移动的三个分量分别是 tx, ty, tz, 那么求它移动完之后的位置 p’ (x’, y’, z’)
    • 只要让它这三个分量做加法就可以了
  • 即,如下图

    x'=x+tx
    y'=y+ty
    z'=z+tz
    
WebGL笔记:矩阵的变换之平移的实现,Canvas | Webgl | Three.js,webgl,矩阵,平移
  • 如果上面这个图形中并非只有一个顶点,而是三个顶点或者更多,那么所有的顶点也是按同样的原理去进行位移的
  • 就比如下面这个图这个三角形在位移的时候啊,其实上也就是它的所有顶点去做一个相对的位移
WebGL笔记:矩阵的变换之平移的实现,Canvas | Webgl | Three.js,webgl,矩阵,平移

向量的加法

  • 在实际的编码中,要有一个向量的概念。
  • 就比如说 (x,y,z) 这三个量可以构成一个三维点位
  • 我们可以说它是一个顶点位置,也可以说它是一个向量, 至于这个 (x,y,z) 到底是什么?我们要看它是要做什么的
  • 就比如说我把点p(x,y,z)作为点位的时候,那它就是个点
  • 如果我把p的移动距离 tx, ty, tz 封装成一个对象 pt(tx,ty,tz), 那么 pt 就是一个向量,一个为点p 指明移动方向和距离的向量
  • 那么,点 p 的移动结果 p’ 就可以这么写:p’ = p + pt
  • 由此可知,顶点的位移,就是向量的加法

编写向量加法代码

  • 在GLSLES语言里,是直接可以进行向量运算的,下面是顶点着色器里的代码:

    attribute vec4 a_Position;
    vec4 translation = vec4(0, 0.2, 0, 0);
    void main() {
        gl_Position = a_Position + translation;
    }
    
    • a_Position 是原始点位,属于attribute 变量
    • translation 是顶点着色器里的私有变量,没有向外部暴露,属于4维向量
    • a_Position + translation 便是着色器内的向量加法,这里是对原始点位进行位移
  • 基于对初始的这个a_Position 点位进行一个位移的话,那我可以直接让它加上一个四维的向量,就比如这里的这个translation,就是我声明的一个个四四维向量,让它直接加上即可

  • 上述 translation 是写死的 ,我们也可以把 translation 变量暴露出去,让js可以修改图形位置:

    <script id="vertexShader" type="x-shader/x-vertex">
        attribute vec4 a_Position;
        uniform vec4 u_Translation;
        void main() {
            gl_Position = a_Position + u_Translation;
        }
    </script>
    
  • 在js 中修改uniform 变量的方法,我们之前已经说过:

    // 获取 uniform 变量
    const u_Translation = gl.getUniformLocation(gl.program, 'u_Translation');
    // 为 uniform 变量赋值
    gl.uniform4f(u_Translation, 0, 0.5, 0, 0);
    
  • 之后,可以加一段逐帧动画:

    let y = 0;
    !(function animate() {
        y += 0.02;
        if(y > 1) y = -1;
        gl.uniform4f(u_Translation, 0, y, 0, 0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES, 0, 3);
        requestAnimationFrame(animate)
    })()
    

WebGL笔记:矩阵的变换之平移的实现,Canvas | Webgl | Three.js,webgl,矩阵,平移

完整代码文章来源地址https://www.toymoban.com/news/detail-757935.html

<canvas id="canvas"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec4 a_Position;
  uniform vec4 u_Translation;
  void main() {
      gl_Position = a_Position + u_Translation;
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  void main() {
      gl_FragColor = vec4(1.0,1.0,0.0,1.0);
  }
</script>
<script type="module">
  // 这里参考之前博文代码
  import { initShaders } from './util.js';

  const canvas = document.getElementById('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const gl = canvas.getContext('webgl');

  const vsSource = document.getElementById('vertexShader').innerText;
  const fsSource = document.getElementById('fragmentShader').innerText;
  initShaders(gl, vsSource, fsSource);

  const vertices = new Float32Array([
    0.0, 0.1,
    -0.1, -0.1,
    0.1, -0.1
  ])

  const vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(a_Position);

  //获取uniform 变量
  const u_Translation = gl.getUniformLocation(gl.program, 'u_Translation');
  //为uniform 变量赋值
  gl.uniform4f(u_Translation, 0, 0.5, 0, 0);

  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES, 0, 3);

  let y = 0
  !(function animate() {
    y += 0.02;
    if (y > 1) y = -1;
    gl.uniform4f(u_Translation, 0, y, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    requestAnimationFrame(animate);
  })()
</script>

到了这里,关于WebGL笔记:矩阵的变换之平移的实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Web3D数学基础(平移、旋转、缩放矩阵)—WebGL、WebGPU、Threejs

    参考资料:threejs中文网 threejs qq交流群:814702116 本下节课给大家介绍下矩阵的概念,以及用于几何变换的矩阵,比如平移矩阵、缩放矩阵、旋转矩阵。 如果你对这些几何变换的矩阵概念比较熟悉,可以跳过本节课。 线性代数、图形学 如果你有《线性代数》、《计算机图形学

    2024年02月03日
    浏览(50)
  • 使用 React Three Fiber 和 GSAP 实现 WebGL 轮播动画

    参考:Building a WebGL Carousel with React Three Fiber and GSAP 在线 demo github 源码 效果来源于由 Eum Ray 创建的网站 alcre.co.kr,具有迷人的视觉效果和交互性,具有可拖动或滚动的轮播,具有有趣的图像展示效果。 本文将使用 WebGL、React Three Fiber 和 GSAP 实现类似的效果。通过本文,可以了

    2024年02月05日
    浏览(57)
  • 如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课(一)

    序: 又是很久没有更新文章了,这次索性将之前做的三维煤矿项目拿出来讲讲,一是回顾技术,二是锻炼一下文笔。 随着科技的不断发展,越来越多的人开始关注煤矿采集的安全和效率问题。为了更好地展示煤矿采集的过程和效率,可视化展示系统成为了一个非常重要的工

    2024年02月08日
    浏览(66)
  • Three.js教程:WebGL渲染器设置(锯齿模糊)

    推荐:将 NSDT场景编辑器 加入你的3D工具链 其他系列工具: NSDT简石数字孪生 一般实际开发,threejs的WebGL渲染器需要进行一些通用的基础配置,本节课给大家简单介绍下,比如渲染模糊或锯齿问题。 渲染器锯齿属性 .antialias 设置渲染器锯齿属性 .antialias 的值可以直接在参数中

    2024年02月11日
    浏览(53)
  • 2D应用开发是选择WebGL 还是选择Canvas?

    推荐:使用 NSDT场景编辑器 助你快速搭建可二次编辑的3D应用场景 在介绍WebGL和Canvas的区别和联系之前,需要先了解它们各自的定义和特点。 WebGL是一种基于标准HTML5的技术,用于在Web浏览器中实时渲染3D图形。它是由Khronos Group开发的一套API(Application Programming Interface),允许

    2024年02月12日
    浏览(33)
  • Halcon用矩阵实现图像变换(平移,旋转,缩放,镜像等)

    目录 图像变换介绍  用Halcon自带的算子实现图像变换 使用矩阵来实现相关算子的功能 一、平移 二、旋转 三、缩放 四、镜像 完整代码         在halcon中经常会用到图像变换的操作,然后这次作业是用矩阵来实现相关算子的功能,学到了挺多的所以就记录下来方便复习。

    2024年04月17日
    浏览(40)
  • Three 之 three.js (webgl)鼠标/手指通过射线移动物体的简单整理封装

    目录 Three 之 three.js (webgl)鼠标/手指通过射线移动物体的简单整理封装 一、简单介绍 二、实现原理 三、注意事项 四、效果预览 五、案例实现步骤 六、关键代码 Three js 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。 本节介绍, three.js (webgl) 中,

    2024年02月16日
    浏览(55)
  • webgl canvas系列——快速加背景、抠图、加水印并下载图片

    大家好,我是yma16,本文分享webgl canvas系列——快速抠图、加水印。 该系列往期文章 web canvas系列——快速入门上手绘制二维空间点、线、面 方法 作用 drawImage(image, x, y) image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标。 drawImage(image, x, y, width, height) width 和

    2024年04月09日
    浏览(61)
  • 使用Three.js创建令人惊叹的WebGL 3D可视化

    WebGL 可视化 3D 绘图是一项新兴技术,具有广阔的应用前景。它允许开发人员在 Web 浏览器中创建和渲染 3D 图形,而无需安装额外的插件或软件。 本博客将介绍 Three.js,Three.js 是一个功能强大的 WebGL 框架,提供了丰富的 API 用于创建和渲染 3D 图形,接下来让我们通

    2024年01月19日
    浏览(60)
  • WebGL+Three.js入门与实战——给画布换颜色、绘制一个点、三维坐标系

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,正逐渐往全干发展 📃 个人状态: 研发工程师,现效力于中国工业软件事业 🚀 人生格言: 积跬步至千里,积小流成江海 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒

    2024年02月04日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包