这里说的math库实现,指的是,通过一般的加减乘除(角度计算)来更新坐标值。

因为涉及到坐标的变化,所以这里都是基于对顶点着色器的修改

平移:

var vShader = `
attribute vec4 a_Position;
uniform vec4 u_Translation;
void main(){
gl_Position = a_Position + u_Translation;
}
`;

因为平移只涉及到每个顶点的x、y坐标的变化,所以我们引入一个vec4 变量,在每次绘制的时候为这个变量赋值:

//用指定颜色填充webgl容器,就是设置背景
gl.clearColor(0.4, 0.5, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);   
var Tx = 0.5, Ty = 0.5, Tz = 0.0;
var u_Translation = gl.getUniformLocation(gl.program, 'u_Translation');
if (!u_Translation) {
console.log('Failed to get the storage location of u_Translation');
return;
}
gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0); gl.drawArrays(gl.TRIANGLES,,n);

上述代码中间一段中,我们对坐标的变化参数u_Translation进行了赋值,他代表的意思是

坐标点x轴正向移动0.5;

坐标点y轴正向移动0.5;

其余不变。

所以我们得到平移之后的变化如下:

旋转:

旋转比较复杂,涉及到角度的计算,直接拿书中的换算公式图了:

所以针对顶点着色器,我们要添加两个变量sinβ、cosβ:

旋转的时候,根据角度,步骤如下:

①角度转弧度

②算出sinβ和cosβ

③给顶点着色器里设置的变量赋值

这样一来就解决了旋转β角之后的新的位置的顶点坐标了,这么做,可以达到我们的效果,但是,如果情形稍微复杂一点的话,你就会发现,用表达式来计算的haul,非常繁琐,好在我们还有另外一个数学工具——变换矩阵,下一节我们来探讨变换矩阵。

WebGL编程指南案例解析之平移和旋转的math库实现的更多相关文章

  1. WebGL编程指南案例解析之平移和旋转的矩阵实现

    手写各种矩阵: //矩阵 var vShader = ` attribute vec4 a_Position; uniform mat4 u_xformMatrix; void main(){ gl_ ...

  2. WebGL编程指南案例解析之绘制一个点

    <!DOCTYPE html> <html> <head> <title>webgl</title> <style type=&quo ...

  3. WebGL编程指南案例解析之3D视图视区问题

    var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'attribute vec4 a_Color;\n' + 'uniform mat4 u_ ...

  4. WebGL编程指南案例解析之绘制三个点

    //案例2.绘制3个点,将顶点数据存到缓冲区对象(gl.ARRAY_BUFFER)中,然后顶点着色器从里面读数据(3个顶点) //着色器将对这些顶点进行逐个解析, //第一个顶点给到顶点着色器,赋值给 ...

  5. WebGL编程指南案例解析之绘制四边形

    //案例4,绘制矩形,和三角形类似,但是注意因为一个矩形有4个顶点,按照两个三角形绘制矩形的话,顶点顺序要注意 var vShader = ` attribute vec4 a_Position; v ...

  6. WebGL编程指南案例解析之绘制三角形

    //案例3.绘制三角形,将顶点数据存到缓冲区对象(gl.ARRAY_BUFFER)中,然后顶点着色器从里面读数据(3个顶点) //顶点着色器中去掉gl_PointSize = 10.0,绘制三角不能设 ...

  7. WebGL编程指南案例解析之纹理叠加

    var vShader = ` attribute vec4 a_Position; attribute vec2 a_TexCoord; varying vec2 v_TexCoord; void ...

  8. WebGL编程指南案例解析之加载纹理(贴图)

    var vShader = ` attribute vec4 a_Position; attribute vec2 a_TexCoord; varying vec2 v_TexCoord; void ...

  9. WebGL编程指南案例解析之多数据存储于一个缓冲区以及着色器通信

    //顶点着色器往片元着色器传值 //多个参数值存于一个缓冲对象中 var vShader = ` attribute vec4 a_Position; attribute float a_PointS ...

随机推荐

  1. AtCoder square869120 Contest #3 F sushi

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  2. MongoDB(课时12 字段判断)

    3.4.2.7 判断某个字段是否存在 使用“$exists”可以判断某个字段是否存在,如果设置为true表示存在,false表示不存在. 范例:查询具有parents成员的数据 db.students ...

  3. ehcache入门基础示例

    一:目录 EhCache 简介 Hello World 示例 Spring 整合 二: 简介 1. 基本介绍 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernat ...

  4. Loading Xps from MemoryStream

    A common way of loading XpsDocument is to load it from file: XpsDocument document = new XpsDocument( ...

  5. Blog Post Rating CodeForces - 806E (线段树二分)

    题目链接 题目大意: 有一个博客, 初始分数为$0$, 有$n$个人, 第$i$个人有一个期望值$a_i$, 如果第$i$个人浏览博客时,博客赞数高于$a_i$博客分数$-1$, 低于$+1$, 相等 ...

  6. python-day27--configparser模块

    1.来看一个好多软件的常见文档格式如下: [DEFAULT] ServerAliveInterval = 45 Compression = yes CompressionLevel = 9 Forwa ...

  7. UVA-10497 Sweet Child Makes Trouble (计数+高精度)

    题目大意:这是一道简单排列组合题 .简单说下题意:n件物品,把这n件物品放到不是原来的位置,问所有的方案数.所有的位置都没有变. 题目解析:按照高中的方法,很快得到一个递推公式:f [n]= (n-1 ...

  8. dp练习(10)——拦截导弹

    1044 拦截导弹 1999年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Descripti ...

  9. quartz---的一个简单例子

    quartz---的一个简单例子 首先建立一个maven项目.jar工程即可.(提示:我前面有如何建立一个maven工程的总结以及maven环境的配置.) 1.建立好后点击到app中运行,--> ...

  10. zk请求和响应对

    zk的请求和响应是通过id对应上的: 请求头(RequestHeader)和响应头(ReplyHeader)共用一个xid,它的本质是ClientCnxn类中的一个计数器. 1. 首先看客户端: Pa ...