WebGL系列教程九（动画）

已于 2024-10-09 11:14:34 修改
阅读量929 收藏 9
点赞数 12
分类专栏： WebGL 文章标签： webgl 动画 旋转 贴图 uv 原理
于 2024-09-18 11:49:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiangshangdemayi/article/details/142323765
版权

快速导航（持续更新中）

WebGL系列教程一（开篇）
WebGL系列教程二（环境搭建及着色器初始化）
WebGL系列教程三（使用缓冲区绘制三角形）
WebGL系列教程四（绘制彩色三角形）
WebGL系列教程五（使用索引绘制彩色立方体）
WebGL系列教程六（纹理映射与立方体贴图）
WebGL系列教程七（二维及三维旋转、平移、缩放）
WebGL系列教程八（GLSL着色器基础语法）
WebGL系列教程九（动画）
WebGL系列教程十（模型Model、视图View、投影Projection变换）
WebGL系列教程十一（光照原理及Blinn Phong着色模型）

目录

1 前言

  上一篇我们讲了WebGL中的基础语法，现在我们已经讲过了三维物体的绘制，着色及纹理映射，现在我们可以讲一些稍微高级点的操作了，这一节我们来讲动画，我们考虑怎么让一个立方体动起来。

2 绘制立方体并进行纹理映射

  这一节的代码是在WebGL系列教程六（纹理映射与立方体贴图）的基础上修改而来的，因此绘制立方体和纹理映射的代码我们直接拿过来。

<script id="vertex-shader" type="x-shader/x-vertex">
    //顶点位置
    attribute vec4 a_Position;
    //纹理坐标
    attribute vec2 a_TexCoord;
    //传递纹理坐标
    varying vec2 v_TexCoord;
    void main(){
        gl_Position = a_Position;
        //直接将纹理坐标赋值给传递变量
        v_TexCoord = a_TexCoord;
    }
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
    precision highp float;
    //采样器，固定写法
    uniform sampler2D u_Sampler;
    //接收顶点着色器传过来的值
    varying vec2 v_TexCoord;
    void main(){
    	//到某个纹理坐标去采样，也是固定写法
        gl_FragColor = texture2D(u_Sampler,v_TexCoord);
    }
</script>


// Create a cube
//    v6----- v7
//   /|      /|
//  v1------v0|
//  | |     | |
//  | |v5---|-|v4
//  |/      |/
//  v2------v3
const verticesColors = new Float32Array([
    // 前面
    -1.0, -1.0,  1.0,   0.0, 0.0,//v2 图片左下角纹理坐标
     1.0, -1.0,  1.0,   1.0, 0.0,//v3 图片左下角纹理坐标
     1.0,  1.0,  1.0,   1.0, 1.0,//v0 图片右下角纹理坐标
    -1.0,  1.0,  1.0,   0.0, 1.0,//v1 图片左上角纹理坐标

    // 后面
    -1.0, -1.0, -1.0,   0.0, 0.0,//v5 同上
     1.0, -1.0, -1.0,   1.0, 0.0,//v4 同上
     1.0,  1.0, -1.0,   1.0, 1.0,//v7 同上
    -1.0,  1.0, -1.0,   0.0, 1.0,//v6 同上

    // 上面
    -1.0,  1.0,  1.0,   0.0, 0.0,//v1 同上
     1.0,  1.0,  1.0,   1.0, 0.0,//v0 同上
     1.0,  1.0, -1.0,   1.0, 1.0,//v7 同上
    -1.0,  1.0, -1.0,   0.0, 1.0,//v6 同上

    // 下面
     -1.0, -1.0, 1.0,   0.0, 0.0,//v2 同上
     1.0,  -1.0, 1.0,   1.0, 0.0,//v3 同上
     1.0,  -1.0,-1.0,   1.0, 1.0,//v4 同上
     -1.0, -1.0,-1.0,   0.0, 1.0,//v5 同上

    // 左面
    -1.0, -1.0, -1.0,   0.0, 0.0,//v5 同上
    -1.0, -1.0,  1.0,   1.0, 0.0,//v2 同上
    -1.0,  1.0,  1.0,   1.0, 1.0,//v1 同上
    -1.0,  1.0, -1.0,   0.0, 1.0,//v6 同上

    // 右面
     1.0, -1.0,  1.0,   0.0, 0.0,//v3 同上
     1.0, -1.0, -1.0,   1.0, 0.0,//v4 同上
     1.0,  1.0, -1.0,   1.0, 1.0,//v7 同上
     1.0,  1.0,  1.0,   0.0, 1.0,//v0 同上
]);


const indices = new Uint8Array([
    0, 1, 2, 0, 2, 3, // 前面
    4, 5, 6, 4, 6, 7, // 后面
    8, 9, 10, 8, 10, 11, // 上面
    12, 13, 14, 12, 14, 15, // 下面
    16, 17, 18, 16, 18, 19, // 左面
    20, 21, 22, 20, 22, 23  // 右面
]);
gl.viewport(0, 0, canvas.width, canvas.height);
gl.enable(gl.DEPTH_TEST);
//顶点
let vertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER,verticesColors,gl.STATIC_DRAW);
let FSIZE = verticesColors.BYTES_PER_ELEMENT;
let a_Position = gl.getAttribLocation(program,'a_Position');
gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,FSIZE*5,0);
gl.enableVertexAttribArray(a_Position);
//指定纹理坐标值
let a_TexCoord = gl.getAttribLocation(program,'a_TexCoord');
gl.vertexAttribPointer(a_TexCoord,2,gl.FLOAT,false,5*FSIZE,3*FSIZE);
gl.enableVertexAttribArray(a_TexCoord);
let image = new Image();
image.src = 'static/sky.jpg';
image.onload = function(){
    console.log('image ok');
	//创建纹理对象
    let texture = gl.createTexture();
    //获取采样器
    let u_Sampler = gl.getUniformLocation(program,'u_Sampler');
    //反转Y轴，canvas的Y轴和WebGL的Y轴方向是反的
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
    //启用0号纹理
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D,texture);
    //设置纹理为，缩小纹理时，取纹理坐标周围四个像素的颜色均值
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
    //设置对象使用的图片，mipmap层级，图像的格式，纹理的格式，纹理数据类型，图片
    gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image);
    //将0号纹理赋值给采样器
    gl.uniform1i(u_Sampler,0);


    //绑定索引缓冲
    let indexBuffer =  gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);
    //清空颜色缓冲和深度缓冲
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    //绘制
    //顶点索引数组如果是Uint8Array，就是UNSIGNED_BYTE，表示数组里的值在0-2^8-1(255)
    //................Uint16Array,就是UNSIGNED_SHORT，表示数组里的值在0-2^16-1(65535)
    //................Uint32Array,就是UNSIGNED_INT，表示数组里的值在0-2^32-1(4294967295)
    gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_BYTE, 0);
};

效果：

在这里插入图片描述

3 动画思路

  现在我们要让这个立方体动起来。那怎么动呢？让立方体始终旋转就可以了。那怎么让它旋转呢？乘以我们之前讲到的旋转矩阵就可以了。那怎么让它一直动呢？用定时器可以实现，每秒都去执行，但是还有性能更好的实现方案，那就是requestAnimationFrame。requestAnimationFrame能够让浏览器每一帧都去调用一个函数。

4 开始绘制

4.1 在顶点着色器中声明旋转矩阵

<script id="vertex-shader" type="x-shader/x-vertex">
    //顶点位置
    attribute vec4 a_Position;
    //旋转矩阵
    uniform mat4 uRotateMatrix;
    //纹理坐标
    attribute vec2 a_TexCoord;
    //传递纹理坐标
    varying vec2 v_TexCoord;
    void main(){
    	//旋转矩阵乘以顶点的位置，表示每个顶点都经过了旋转
        gl_Position = uRotateMatrix * a_Position;
        //直接将纹理坐标赋值给传递变量
        v_TexCoord = a_TexCoord;
    }
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
    precision highp float;
    //采样器，固定写法
    uniform sampler2D u_Sampler;
    //接收顶点着色器传过来的值
    varying vec2 v_TexCoord;
    void main(){
    	//到某个纹理坐标去采样，也是固定写法
        gl_FragColor = texture2D(u_Sampler,v_TexCoord);
    }
</script>

4.2 获取旋转矩阵变量并进行赋值

//创建旋转矩阵
var modelMatrix = new Matrix4();
//绕Y轴旋转60度，0，1，0，表示Y轴上的单位向量
modelMatrix.setRotate(60,0,1,0);
var uRotateMatrix = gl.getUniformLocation(program, 'uRotateMatrix');
gl.uniformMatrix4fv(uRotateMatrix,false,modelMatrix .elements);

4.3 计算角度

var ANGLE_STEP = 30.0;//假设每秒旋转30度
var currentAngle = 0.0; //当前是0度
var g_last = Date.now();//记录一个开始时间
function animate(angle) {
    // 计算角度
    var now = Date.now();//获取当前时间
    var elapsed = now - g_last;//两个时间相减，得到两个时间之差，单位为毫秒
    g_last = now;
    // 更新角度,一秒是1000毫秒，先算出过了几秒，再乘以角度的步长
    var newAngle = angle + ANGLE_STEP * (elapsed / 1000.0);
    return newAngle %= 360;
}

4.4 每一帧都去绘制

let tick = function(){
    currentAngle = animate(currentAngle);
    modelMatrix.setRotate(currentAngle,0,1,0);
    //绘制
    //略。。。
    //每一帧都去调用
    requestAnimationFrame(tick);
};
tick();

4.5 效果

在这里插入图片描述

4.6 完整代码

const verticesColors = new Float32Array([
    // 前面
    -1.0, -1.0,  1.0,   0.0, 0.0,//v2 图片左下角纹理坐标
     1.0, -1.0,  1.0,   1.0, 0.0,//v3 图片左下角纹理坐标
     1.0,  1.0,  1.0,   1.0, 1.0,//v0 图片右下角纹理坐标
    -1.0,  1.0,  1.0,   0.0, 1.0,//v1 图片左上角纹理坐标

    // 后面
     1.0, -1.0, -1.0,   0.0, 0.0,//v4 同上
    -1.0, -1.0, -1.0,   1.0, 0.0,//v5 同上
    -1.0,  1.0, -1.0,   1.0, 1.0,//v6 同上
     1.0,  1.0, -1.0,   0.0, 1.0,//v7 同上

    // 上面
    -1.0,  1.0,  1.0,   0.0, 0.0,//v1 同上
     1.0,  1.0,  1.0,   1.0, 0.0,//v0 同上
     1.0,  1.0, -1.0,   1.0, 1.0,//v7 同上
    -1.0,  1.0, -1.0,   0.0, 1.0,//v6 同上

    // 下面
     -1.0, -1.0, 1.0,   0.0, 0.0,//v2 同上
     1.0,  -1.0, 1.0,   1.0, 0.0,//v3 同上
     1.0,  -1.0,-1.0,   1.0, 1.0,//v4 同上
     -1.0, -1.0,-1.0,   0.0, 1.0,//v5 同上

    // 左面
    -1.0, -1.0, -1.0,   0.0, 0.0,//v5 同上
    -1.0, -1.0,  1.0,   1.0, 0.0,//v2 同上
    -1.0,  1.0,  1.0,   1.0, 1.0,//v1 同上
    -1.0,  1.0, -1.0,   0.0, 1.0,//v6 同上

    // 右面
     1.0, -1.0,  1.0,   0.0, 0.0,//v3 同上
     1.0, -1.0, -1.0,   1.0, 0.0,//v4 同上
     1.0,  1.0, -1.0,   1.0, 1.0,//v7 同上
     1.0,  1.0,  1.0,   0.0, 1.0,//v0 同上
]);


const indices = new Uint8Array([
    0, 1, 2, 0, 2, 3, // 前面
    4, 5, 6, 4, 6, 7, // 后面
    8, 9, 10, 8, 10, 11, // 上面
    12, 13, 14, 12, 14, 15, // 下面
    16, 17, 18, 16, 18, 19, // 左面
    20, 21, 22, 20, 22, 23  // 右面
]);
gl.viewport(0, 0, canvas.width, canvas.height);
gl.enable(gl.DEPTH_TEST);
//顶点
let vertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER,verticesColors,gl.STATIC_DRAW);
let FSIZE = verticesColors.BYTES_PER_ELEMENT;
let a_Position = gl.getAttribLocation(program,'a_Position');
gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,FSIZE*5,0);
gl.enableVertexAttribArray(a_Position);


//指定纹理坐标值
let a_TexCoord = gl.getAttribLocation(program,'a_TexCoord');
gl.vertexAttribPointer(a_TexCoord,2,gl.FLOAT,false,5*FSIZE,3*FSIZE);
gl.enableVertexAttribArray(a_TexCoord);
let image = new Image();
image.src = 'static/sky.jpg';
// Rotation angle (degrees/second)
let ANGLE_STEP = 30.0;
let currentAngle = 0.0; 
let modelMatrix = new Matrix4();
// Last time that this function was called
let g_last = Date.now();
function animate(angle) {
    // Calculate the elapsed time
    let now = Date.now();
    let elapsed = now - g_last;
    g_last = now;
    // Update the current rotation angle (adjusted by the elapsed time)
    let newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
    return newAngle %= 360;
}
image.onload = function(){
    let tick = function(){
        // console.log('image ok');
        currentAngle = animate(currentAngle);
        modelMatrix.setRotate(currentAngle,0,1,0);

        let texture = gl.createTexture();
        let u_Sampler = gl.getUniformLocation(program,'u_Sampler');
        //反转Y轴
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
        //启用0号纹理
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D,texture);
        //设置纹理为，缩小纹理，取纹理坐标周围四个像素的颜色均值
        gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
        //设置对象使用的图片，mipmap层级，图像的格式，纹理的格式，纹理数据类型，图片
        gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image);
        //将0号纹理赋值给采样器
        gl.uniform1i(u_Sampler,0);

        //绑定索引缓冲
        let indexBuffer =  gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);


        //赋值给u_MvpMatrix
        var uRotateMatrix= gl.getUniformLocation(program, 'uRotateMatrix');
        gl.uniformMatrix4fv(uRotateMatrix,false,uRotateMatrix.elements);
        //清空颜色缓冲和深度缓冲
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        //绘制
        //顶点索引数组如果是Uint8Array，就是UNSIGNED_BYTE，表示数组里的值在0-2^8-1(255)
        //................Uint16Array,就是UNSIGNED_SHORT，表示数组里的值在0-2^16-1(65535)
        //................Uint32Array,就是UNSIGNED_INT，表示数组里的值在0-2^32-1(4294967295)
        gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_BYTE, 0);
        requestAnimationFrame(tick, canvas);
    };
    tick();
    
};

5 总结

  本文中我们讲解了动画的原理，并在绘制的立方体及纹理贴图后，绕Y轴旋转，形成了一个简单的动画。本篇的内容结合了之前讲过的所有内容，是一个比较综合的例子，希望读者仔细体会，回见~

AIGIS.
关注
专栏目录
WebGL系列教程：WebGL基础知识
xiangzhihong8的专栏
08-03 934
使用顶点绘制的 2D 或 3D 模型称为网格,网格中的每个面都称为多边形，多边形由 3 个或更多顶点组成。要在 WebGL 渲染上下文中绘制模型，就必须使用 JavaScript 数组定义顶点和索引。例如，如果我们想创建一个位于坐标 {(5,5), (-5,5), (-5,-5)} 上的三角形，如下图。为了更好地理解指数，请考虑更复杂的模型，如 square，我们可以将正方形表示为一组两个三角形。
WebGL基础教程
08-31
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。
【WebGL实战】1. 全流程实现与拆解：WebGL绘制2D图形
同学小张的博客
06-01 746
WebGL绘制2D图形的实战，全流程实现与拆解
webGL教程教程教程
05-05
webGL开发代码教程 提供兴趣者学习学习学习 资源共享
学习WebGl基础知识（二）
最新发布
weixin_45231569的博客
09-01 1006
学习WebGl基础知识（二）
WebGL基础教程：第一部分
前端达人
06-24 792
点击上方“前端达人” 可以订阅哦！WebGL是一种基于OpenGL的浏览器内置3D渲染器，它可以让你在HTML5页面中直接显示3维内容。 在本教程中，我会介绍你使用此框架所需的所有基础内容。 介绍 开始学习之前，有几件事你是需要了解的。 WebGL是将3D内容渲染到HTML5的canvas元素上的一种JavaScript API。 它是利用"3D世界"中称为着色器的两种脚本来实现这一点的。 这两种
WebGL教程3：运动起来
wjlgryx的专栏
03-24 891
欢迎来到WebGL教程第三课。这次我们将学习如何移动物体。本课基于NeHe OpenGL教程的第4课。如果你的浏览器已经支持WebGL，请点击此处，你将看到本课WebGL的现场版；如果不支持，你从此处可以获取一个支持WebGL的浏览器。一点提示：这些课程是面向那些具有一定编程知识但没有实际3D图形开发经验的开发人员的；其目的是让你对代码层上发生了什么事 有很好的理解，以便你能尽可 能快地创建出自己...
WebGL简易教程(一)：第一个简单示例
热门推荐
人生海海 山山而川
08-04 2万+
概述了这篇教程的目的，编写了WebGL的第一个示例。
webGl教程
不忘初心，方得始终！不求尊贵，但求问心无愧！
06-23 906
WebGl教程
每日WebGL教程
08-10
WebGL是一种基于OpenGL标准的JavaScript API，用于在任何兼容的Web浏览器中进行2D和3D图形渲染。...文件名“webgl-month-master”暗示这是一个持续一整月的教程系列，每天都有新的主题和挑战，逐步构建WebGL编程技能。
webgl初级教程r73-2018年10月.rar
03-17
这个“WebGL初级教程r73-2018年10月”压缩包文件很可能是为初学者设计的一系列教程，帮助他们理解和掌握WebGL的基本概念和技术。教程可能涵盖2018年10月时WebGL版本r73的关键特性。 在WebGL中，开发者可以使用...
webGL初级教程
08-25
WebGL课程资源，基于three.js。用浏览器渲染技术的初级教程。百度云文件
WebGL视频教程
06-20
本课程主要对原生WebGL进行讲解，不需要你有特定的图形基础，稍微了解一点JavaScript编程及时即可。通过本课程学习你可以对WebGL渲染管线和着色器语言建立一个整体的认识，有了一定的WebGL基础，更容易理解three.js、babylon、Cesium等3D引擎底层原理。
webgl视频教程+学习资料
03-22
本次分享的WEBGL视频教程目录如下， 本次分享的WEBGL最新视频第一季主要包括如下内容，全集49集，主要是WEBGL的基础知识，包括基本的几何基础，着色器，渲染等知识，基本上涉及到了WEBGL的基础知识的方方面面！ ...
html5 WebGL酷炫网页动画特效.zip
09-26
这个压缩包“html5 WebGL酷炫网页动画特效.zip”显然包含了一系列使用HTML5和WebGL实现的动画效果，适合对网页特效感兴趣的初学者和专业人士。 HTML5是现代网页开发的标准，它增强了网页的交互性和多媒体支持，例如...
webgl教程
仗贱走天涯
02-08 579
http://www.hewebgl.com/
WebGL教程(电子书)
u014291990的博客
11-08 7278
WebGL教程(电子书) 最近准备编写一本WebGL快速入门的电子书教程，电子书编写完整后，会免费开源到我的个人技术博客，目前还在编写中，已经写好的会把电子书每一小节以文章的形式发布才CSDN上。 第一章、WebGL零基础入门 1.1 WebGL绘制一个点—第一个程序 1.2 更新中 ...
网页高性能图形编程（四）-WebGL颜色-使用着色器绘制多顶点颜色的三角图形 & 操作部骤-顶点着色器和片段着色器 & 着色器编译羽图像绘制-vertexAttribPointer 方法
weixin_44867717的博客
08-01 1341
第5章-WebGL颜色 01-操作步骤介绍 颜色添加步骤 在顶点着色器中定义一个接收外部传入颜色值的属性变量a_Color和用于传输获取到的颜色值变量v_Color 在片段着色器中定义一个同一类型和名称的v_Color变量接收传顶点传入的值。 重新传入到顶点坐标和颜色值的类型化数组 将数组值传入缓存中并取出，赋值给顶点的两个变量 接收缓存值并绘制图形和颜色 vertexAttribPointer 方法 参数 说明 第1个参数 指定待分配attribute变量的存储位置
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AIGIS.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值