<!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. String class fetch functionality

    String类的获取功能: package com.itheima_04; /* * String类的获取功能: * int length():获取字符串的长度,其实也就是字符个数 * char ch ...

  2. 客户端和服务端如何使用Token和Session

    一.我们先解释一下他的含义:    1.Token的引入:Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背 ...

  3. linux socket中tcp的time_wait的快速回收和重用

    解决方法: 我们可以通过调整内核参数来调整: vi /etc/sysctl.conf 编辑文件,加入以下内容: net.ipv4.tcp_syncookies = net.ipv4.tcp_tw_re ...

  4. Python问题1：IndentationError:expected an indented block

    Python语言是一款对缩进非常敏感的语言,给很多初学者带来了困惑,即便是很有经验的python程序员,也可能陷入陷阱当中.最常见的情况是tab和空格的混用会导致错误,或者缩进不对,而这是用肉眼无法分 ...

  5. 给腾讯云Linux主机创建Swap文件

    新买的腾讯云主机没有提供Swap分区 理由是由于主机经常因为内存使用率过高,频繁使用Swap,导致磁盘IO过高,服务器整体性能反而下降. 不过用户依然可以使用Swap文件的方式添加Swap. 方法如下 ...

  6. codeforces 722E Research Rover

    codeforces 722E Research Rover 题意 \(1e5*1e5\)的棋盘中有\(2000\)个坏点,初始给定一个值\(s(1<=s<=1e6)\).从棋盘左上角走到 ...

  7. video文件格式说明（笔记）

    video标签兼容IE8可使用html5media.js,具体demo可以下载文件中的压缩包 移动端兼容参考: http://www.xyhtml5.com/3252.html

  8. window下安装好postgreSQL 9.3用cmd命令进入数据库（搞的我这个菜鸟只剩半条命）

    linux下基本没什么问题,但在window操作系统下比较麻烦. 需要添加环境变量path路径:C:\Program Files (x86)\PostgreSQL\9.3\bin 添加postgres ...

  9. iOS js 使用与JSContext

    JSContext:js执行环境,包含了js执行时所需要的所有函数和对象: js执行时,会在执行环境搜索需要的函数然后执行,或者保存传入的变量或函数: JSContext *jsContext = [ ...

  10. C++Primer学习笔记《三》

    数组名事实上就是一个常指针,指向数组元素中第一个的地址,在程序中假设要用指针遍历数组,不能直接用数组名来自增或自减.由于它是常量,一般先把数组名保存一份同类型的指针,然后再用这个指针来自增或是自减来实 ...