<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>WebGl 平移（矩阵变换）</title>

 </head>

 <body>

 <h6>使用键盘方向键←、↑、→、↓平移三角形</h6>

 <canvas id="myCanvas" width="500" height="300" style="border: 1px solid red"></canvas>

 </body>

 <script>

     window.onload = function () {

         //第1步 - 准备Canvas和获取WebGL的渲染上下文

         var canvas = document.getElementById('myCanvas'),

             gl = canvas.getContext('webgl');

         //第2步 - 定义几何并将其存储在缓冲区对象

         var vertices = [

                 -0.5,0.5,0.0,

                 0.0,0.5,0.0,

                 -0.25,0.25,0.0,

                 0.5,0.5,0.0,

                 0.25,0.25,0.0,

             ],

             indices =[0,1,2,1,3,4];

         var vertex_buffer = gl.createBuffer();

         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

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

         var Index_Buffer = gl.createBuffer();

         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer);

         gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

         //第3步 - 创建和编译着色器程序

         var vertCode =

             'attribute vec3 coordinates;' +

             'uniform mat4 translation;' +

             'void main(void) {' +

             ' gl_Position = translation*vec4(coordinates,1.0);' +//这里一定要注意  是translation在前

             '}';

         var fragCode =

             'void main(void) {' +

             ' gl_FragColor = vec4(1, 0.5, 0.0, 1);' +

             '}';

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

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

         gl.shaderSource(vertShader, vertCode);

         gl.shaderSource(fragShader, fragCode);

         gl.compileShader(vertShader);

         gl.compileShader(fragShader);

         var shaderProgram = gl.createProgram();

         gl.attachShader(shaderProgram, vertShader);

         gl.attachShader(shaderProgram, fragShader);

         gl.linkProgram(shaderProgram);

         gl.useProgram(shaderProgram);

         //第4步 - 关联着色器程序到缓冲区对象

         var coord = gl.getAttribLocation(shaderProgram, 'coordinates');

         gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);

         gl.enableVertexAttribArray(coord);

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

         //注意WebGL的矩阵式列主序的

         var xformMatrix = 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, 1.0

         ]);

         //然后将矩阵传输给定点着色器

         var translation = gl.getUniformLocation(shaderProgram,'translation');

         gl.uniformMatrix4fv(translation, false, xformMatrix);

         //第5步 - 绘制所需的对象

         gl.clearColor(0.5, 0.5, 0.5, 0.9);

         gl.enable(gl.DEPTH_TEST);

         gl.clear(gl.COLOR_BUFFER_BIT);

         gl.viewport(0, 0, myCanvas.width, myCanvas.height);

         gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

         //监听事件

         document.addEventListener("keyup",function (event) {

             switch (event.keyCode){

                 case 37:

                     Tx -= 0.05;

                     break;

                 case 38:

                     Ty += 0.05;

                     break;

                 case 39:

                     Tx += 0.05;

                     break;

                 case 40:

                     Ty -= 0.05;

                     break;

             }

             //重复以上部分操作

             xformMatrix = 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, 1.0

             ]);

             gl.uniformMatrix4fv(translation, false, xformMatrix);

             //重复 第5步 - 绘制所需的对象

             gl.clearColor(0.5, 0.5, 0.5, 0.9);

             gl.enable(gl.DEPTH_TEST);

             gl.clear(gl.COLOR_BUFFER_BIT);

             gl.viewport(0, 0, myCanvas.width, myCanvas.height);

             gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

         });

     }

 </script>

 </html>

WebGl 平移（矩阵变换）的更多相关文章

  1. WebGL简易教程(五)：图形变换(模型、视图、投影变换)

    [toc] 1. 概述 通过之前的教程,对WebGL中可编程渲染管线的流程有了一定的认识.但是只有前面的知识还不足以绘制真正的三维场景,可以发现之前我们绘制的点.三角形的坐标都是[-1,1]之间,Z值 ...

  2. webgl自学笔记——矩阵变换

    这章主要探讨矩阵,这些矩阵代表了应用在我们场景上的变换,允许我们移动物体.然而在webGL api中并没有一个专门的camera对象,只有矩阵.好消息是使用矩阵来取代相机对象能让webgl在很多复杂动 ...

  3. osg矩阵变换节点-----平移旋转缩放

    osg矩阵变换节点-----平移旋转缩放 转自:http://www.cnblogs.com/ylwn817/articles/1973396.html 平移旋转缩放这个三个是osg矩阵操作中,最常见 ...

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

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

  5. WebGL编程指南案例解析之平移和旋转的math库实现

    这里说的math库实现,指的是,通过一般的加减乘除(角度计算)来更新坐标值. 因为涉及到坐标的变化,所以这里都是基于对顶点着色器的修改 平移: var vShader = ` attribute ve ...

  6. WebGl 旋转（矩阵变换）

    代码1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  7. WebGl 缩放（矩阵变换）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

    写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...

  9. WPF中的平移缩放和矩阵变换（TranslateTransform、ScaleTransform、MatrixTransform）

    在WPF中的平移缩放都是通过RenderTransform这个类来实现这些效果的,在这个类中,除了平移和缩放还有旋转.扭曲变换.矩阵变换.这些都差不多的,都是坐标的变换. 这里我就先简单弄个平移和缩放 ...

随机推荐

  1. activiti查询

    一  1.根据当前任务id获得当前任务对象  Task task = processEngine.getTaskService().createTaskQuery().taskId(taskId).s ...

  2. 纯C语言跑分（详细注释）

    #include <stdio.h> #include <time.h>//clock()所属头文件 ;//快排的数据规模 ,N=;//整点.浮点运算的规模 ;//计算圆周率的 ...

  3. 使用Netty3或Netty4发布Http协议服务

    现在是2018年1月11日18:12分,已经是下班时间了,小Alan今天给大家简单的介绍一下Netty,让大家以后在使用到Netty的时候能够有一定的了解和基础,这样深入学习Netty以及以后灵活应用 ...

  4. spring mvc拦截器HandlerInterceptor

    本文主要介绍springmvc中的拦截器,包括拦截器定义和的配置,然后演示了一个链式拦截的测试示例,最后通过一个登录认证的例子展示了拦截器的应用 拦截定义 定义拦截器,实现HandlerInterce ...

  5. Gartner发布最新魔力象限报告，微软领跑数据库市场(编译自TechRepublic)

    知名调研机构Gartner发布了最新的<2015年数据库管理系统魔力象限调研报告>.报告显示,微软.甲骨文和AWS是数据库市场的三大领导厂商. 此份报告对知名的商用以及开源数据库厂商进行了 ...

  6. C++ Primer(6) 模板和泛型编程(上)

    问题聚焦: 泛型编程是独立于变量类型的方式编写代码: 模板是泛型编程的基础. 本篇主要介绍模板的基础知识,包括:模板的定义和模板的实例化. 1 模版定义 必要性: Demo int compare(c ...

  7. Win10开启PIN码使用教程

    很多电脑爱好者对于Win10内置的PIN码功能不太了解,很多朋友都还没有使用.其实,创建PIN码可以提到密码使用,当你登录到Windows和其它应用服务时,可以通过PIN码替代输入账户密码,提升安全性 ...

  8. redis3.2.9编译安装

    Redis 3.2.9 安装 Redis 3.2.9 编译安装 1,   安装相关软件包 2,   下载redis源码包 wget http://source.goyun.org:8000/sourc ...

  9. PetaPoco轻量级ORM框架 - 入门安装

    PetaPoco 是一个开源轻量级ORM,够小,够快,单文件 在GitHub上有很高的人气 1377星,几年来作者一直在更新 当前版本6.0.317 - Netstandard 2.0(同时支持.ne ...

  10. BZOJ 2038 小Z的袜子(hose) 莫队算法模板题

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=2038 题目大意: 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中 ...