写在前面

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

webgl学习笔记一-绘图单点

webgl学习笔记二-绘图多点

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

  下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘正方形,并且每次重绘时轻微地改变其角度。

demo

  • 吊下胃口

  • html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script src="../../lib/cuon-matrix.js"></script>

<body>

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

</body>

</html>
  • JavaScript
<script>

    // 顶点着色器程序

    var VSHADER_SOURCE =

        'attribute vec4 a_Position;\n' +

        'uniform mat4 u_ModelMatrix;\n' +

        'void main() {\n' +

        '  gl_Position = u_ModelMatrix * a_Position;\n' +

        '}\n';

    // 片元着色器程序

    var FSHADER_SOURCE =

        'void main() {\n' +

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

        '}\n';

    // Rotation angle (degrees/second)

    var ANGLE_STEP = 45.0;

    function main() {

        // init gl

        var gl = initCanvas();

        // Initialize shaders

        var shaderProgram = initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE).program;

        // Write the positions of vertices to a vertex shader

        var n = initVertexBuffers(gl, shaderProgram);

        if (n < 0) {

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

            return;

        }

        // Specify the color for clearing <canvas>

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

        // Get storage location of u_ModelMatrix

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

        if (!u_ModelMatrix) {

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

            return;

        }

        // Current rotation angle

        var currentAngle = 0.0;

        // Model matrix

        var modelMatrix = new Matrix4();

        // Start drawing

        var tick = function () {

            currentAngle = animate(currentAngle);  // Update the rotation angle

            draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix);   // Draw the triangle

            requestAnimationFrame(tick, canvas); // Request that the browser ?calls tick

        };

        tick();

    }

    // init cavas webgl context

    function initCanvas() {

        //获取canvas元素

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

        //获取绘制二维上下文

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

        if (!gl) {

            console.log("Failed");

            return null;

        }

        return gl;

    }

    // init shader

    function initShader(gl, vshader_source, fshader_source) {

        //编译着色器

        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 program = gl.createProgram();

        gl.attachShader(program, vertShader);

        gl.attachShader(program, fragShader);

        gl.linkProgram(program);

        gl.useProgram(program);

        return {

            program: program

        }

    }

    function initVertexBuffers(gl, shaderProgram) {

        var vertices = new Float32Array([

            -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5

        ]);

        var n = 4;   // The number of vertices

        // Create a buffer object

        var vertexBuffer = gl.createBuffer();

        if (!vertexBuffer) {

            console.log('Failed to create the buffer object');

            return -1;

        }

        // Bind the buffer object to target

        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

        // Write date into the buffer object

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

        // Assign the buffer object to a_Position variable

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

        if (a_Position < 0) {

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

            return -1;

        }

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

        // Enable the assignment to a_Position variable

        gl.enableVertexAttribArray(a_Position);

        return n;

    }

    function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) {

        // Set the rotation matrix

        modelMatrix.setRotate(currentAngle, 0, 0, 1);

        modelMatrix.translate(0.35, 0, 0);

        // Pass the rotation matrix to the vertex shader

        gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);

        // Clear <canvas>

        gl.clear(gl.COLOR_BUFFER_BIT);

        // Draw the rectangle

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

    }

    // Last time that this function was called

    var g_last = Date.now();

    function animate(angle) {

        // Calculate the elapsed time

        var now = Date.now();

        var elapsed = now - g_last;

        g_last = now;

        // Update the current rotation angle (adjusted by the elapsed time)

        var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;

        return newAngle %= 360;

    }

    main();

</script>

webgl学习笔记四-动画的更多相关文章

  1. C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻

    前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...

  2. IOS学习笔记(四)之UITextField和UITextView控件学习

    IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...

  3. java之jvm学习笔记四(安全管理器)

    java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...

  4. Learning ROS for Robotics Programming Second Edition学习笔记(四) indigo devices

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  5. Typescript 学习笔记四：回忆ES5 中的类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. ES6学习笔记<四> default、rest、Multi-line Strings

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

  7. muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制

    目录 muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制 eventfd的使用 eventfd系统函数 使用示例 EventLoop对eventfd的封装 工作时序 runInLoo ...

  8. python3.4学习笔记(四) 3.x和2.x的区别，持续更新

    python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...

  9. Go语言学习笔记四： 运算符

    Go语言学习笔记四: 运算符 这章知识好无聊呀,本来想跨过去,但没准有初学者要学,还是写写吧. 运算符种类 与你预期的一样,Go的特点就是啥都有,爱用哪个用哪个,所以市面上的运算符基本都有. 算术运算 ...

随机推荐

  1. 2016-2017-2 《Java程序设计》课程总结 - 20155214

    2016-2017-2 <Java程序设计>课程总结 - 20155214 目录 一.每周学习总结及实验报告链接汇总 二.代码托管 给出statistic.sh的运行结果,说明本学期的代码 ...

  2. 20155321 2016-2017-2 《Java程序设计》第十周学习总结

    20155321 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 网络概览 局域网和广域网:局域网通常限定在一个有效的地理区域之内,广域网由许多局域网组成.最 ...

  3. 【转载】Alpha混合物体的深度排序

    原文:Alpha混合物体的深度排序 先说个题外话, 本来我想解答一下最近Creators Club论坛上经常出现的一个问题, 意外的是在网上竟然找不到什么全面的答案.. 这是个有着复杂答案的简单问题: ...

  4. 3-3 修改haproxy配置文件

    1.需求 2.个人思路 3.个人心得 4.

  5. 【BZOJ2395】[Balkan 2011]Timeismoney

    [BZOJ2395][Balkan 2011]Timeismoney 题面 \(darkbzoj\) 题解 如果我们只有一个条件要满足的话直接最小生成树就可以了,但是现在我们有两维啊... 我们将每个 ...

  6. 【LG5018】[NOIP2018pj]对称的二叉树

    [LG5018][NOIP2018pj]对称的二叉树 题面 洛谷 题解 看到这一题全都是用\(O(nlogn)\)的算法过的 考场上写\(O(n)\)算法的我很不开心 然后就发了此篇题解... 首先我 ...

  7. 1135: [POI2009]Lyz

    1135: [POI2009]Lyz https://lydsy.com/JudgeOnline/problem.php?id=1135 分析: hall定理+线段树连续区间的最大的和. 首先转化为二 ...

  8. Yii2.0 Gridview为某列增加属性

    我们知道GridView组件非常方便,会自动生成数据表格.table tr td神马的全自动生成的.但是如果想定制化稍微有点难度. 比如想在某列td上应用样式. 老写法是这样的 <?= Grid ...

  9. 集群服务器、负载均衡和session共享，C#的static变量

    集群服务器:是指由两台以上服务器共同组成的服务器,目的是为了提高性能. 负载均衡:是基于集群服务器实现的,作用是当A服务器访问数达到一定上限时,接下来客户端的请求会自动分配给B服务器,目的是减少服务器 ...

  10. kubeadm构建k8s之Prometheus-operated监控(0.18.1)

    介绍: 大家好,k8s的搭建有许多方式,也有许多快速部署的,为了简化部署的复杂度,官方也提供了开源的kubeadm快速部署,最新1.10.x版本已经可以实现部署集群, 如果你对k8s的原理已经非常了解 ...