<!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 scale;' +
'void main(void) {' +
' gl_Position = scale*vec4(coordinates,1.0);' +
'}'; 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 Sx = 1.5, Sy = 1.5, Sz = 1.5;
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 scale = gl.getUniformLocation(shaderProgram,'scale');
gl.uniformMatrix4fv(scale, 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 38:
Sx += 0.05;
Sy += 0.05;
Sz += 0.05;
break;
case 40:
Sx -= 0.05;
Sy -= 0.05;
Sz -= 0.05;
break;
} //重复以上部分操作
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
]);
gl.uniformMatrix4fv(scale, 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. canvas学习笔记(下篇) -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例(星空/时钟/小球)

    [下篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

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

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

  3. canvas图形处理和进阶用法

    前面的话 上一篇博客介绍了canvas基础用法,本文将更进一步,介绍canvas的图形处理和进阶用法 图形变换 图形变换是指用数学方法调整所绘形状的物理属性,其实质是坐标变形.所有的变换都依赖于后台的 ...

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

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

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

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

  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. android OrmLite

    最近在使用ormlite框架进行数据库的操作,下面简单的写个demo来学习下 1.下载jar包 这里使用的是ormlite-core-5.0.jar 和 ormlite-android-5.0.jar ...

  2. sql server 查询分析器中表名无效,有红线,其实是这张表的

    ctrl+shift+R 就OK了,就是刷新本地缓存.

  3. Oralce 序列

    序列: 是oacle提供的用于产生一系列唯一数字的数据库对象. l  自动提供唯一的数值 l  共享对象 l  主要用于提供主键值 l  将序列值装入内存可以提高访问效率 创建序列: 1.  要有创建 ...

  4. Scratch3.0——克隆代码仓库的正确姿势

    原文地址:https://blog.csdn.net/weiwoyonzhe/article/details/86603450 对Scratch3.0进行二次开发,首先要在github上fock官方代 ...

  5. 类型“Microsoft.Office.Interop.Word.ApplicationClass”错误 4317 无法嵌入互操作类型

    类型“Microsoft.Office.Interop.Word.ApplicationClass”错误 4317 无法嵌入互操作类型“Microsoft.Office.Interop.Word.Ap ...

  6. 云端办公是 Office系统的未来方向么 ?

    云端办公是 Office系统的未来方向么 ? 话说随着互联网,HTML技术,云计算等技术的发展,越来越多的应用已经迁移到云端, 以我们熟悉的电脑游戏为例,从单机游戏,到网络游戏,再到网页游戏,基本就是 ...

  7. ZT 线程处理函数pthread_cleanup_push / pthread_cleanup_pop

    http://bbs.csdn.net/topics/390688105 2)创建了线程,但是线程退出时没有线程调用pthread_join() 线程资源没有回收,如果持续创建线程,到一定数量后将不能 ...

  8. POJ 2528 Mayor's poster

    主要是参考了这个博客 地址戳这儿 题目大意:n(n<=10000) 个人依次贴海报,给出每张海报所贴的范围li,ri(1<=li<=ri<=10000000) .求出最后还能看 ...

  9. Python 处理脚本的命令行参数-getopt

    # -*- coding:utf-8 -*- import sys def test(): """ 参数列表:sys.argv 参数个数:len(sys.argv) 脚本 ...

  10. Git 解决方案 commit your changes or stash them before you can merge

    error: Your local changes to the following files would be overwritten by merge: *********** Please, ...