webgl学习笔记三-平移旋转缩放

写在前面

建议先阅读下前面我的两篇文章。

webgl学习笔记一-绘图单点

webgl学习笔记二-绘图多点

平移

1、关键点说明

顶点着色器需要加上 uniform vec4 u_Translation, 存储平移的坐标矢量。
顶点坐标位置： gl_Position = a_Position + u_Translation
平移API ： gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0);

2、demo

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<canvas id="canvas" width="200px" height="200px"></canvas>

</body>

</html>

JavaScript



<script>

    function main() {

        //顶点着色器程序

        var VSHADER_SOURCE =

            'attribute vec4 a_Position;\n' +

            'uniform vec4 u_Translation;\n' +

            'void main() {\n' +

            '  gl_Position = a_Position + u_Translation;\n' +

            '}\n';

        //片元着色器

        var FSHADER_SOURCE =

            'void main() {\n' +

            '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +

            '}\n';

        //获取canvas元素

        var canvas = document.getElementById('canvas');

        //获取绘制二维上下文

        var gl = canvas.getContext('webgl');

        if (!gl) {

            console.log("Failed");

            return;

        }

        //编译着色器

        var vertShader = gl.createShader(gl.VERTEX_SHADER);

        gl.shaderSource(vertShader, VSHADER_SOURCE);

        gl.compileShader(vertShader);

        var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

        gl.shaderSource(fragShader, FSHADER_SOURCE);

        gl.compileShader(fragShader);

        //合并程序

        var shaderProgram = gl.createProgram();

        gl.attachShader(shaderProgram, vertShader);

        gl.attachShader(shaderProgram, fragShader);

        gl.linkProgram(shaderProgram);

        gl.useProgram(shaderProgram);

        //获取坐标点

        var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');

        if (a_Position < 0) {

            console.log('Failed to get the storage location of a_Position');

            return;

        }

        var n = initBuffers(gl, shaderProgram);

        if (n < 0) {

            console.log('Failed to set the positions');

            return;

        }

        // 清除指定<画布>的颜色

        gl.clearColor(0.0, 0.0, 0.0, 1.0);

        // 清空 <canvas>

        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLES, 0, n);

    }

    function opt(gl, shaderProgram) {

        var Tx = 0.5, Ty = 0.5, Tz = 0.0;

        var u_Translation = gl.getUniformLocation(shaderProgram, '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);

    }

    function initBuffers(gl, shaderProgram) {

        var vertices = new Float32Array([

            0, 0.5,   -0.5, -0.5,   0.5, -0.5

        ]);

        var n = 3;//点的个数

        //创建缓冲区对象

        var vertexBuffer = gl.createBuffer();

        if (!vertexBuffer) {

            console.log("Failed to create the butter object");

            return -1;

        }

        //将缓冲区对象绑定到目标

        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

        //向缓冲区写入数据

        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        //获取坐标点

        var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');

        //将缓冲区对象分配给a_Position变量

        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

        //连接a_Position变量与分配给它的缓冲区对象

        gl.enableVertexAttribArray(a_Position);

        return n;

    }

    main();

</script>

旋转

1、关键点说明

坐标P（x,y,z） , 绕Z轴旋转β角度变成 p1（x1, y1, z1）

则根据数据三角函数公式可得：

x1 = xcosβ - ysinβ

y1 = xsinβ + ycosβ

z1=z

顶点着色器需要加上 uniform float u_CosB, u_SinB 存储旋转角度。
顶点坐标位置：
- gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB
- gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB
旋转API ：
- gl.uniform1f(u_CosB, cosB)
- gl.uniform1f(u_sinB, sinB);

2、demo

JavaScript

<script>

    function main() {

        //顶点着色器程序

        var VSHADER_SOURCE =

            'attribute vec4 a_Position;\n' +

            'uniform float u_CosB, u_SinB;\n' +

            'void main() {\n' +

            '  gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;\n' +

            '  gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;\n' +

            '  gl_Position.z = a_Position.z;\n' +

            '  gl_Position.w = 1.0;\n' +

            '}\n';

        //片元着色器程序

        var FSHADER_SOURCE =

            'void main() {\n' +

            '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +

            '}\n';

        var Tx = 0.5, Ty = 0.5, Tz = 0.0;

        //获取canvas元素

        var canvas = document.getElementById('canvas');

        //获取绘制二维上下文

        var gl = canvas.getContext('webgl');

        if (!gl) {

            console.log("Failed");

            return;

        }

        //编译着色器

        var vertShader = gl.createShader(gl.VERTEX_SHADER);

        gl.shaderSource(vertShader, VSHADER_SOURCE);

        gl.compileShader(vertShader);

        var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

        gl.shaderSource(fragShader, FSHADER_SOURCE);

        gl.compileShader(fragShader);

        //合并程序

        var shaderProgram = gl.createProgram();

        gl.attachShader(shaderProgram, vertShader);

        gl.attachShader(shaderProgram, fragShader);

        gl.linkProgram(shaderProgram);

        gl.useProgram(shaderProgram);

        //获取坐标点

        var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');

        if (a_Position < 0) {

            console.log('Failed to get the storage location of a_Position');

            return;

        }

        var n = initBuffers(gl, shaderProgram);

        if (n < 0) {

            console.log('Failed to set the positions');

            return;

        }

        opt(gl, shaderProgram);

        // 清除指定<画布>的颜色

        gl.clearColor(0.0, 0.0, 0.0, 1.0);

        // 清空 <canvas>

        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLES, 0, n);

    }

    function opt(gl, program) {

        // 旋转角度

        var ANGLE = 90.0;

        var radian = Math.PI * ANGLE / 180.0;

        var cosB = Math.cos(radian);

        var sinB = Math.sin(radian);

        var u_CosB = gl.getUniformLocation(program, 'u_CosB');

        var u_sinB = gl.getUniformLocation(program, 'u_SinB');

        gl.uniform1f(u_CosB, cosB);

        gl.uniform1f(u_sinB, sinB);

    }

    function initBuffers(gl, shaderProgram) {

        var vertices = new Float32Array([

            0, 0.5,   -0.5, -0.5,   0.5, -0.5

        ]);

        var n = 3;//点的个数

        //创建缓冲区对象

        var vertexBuffer = gl.createBuffer();

        if (!vertexBuffer) {

            console.log("Failed to create the butter object");

            return -1;

        }

        //将缓冲区对象绑定到目标

        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

        //向缓冲区写入数据

        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        //获取坐标点

        var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');

        //将缓冲区对象分配给a_Position变量

        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

        //连接a_Position变量与分配给它的缓冲区对象

        gl.enableVertexAttribArray(a_Position);

        return n;

    }

    main();

</script>

缩放

1、关键点说明

顶点着色器需要加上 uniform mat4 u_xformMatrix, 存储缩放因子的坐标矢量。
顶点坐标位置： gl_Position = u_xformMatrix * a_Position
缩放API ： gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
- u_xformMatrix ：缩放因子
- xformMatrix ：原始坐标

2、demo

JavaScript

<script>

    function main() {

        //顶点着色器程序

        var VSHADER_SOURCE =

            'attribute vec4 a_Position;\n' +

            'uniform mat4 u_xformMatrix;\n' +

            'void main() {\n' +

            '  gl_Position = u_xformMatrix * a_Position;\n' +

            '}\n';

        //片元着色器程序

        var FSHADER_SOURCE =

            'void main() {\n' +

            '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +

            '}\n';

        var Tx = 0.5, Ty = 0.5, Tz = 0.0;

        //获取canvas元素

        var canvas = document.getElementById('canvas');

        //获取绘制二维上下文

        var gl = canvas.getContext('webgl');

        if (!gl) {

            console.log("Failed");

            return;

        }

        //编译着色器

        var vertShader = gl.createShader(gl.VERTEX_SHADER);

        gl.shaderSource(vertShader, VSHADER_SOURCE);

        gl.compileShader(vertShader);

        var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

        gl.shaderSource(fragShader, FSHADER_SOURCE);

        gl.compileShader(fragShader);

        //合并程序

        var shaderProgram = gl.createProgram();

        gl.attachShader(shaderProgram, vertShader);

        gl.attachShader(shaderProgram, fragShader);

        gl.linkProgram(shaderProgram);

        gl.useProgram(shaderProgram);

        //获取坐标点

        var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');

        if (a_Position < 0) {

            console.log('Failed to get the storage location of a_Position');

            return;

        }

        var n = initBuffers(gl, shaderProgram);

        if (n < 0) {

            console.log('Failed to set the positions');

            return;

        }

        opt(gl, shaderProgram);

        // 清除指定<画布>的颜色

        gl.clearColor(0, 0, 0, 1);

        // 清空 <canvas>

        gl.clear(gl.COLOR_BUFFER_BIT);

        // Draw the rectangle

        gl.drawArrays(gl.TRIANGLES, 0, n);

    }

    // 缩放

    function opt(gl, program) {

        // 缩放因子

        var Sx = 1.0, Sy = 1.5, Sz = 1.0;

        var xformMatrix = new Float32Array([

            Sx,   0.0,  0.0,  0.0,

            0.0,  Sy,   0.0,  0.0,

            0.0,  0.0,  Sz,   0.0,

            0.0,  0.0,  0.0,  1.0

        ]);

        var u_xformMatrix = gl.getUniformLocation(program, 'u_xformMatrix');

        gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);

    }

    // 构建缓冲区

    function initBuffers(gl, shaderProgram) {

        var vertices = new Float32Array([

            0, 0.5,   -0.5, -0.5,   0.5, -0.5

        ]);

        var n = 3;//点的个数

        //创建缓冲区对象

        var vertexBuffer = gl.createBuffer();

        if (!vertexBuffer) {

            console.log("Failed to create the butter object");

            return -1;

        }

        //将缓冲区对象绑定到目标

        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

        //向缓冲区写入数据

        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        //获取坐标点

        var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');

        //将缓冲区对象分配给a_Position变量

        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

        //连接a_Position变量与分配给它的缓冲区对象

        gl.enableVertexAttribArray(a_Position);

        return n;

    }

    // 主方法调用

    main();

</script>

写在最后

新博客

webgl学习笔记三-平移旋转缩放的更多相关文章

WebGL学习笔记三
在上一章中主要说明了通过矩阵来实现平面图形的平移.旋转.缩放,到最后完全可以用4*4矩阵实现所有的动作,在本章就是第四章主要是对矩阵进行了封装,其WebGL的流程和上一章大部分大部分相同,定义可以在w ...
webgl学习笔记五-纹理
写在前面建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放术语 : 纹理 :图像图形装配区域 :顶点着色器顶点坐标 ...
webgl学习笔记四-动画
写在前面建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...
osg矩阵变换节点-----平移旋转缩放
osg矩阵变换节点-----平移旋转缩放转自:http://www.cnblogs.com/ylwn817/articles/1973396.html 平移旋转缩放这个三个是osg矩阵操作中,最常见 ...
WebGL学习笔记二——绘制基本图元
webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...
Oracle学习笔记三 SQL命令
SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)
osg中使用MatrixTransform来实现模型的平移/旋转/缩放
osg中使用MatrixTransform来实现模型的平移/旋转/缩放转自:http://www.cnblogs.com/kekec/archive/2011/08/15/2139893.html# ...
[Firefly引擎][学习笔记三][已完结]所需模块封装
原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门学习笔记三导读: 笔记三主要就是各个模块的封装了,这里贴 ...
JSP学习笔记(三):简单的Tomcat Web服务器
注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...

随机推荐

鼠标移动在屏幕上显示温度Tip提示功能-CToolTipCtrl类的使用
初学VC++,太多知识不懂,需要不断的查找资料,想通过记录让自己有所积累,主要是怕以后会很快忘记.最近在做一个在屏幕上显示鼠标移动位置的温度值,我利用先缓存一帧图像的温度值,然后,通过鼠标移动消息相应 ...
20155202 《Java程序设计》实验三（敏捷开发与XP实践）实验报告
20155202 <Java程序设计>实验三(敏捷开发与XP实践)实验报告代码托管实验内容 XP基础 XP核心实践相关工具实验要求 1.没有Linux基础的同学建议先学习<L ...
20155308 实验四 Android开发基础
20155308 实验四 Android开发基础实验内容基于Android Studio开发简单的Android应用并部署测试; 了解Android.组件.布局管理器的使用: 掌握Android中 ...
20155319 2016-2017-2 《Java程序设计》第一周学习总结
20155319 2016-2007-2 <Java程序设计>第一周学习总结考核方式翻转课堂考核12次(5*12=60):每次考试20-30道题目,考试成绩规格化成5分(如总分20分就 ...
20155320 实验二 Java面向对象程序设计
20155320 实验二 Java面向对象程序设计实验内容初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态初步掌握UML建模熟悉S.O.L.I.D原则了解设计模式实验步 ...
我与虚拟机的初次接触及初探Liux命令 20155338
初识虚拟机及学习Linux命令的些许收获虚拟机的安装这个假期算是第一次正式的接触了虚拟机,以前在平时生活中也有听到过,但是真正自己动手安装虚拟机却是第一次,确实是既紧张又兴奋. 我是依据老师所发的 ...
MySql Host is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts' 的解决方法
解决方法如下: 方法 1.在线修改提高允许的max_connection_errors数量: A. 登录Mysql数据库查看max_connection_errors: mysql>show ...
二、Web框架实现
一.简单web(socket) 在前一篇WEB框架概述一文中已经详细了解了:从浏览器键入一个URL到返回HTML内容的整个过程.说到底,本质上其实就是一个socket服务端,用户的浏览器其实就是一个s ...
基础SQL语句学习
(注:sql对大小写不敏感,附:命令行操作:cd 目录名可进入文件,cd .. 可返回上级木目录) 下载MySQL,并配置环境变量: 使用命令行操作数据库(也可下载navicat操作),输入mysq ...
文件批量加密重命名--python脚本AND mysql命令行导入数据库
在考试中学生交上来的报告,需要进行一下文件名加密,这样阅卷老师就不知道是谁的报告了在百度帮助下,完成了加密和解密脚本, 加密 #!/usr/bin/python # -*- coding: utf- ...

webgl学习笔记三-平移旋转缩放

1、关键点说明

2、demo

1、关键点说明

2、demo

1、关键点说明

2、demo

webgl学习笔记三-平移旋转缩放的更多相关文章

随机推荐

热门专题