WebGl 平移(矩阵变换)
<!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 平移(矩阵变换)的更多相关文章
- WebGL简易教程(五):图形变换(模型、视图、投影变换)
[toc] 1. 概述 通过之前的教程,对WebGL中可编程渲染管线的流程有了一定的认识.但是只有前面的知识还不足以绘制真正的三维场景,可以发现之前我们绘制的点.三角形的坐标都是[-1,1]之间,Z值 ...
- webgl自学笔记——矩阵变换
这章主要探讨矩阵,这些矩阵代表了应用在我们场景上的变换,允许我们移动物体.然而在webGL api中并没有一个专门的camera对象,只有矩阵.好消息是使用矩阵来取代相机对象能让webgl在很多复杂动 ...
- osg矩阵变换节点-----平移旋转缩放
osg矩阵变换节点-----平移旋转缩放 转自:http://www.cnblogs.com/ylwn817/articles/1973396.html 平移旋转缩放这个三个是osg矩阵操作中,最常见 ...
- WebGL编程指南案例解析之平移和旋转的矩阵实现
手写各种矩阵: //矩阵 var vShader = ` attribute vec4 a_Position; uniform mat4 u_xformMatrix; void main(){ gl_ ...
- WebGL编程指南案例解析之平移和旋转的math库实现
这里说的math库实现,指的是,通过一般的加减乘除(角度计算)来更新坐标值. 因为涉及到坐标的变化,所以这里都是基于对顶点着色器的修改 平移: var vShader = ` attribute ve ...
- WebGl 旋转(矩阵变换)
代码1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- WebGl 缩放(矩阵变换)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- webgl学习笔记三-平移旋转缩放
写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...
- WPF中的平移缩放和矩阵变换(TranslateTransform、ScaleTransform、MatrixTransform)
在WPF中的平移缩放都是通过RenderTransform这个类来实现这些效果的,在这个类中,除了平移和缩放还有旋转.扭曲变换.矩阵变换.这些都差不多的,都是坐标的变换. 这里我就先简单弄个平移和缩放 ...
随机推荐
- Android适配--百分比的适配
首先,需要添加com.android.support:percent:24.1.1 包,版本随意. dependencies { compile fileTree(dir: 'libs', inclu ...
- 4 使用Selenium模拟登录csdn,取出cookie信息,再用requests.session访问个人中心(保持登录状态)
代码: # -*- coding: utf-8 -*- """ Created on Fri Jul 13 16:13:52 2018 @author: a " ...
- Redis(一):centos下安装。
yum install gcc-cc++ wget http://download.redis.io/releases/redis-4.0.2.tar.gz .tar.gz /usr/local cd ...
- Linux下部署redis以及相关简介
什么是redis? Redis是一个高性能的key-value数据库.key-value分布式存储系统查询速度快.存放数据量大.支持高并发,非常适合通过主键进行查询,但不能进行复杂的条件查询.key ...
- 封装和 property方法
封装其实就是一个类用双下划线把自己的属性或者方法给限制住 不让其他的类直接调用或者修改 必须通过这个类来进行操作,这个类通过双下划线__把自己的属性和方法给限制住了 封装就是私有的过程 把父类中的属 ...
- 沉淀,再出发:百度地图api的使用浅思
沉淀,再出发:百度地图api的使用浅思 一.前言 百度地图想必大家都使用过,但是看到别人使用百度地图的API时候是不是一头雾水呢,其实真正明白了其中的意义就像是调用豆瓣电影api的接口一样的简单, ...
- Angular2 Router路由相关
路由设置 Angular中路由的配置应该按照先具体路由到通用路由的设置,因为Angular使用先匹配者优先的原则. 示例: 路由设置如下: export const reportRoute: Rout ...
- 【[POI2014]HOT-Hotels】
魏佬怒嘲我只会做给定一棵树,输出有多少个点这种问题 不过我连这个也不会做 还算一道不错的树上数数题目 但是我一直不会数数 求树上所有的三元组\((u,v,t)\),满足\(dis(u,v)=dis(u ...
- ZooKeeper学习之路 (四)ZooKeeper开发环境eclipse配置
一.eclipse中配置zookeeper开发环境 1)将zookeeper eclipse plugin中的6个jar包放到eclipse安装目录下的plugins文件中,重启eclipse (2) ...
- No.4 - 3D 空间的卡片翻转动效
参考 ①张鑫旭http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ ...