webgl变换:深入图形平移

作者:神秘网友 发布时间:2021-03-10 18:20:09

webgl变换:深入图形平移

在以前的文章里,不管是绘制图形,绘制点亦或者是改变色值,所有的内容都是静态的。

webgl 里,图形的运动分为 平移、旋转、缩放 三种类型。

接下来,我们会从零基础开始,一点一点来深入了解图形如何进行运动。

首先来从零开始了解下图形的平移

1. 图形平移

首先我们来看如何实现图形的平移操作。

平移的操作就是将图形的原始坐标加上对应的移动距离。首先来看下平移的实现

const vertexShaderSource = "" +
      "attribute vec4 apos;" + // 定义一个坐标
      "uniform float x;" + // 处理 x 轴移动
      "uniform float y;" + // 处理 y 轴移动
      "void main(){" +
      " gl_Position.x = apos.x + x;" +
      " gl_Position.y = apos.y + y;" +
      " gl_Position.z = 0.0;" + // z轴固定
      " gl_Position.w = 1.0;" +
      "}";
const fragmentShaderSource = "" +
      "void main(){" +
      " gl_FragColor = vec4(1.0,0.0,0.0,1.0);" +
      "}";

// initShader已经实现了很多次,本次就不再赘述了
const program = initShader(gl,vertexShaderSource,fragmentShaderSource);

const buffer = gl.createBuffer();
const data = new Float32Array([
  0.0,0.0,
  -0.5,-0.5,
  0.5,-0.5,
]);

gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);

const aposlocation = gl.getAttribLocation(program,'apos');
const xlocation = gl.getUniformLocation(program,'x');
const ylocation = gl.getUniformLocation(program,'y');

gl.vertexAttribPointer(aposlocation,2,gl.FLOAT,false,0,0);
gl.enableVertexAttribArray(aposlocation);

let x = 0.0;
let y = 0.0;
function run () {
  gl.uniform1f(xlocation,x += 0.01);
  gl.uniform1f(ylocation,y += 0.01);

  gl.drawArrays(gl.TRIANGLES,0,3);
  // 使用此方法实现一个动画
  requestAnimationFrame(run)
}
run()

解释:

  • 首先声明一个变量 x 和变量 y ,用来处理 x轴 和 y轴 的坐标。这里使用的是 uniform 变量,因为平移的操作对于图形上的所有顶点都有影响。
  • 通过 gl_Position.[xyzw] 来分别设置 x、y、z、w 的值。用于改变图形位置。
  • 使用 gl.uniform1f 来为 x 和 y 赋值
  • 使用 requestAnimationFrame 实现一个缓动动画。方便观察效果。
  • 其他的操作,缓冲区,绘制,赋值,激活,

可以看到,这样处理图形移动的话很好理解,但是因为一个移动,我们声明了两个 uniform 变量来实现。并且分开设置的 xyz 坐标,非常的不方便。

所以,在处理webgl变换(平移、缩放、旋转)的时候,通常使用矩阵来实现。接下来就来看看,如何使用矩阵实现图形的平移。

2. 平移矩阵

推导平移矩阵的步骤:

  • 获取平移前后的图形坐标(三维)
  • 计算平移前后的差值
  • 带入到平移矩阵
  • 处理图形顶点
  • 获得平移后的图形

2.1 平移矩阵的推导

首先让我们来看一幅图片。

这幅图片的意义就是我们将橙色的三角形移动到蓝色虚线三角形处。

移动之后的蓝色虚线三角形的三个坐标分别为

  • x’ = x + x1
  • y' = y + y1
  • z' = z + z1
  • w=1 齐次坐标为1

2.2 获得平移矩阵

webgl 中,通常使用矩阵来实现图形变换。下面我们来看看矩阵如何表示。

左侧是平移之前的原始坐标,中间的是一个平移矩阵,经过两者相乘,可以得到一个平移之后的坐标。

现在我们来看下平移矩阵如何计算得出

首先通过上述图片中的矩阵我们来得到几个方程式。用左侧的列分别乘矩阵的行,可以得到一下公式

  • ax + by + cz + w = x'
  • ex + fy + gz + h = y'
  • ix + jy + kz + l = z'
  • mx + ny + oz + p = w'

公式合并:

第一节 里的四个方程式和第二节里的四个方程式合并,可以得到如下结果:

  • ax + by + cz + w = x + x1':只有当 a = 1,b = c = 0, w = x1 的时候,等式左右两边成立
  • ex + fy + gz + h = y + y1':只有当 f = 1, e = g = 0, h = y1 的时候,等式左右两边成立
  • ix + jy + kz + l = z + z1':只有当 k = 1,i = j = 0, l = z1 的时候,等式左右两边成立
  • mx + ny + oz + p = 1':只有当 m = n = o = 0, p = 1 的时候,等式左右两边成立

经过上述方程式,可以得到一个平移的矩阵:

| 1 0 0 x |

| 0 1 0 y |

| 0 0 1 z |

| 0 0 0 1 |

之后将平移矩阵和原始坐标相乘,就可以得到平移之后的坐标。

3. 矩阵实战

来看看使用矩阵如何处理图形的平移。

第一步,创建着色器源代码
const vertexShaderSource = "" +
      "attribute vec4 apos;" +
      "uniform mat4 mat;" + // 创建一个 uniform 变量,代表平移矩阵
      "void main(){" +
      " gl_Position = mat * apos;" + // 矩阵与原始坐标相乘
      "}";
const fragmentShaderSource = "" +
      "void main(){" +
      " gl_FragColor = vec4(1.0,0.0,0.0,1.0);" +
      "}";
第二步,创建平移矩阵
let Tx = 0.1;    //x坐标的位置
let Ty = 0.1;    //y坐标的位置
let Tz = 0.0;    //z坐标的位置
let Tw = 1.0;    //差值
const mat = new Float32Array([
  1.0,0.0,0.0,0.0,
  0.0,1.0,0.0,0.0,
  0.0,0.0,1.0,0.0,
  Tx,Ty,Tz,Tw,
]);

这里可以看到,使用的矩阵和我们推导出来的矩阵不太一样,推导的平移矩阵里 xyzw 位于矩阵的右侧,现在是位于矩阵的底部,这是为什么呢

这是因为在 webgl 中,矩阵的使用需要按照 左上右下 的对角线做一次翻转。所以使用的矩阵,xyzw 位于底部

第三步,绘制一个三角形
const program = initShader(gl,vertexShaderSource,fragmentShaderSource);
const aposlocation = gl.getAttribLocation(program,'apos');
const data =  new Float32Array([
  0.0,0.0,
  -.3,-.3,
  .3,-.3
]);

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);

gl.vertexAttribPointer(aposlocation,2,gl.FLOAT,false,0,0);
gl.enableVertexAttribArray(aposlocation);

gl.drawArrays(gl.TRIANGLES,0,3); // 第五步的时候会重写
第四步,获取矩阵变量,给矩阵赋值
const matlocation = gl.getUniformLocation(program,'mat');
gl.uniformMatrix4fv(matlocation,false,mat);

这里使用 gl.uniformMatrix4fv 来给矩阵赋值。

第五步,添加缓动动画
function run () {
  Tx += 0.01
  Ty += 0.01
  const mat = new Float32Array([
    1.0,0.0,0.0,0.0,
    0.0,1.0,0.0,0.0,
    0.0,0.0,1.0,0.0,
    Tx,Ty,Tz,Tw,
  ]);
  gl.uniformMatrix4fv(matlocation,false,mat);
  gl.drawArrays(gl.TRIANGLES,0,3);

  // 使用此方法实现一个动画
  requestAnimationFrame(run)
}
run()

4. 完整代码

!DOCTYPE html
html lang="en"
head
  meta charset="UTF-8"
  titleTitle/title
/head
body
canvas id="webgl" width="500" height="500"/canvas
script
  const gl = document.getElementById('webgl').getContext('webgl');
  const vertexShaderSource = "" +
    "attribute vec4 apos;" +
    "uniform mat4 mat;" +
    "void main(){" +
    " gl_Position = mat * apos;" +
    "}";
  const fragmentShaderSource = "" +
    "void main(){" +
    " gl_FragColor = vec4(1.0,0.0,0.0,1.0);" +
    "}";

  const program = initShader(gl,vertexShaderSource,fragmentShaderSource);
  const aposlocation = gl.getAttribLocation(program,'apos');
  const matlocation = gl.getUniformLocation(program,'mat');

  const data =  new Float32Array([
    0.0,0.0,
    -.3,-.3,
    .3,-.3
  ]);
  const buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
  gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);

  gl.vertexAttribPointer(aposlocation,2,gl.FLOAT,false,0,0);
  gl.enableVertexAttribArray(aposlocation);

  let Tx = 0.1;    //x坐标的位置
  let Ty = 0.1;    //y坐标的位置
  let Tz = 0.0;    //z坐标的位置
  let Tw = 1.0;    //差值
  function run () {
    Tx += 0.01
    Ty += 0.01
    const mat = new Float32Array([
      1.0,0.0,0.0,0.0,
      0.0,1.0,0.0,0.0,
      0.0,0.0,1.0,0.0,
      Tx,Ty,Tz,Tw,
    ]);
    gl.uniformMatrix4fv(matlocation,false,mat);
    gl.drawArrays(gl.TRIANGLES,0,3);

    // 使用此方法实现一个动画
    requestAnimationFrame(run)
  }
  run()
  function initShader(gl,vertexShaderSource,fragmentShaderSource){
    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

    gl.shaderSource(vertexShader,vertexShaderSource);
    gl.shaderSource(fragmentShader,fragmentShaderSource);

    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);

    const program = gl.createProgram();

    gl.attachShader(program,vertexShader);
    gl.attachShader(program,fragmentShader)

    gl.linkProgram(program);
    gl.useProgram(program);
    return program;
  }
/script
/body
/html

至此,通过矩阵控制图形移动就全部实现完成了。

今天的分享就到这儿了,

Bye~


本文章教程介绍完毕,更多请访问跳墙网其他文章教程!

webgl变换:深入图形平移 相关文章

  1. 深入理解ES6读书笔记1:块级绑定

    var 声明与变量提升 使用 var 关键字声明的变量,无论其实际声明位置在何处,都会被视为声明于所在函数的顶部(如果声明不在任意函数内,则视为在全局作用域的顶部)。这就是变量提升,不过变量的声明虽然被提升到了顶部,但初始化工作还保留在原处。 functi

  2. DotNetCore深入了解:HTTPClientFactory类

    一、HttpClient使用 在C#中,如果我们需要向某特定的URL地址发送Http请求的时候,通常会用到HttpClient类。会将HttpClient包裹在using内部进行声明和初始化,如下面的代码: using (var httpClient = new HttpClient()){ // 逻辑处理代码} HttpClient类包含

  3. MySQL深入研究--学习总结(4)

    前言 接上文,继续学习后续章节。细心的同学已经发现,我整理的并不一定是作者讲的内容,更多是结合自己的理解,加以阐述,所以建议结合原文一起理解。 第13章《为什么表数据删除一般,表文件大小不变》 我们在知道MySQL表的存储,在8.0之前的版本,表结构相

  4. Mybatis深入原理理解

    目录 1 Mybatis原理 1.1 mybatis核心 1.2 原理图 2 Mybatis缓存 2.1 一级缓存 2.1.1 一级缓存的生命周期 2.1.2 怎么判断某两次查询是完全相同的查询 2.2 二级缓存 2.2.1 基础 2.2.2 使用二级缓存 2.2.2.1 序列化 2.2.2.2 配置缓存 3 Mybatis拦截器 3.1 拦截器

  5. 012.Python基础--装饰器深入

    多个装饰器的用法: 装饰器的调用顺序:与@装饰名 出现的顺序相反,越后出现越先执行 装饰器是可叠加使用的 实现两个装饰器的实例: import timedef deco01(x): def wrapper(*args, **kwargs): print("this is deco01") start_time = time.time() x(*args, *

  6. 深入理解Redis的持久化机制

    前言 由于redis所有数据一般都在内存中,如果不进行配置持久化,redis一旦发生重启操作,数据全部丢失掉,所以就需要开启redis持久化机制,将数据保存到硬盘中,当redis重启后,底层会读取磁盘文件来进行恢复数据,合理使用持久化机制是成为架构师或运维重要的一步,

  7. C/C++ 深入理解char * ,char ** ,char a[ ] ,char *a[] 的区别

    参考1:https://www.imooc.com/article/30475/ https://blog.csdn.net/liusicheng2008_liu/article/details/80412586 C语言中由于指针的灵活性,导致指针能代替数组使用,或者混合使用,这些导致了许多指针和数组的迷惑,因此,刻意再次深入探究了指针和数组

  8. nginx location深入剖析(5)

    Nginx由内核和模块组成,其中内核的设计非常微小和简洁,完成的工作也非常简单,仅仅通过查找配置文件将客户端的请求映射到一个location block,而location是Nginx配置中的一个指令,用于访问的URL匹配,而在这个location中所配置的每个指令将会启动不同的模

  9. 深入解析JVM原理,JVM到底是什么

    运行时数据区结构 堆、栈、方法去的交互关系 1、介绍: 《Java虚拟机规范》中明确说明:“尽管所有的方法区在逻辑上是属于堆的一部分,但一些简单的实现可能不会选择去进行垃圾收集或者进行压缩。”但对于HotSpotJVM而言,方法区还有一个别名叫做Non-Heap(非

  10. 9、CSS字体实例的多种变换

    CSS字体实例的多种变换 字体有以下几种常用属性: 字体 font-family:“字体名称” font-family:“字体1”,“字体2”,“字体3”,…,“字体n”; 支持设置多个字体,使用的优先级从前到后,前面的用不了就用后面的 字号(字高) font-size:大小 font-size:p

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词