在WebGL中创建动画

前言

在搭建WebGL开发环境中介绍了如何开始使用webgl进行绘制。
本篇文章介绍如何在WebGL中创建动画

动画的定义

动画是一种通过快速显示一系列图像(或帧)模拟运动的技术。

动画的分类

网页上的动画基本分为三类:

  • 声明式动画,如CSS动画和SVG动画,这类动画不需要js的介入,用户只需要说明元素如何运动,不需要定义每帧的内容
  • 基于脚本的动画,这种动画每一帧的执行都是靠js来控制的,这类动画包括
    • 通过更新DOM元素的样式对象
    • 在HTML5 2D画布上绘制对象
    • 通过WebGL来绘制对象,这也是本篇文章的重点
  • 基于文件的动画,这类动画的每帧内容包含在文件中,比如GIF动画,比如Flash动画。在浏览器中使用这种动画可能需要相应的插件。

WebGL使用动画

抛开技术不谈,我们先梳理一下使用webgl技术怎么实现一个动画,比如最简单的,让一个点移动,过程如下:

  1. 清空画布
  2. 上传顶点的位置
  3. 绘制顶点,到这一步,顶点并没有移动
  4. 我们需要经过一帧的时间,然后
  5. 再次清空画布
  6. 修改顶点的位置并上传,
  7. 重新绘制顶点

只要我们每一帧的时间足够短,我们就能看到一个点在画布上运动。

setInterval()

说明

setInterval()方法重复调用一个函数或执行一个代码片段,在每次调用之间具有固定的时间间隔。

定义

var intervalID = setInterval(func, [delay, arg1, arg2, ...]);

参数

  • func: 要重复调用的函数,每经过指定 delay 毫秒后执行一次。第一次调用发生在 delay 毫秒之后。
  • delay: 是每次延迟的毫秒数(一秒等于 1000 毫秒),函数的每次调用会在该延迟之后发生。如果未指定,则其默认值为 0,也就是每个事件循环都会执行一次
  • arg: 可选参数,当计时结束的时候,将被传递给 func 函数的附加参数。

返回值

它返回一个 interval ID,该 ID 唯一地标识时间间隔,因此你可以稍后通过调用 clearInterval() 来移除定时器。

setTimeout()

说明

setTimeout() 方法设置一个定时器,一旦定时器到期,就会执行一个函数或指定的代码片段。

定义

setTimeout(func, delay, arg1, arg2, /* … ,*/ argN)

参数

  • func: 经过指定 delay 毫秒后执行的函数。
  • delay: 定时器在执行指定的函数或代码之前应该等待的时间,单位是毫秒。如果省略该参数,则使用值 0,意味着“立即”执行,或者更准确地说,在下一个事件循环执行。
  • arg:附加参数,一旦定时器到期,它们会作为参数传递给 func指定的函数。

返回值

返回值 timeoutID 是一个正整数,表示由 setTimeout() 调用创建的定时器的编号。这个值可以传递给 clearTimeout() 来取消该定时器。

requestAnimationFrame

虽然Web开发人员很久以前就可以用setInterval和setTimeout函数创建动画,但是最近人们推荐另一种实现基于脚本的动画的方式。
requestAnimationFrame,与setInterval和setTimeout函数一样,后者也是HTML DOM窗口对象的一部分

requestAnimationFrame是一个全局函数,是浏览器用于定时循环操作的一个接口,类似于setTimeout,主要用途是按帧对网页进行重绘,让各种网页动画效果(DOM动画、Canvas动画、SVG动画、WebGL动画)能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果。

关于requestAnimationFrame,需要注意一下几点:

  • requestAnimationFrame() 是一次性的,也就是说你使用接口后,浏览器会在下一次刷新时调用你传进去的回调函数,但是只有一次有效,若你想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用 requestAnimationFrame()
  • requestAnimationFrame的刷新频率是通过浏览器来控制的,而浏览器的刷新频率就是最佳刷新频率。
  • 浏览器也可以减速更新或暂停更新在某个不可见选项卡中正在运行的动画。这样,用这个方法不仅可以改善动画的性能,还可以节省电能,后者对于移动设备尤为重要。电池寿命通常是移动设备的一个重要因素。

定义

requestAnimationFrame(callback)

参数

callback:当你的动画需要更新时,为下一次重绘所调用的函数。该回调函数会传入一个参数,表示 requestAnimationFrame() 开始执行回调函数的时间戳。
注意:在同一个帧中的多个回调函数,它们每一个都会接受到一个相同的时间戳,即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数,单位为毫秒,最小精度为 1ms

返回值

一个long整数,请求 ID,是回调列表中唯一的标识。是个非零值,没有别的意义。你可以传这个值给window.cancelAnimationFrame() 以取消回调函数请求。

下面是一个使用requestAnimationFrame设置动画的例子

// 所有动画回调的集合
var animCallbacks=new Array();/*** 设置刷新* @param {*} fps 刷新率* @param {*} updateCallback 回调函数,处理每帧的逻辑 */
function setUpdate(fps,updateCallback)
{updateCallback.interval = 1000/fps;updateCallback.lastTime = undefined;animCallbacks.push(updateCallback);if(animCallbacks.length==1){tick();}
}/*** 时钟,用于确定是否需要刷新*/
function tick(timeStamp)
{requestAnimationFrame(tick.bind(this));animCallbacks.forEach(callback => {if(!callback){return;}if(callback.lastTime == undefined){callback.lastTime = timeStamp;}if(timeStamp && timeStamp - callback.lastTime>=callback.interval){callback.lastTime = timeStamp;callback();}});
}

完整代码已上传gitlab

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/668307.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

我的创作128纪念日

机缘 起初我写博客是为了记录自己的学习过程,现在也是如此 实战项目中的经验分享日常学习过程中的记录通过文章进行技术交流通过文章加深学习和复习 收获 在创作过程中 获得了400多位粉丝的关注感谢大家的支持阅读数量也达到了3w在博客上认识仲秋大佬,感谢大佬对我的指导,我…

成都软件产业优势明显

是的,成都非常适合软件产业的发展。以下是一些原因: 人才储备丰富:成都拥有众多高等院校和科研机构,为软件产业提供了丰富的人才储备。这些机构培养了大量的软件人才,为成都软件产业的发展提供了有力支持。政策支持&a…

C# 继承的详细介绍和使用

文章目录 前言一、C# 继承的概念:二、继承的基本使用方法三、继承在项目中的具体应用示例四、继承的类型1.公有继承(Public Inheritance):2.保护继承(Protected Inheritance):3.私有继承&#x…

Java实现康复中心管理系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 普通用户模块2.2 护工模块2.3 管理员模块 三、系统展示四、核心代码4.1 查询康复护理4.2 新增康复训练4.3 查询房间4.4 查询来访4.5 新增用药 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的康复中…

Intellij IDEA各种调试+开发中常见bug

Intellij IDEA中使用好Debug,主要包括如下内容: 一、Debug开篇 ①、以Debug模式启动服务,左边的一个按钮则是以Run模式启动。在开发中,我一般会直接启动Debug模式,方便随时调试代码。 ②、断点:在左边行…

如何在 Microsoft Azure 上部署和管理 Elastic Stack

作者:来自 Elastic Osman Ishaq Elastic 用户可以从 Azure 门户中查找、部署和管理 Elasticsearch。 此集成提供了简化的入门体验,所有这些都使用你已知的 Azure 门户和工具,因此你可以轻松部署 Elastic,而无需注册外部服务或配置…

C语言基础(五)——联合

联合 引言联合的声明联合的声明typedef命名联合 设置联合的值C89(标准)方式使用.操作符进行指定初始化 联合的内存布局联合的使用场景节省内存资源实际应用案例分析 总结 引言 在学习C语言基础时,联合和结构体是两个经常被拿来比较的概念。虽…

NuxtJs安装Sass后出现ERROR:Cannot find module ‘webpack/lib/RuleSet‘

最近了解NuxtJs时,发现问题比较多,对于初学者来说是件比较头痛的事。这次是安装sass预处理器,通过命令安装后,出现了ERROR:Cannot find module webpack/lib/RuleSet 错误,于是根据之前经验,对版…

Python统计分析——参数估计

参考资料:用python动手学统计学 所谓参数就是总体分布的参数。 1、导入库 # 导入用于数值计算的库 import numpy as np import pandas as pd import scipy as sp from scipy import stats # 导入用于绘图的库 from matplotlib import pyplot as plt import seabor…

vue前端+nodejs后端通信-简单demo

本文记录vue前端nodejs后端通讯最简单的方法,供广大网友最快速进入全栈开发。 技术架构 前端 vue axios 后端 nodejs express 一、前端部分-搭建VUE 项目 vue create Vnodenpm run serve 启动; 具体操作步骤,请自行百度,这里没…

minitouch王者荣耀按键百分比

minitouch王者荣耀按键百分比 3 技能英雄 原图 2376 x 1104 xy说明x百分比y百分比23761104总分辨率160444金币0.0673400673400670.402173913043478296440物品10.1245791245791250.398550724637681296566物品20.1245791245791250.51268115942029470864摇杆0.1978114478114480…

51单片机之LED灯模块篇

御风以翔 破浪以飏 🎥个人主页 🔥个人专栏 目录 点亮一盏LED灯 LED的组成原理 LED的硬件模型 点亮一盏LED灯的程序设计 LED灯闪烁 LED流水灯 独立按键控制LED灯亮灭 独立按键的组成原理 独立按键的硬件模型 独立按键控制LED灯状态 按键的抖动 独立按键…

当服务器发布代码与本地代码不一致无法发布时(java)

现象:服务器代码与本地代码不一致,本地代码发布上去有错误,替换配置文件,替换修改的文件也无效,原使用者已离职 我的思路: 1.下载服务器上发布包 2.反编译服务器上代码和本地代码,反编译工具…

机器学习本科课程 实验3 决策树处理分类任务

实验3.1 决策树处理分类任务 使用sklearn.tree.DecisionTreeClassifier完成肿瘤分类(breast-cancer)计算最大深度为10时,十折交叉验证的精度(accuracy),查准率(precision),查全率(recall),F1值绘制最大深度…

Haas 开发板连接阿里云上传温湿度和电池电压

目录 一、在阿里云上创建一个产品 二、开发环境的介绍 三、创建wifi示例 四、编写SI7006和ADC驱动 五、wifi配网 六、主要源码 七、查看实现结果 一、在阿里云上创建一个产品 登录自己的阿里云账号, 应该支付宝,淘宝账号都是可以的。 接着根据需求…

【Redis】理论基础 - 分区策略

[toc]、 在 Redis 的学习中,我们将重点介绍分区策略,这是一种通过水平扩展来提高 Redis 性能和处理大量数据的方法。通过分区,我们可以将数据分散存储在多个 Redis 实例中,充分利用集群的计算和存储资源。本篇博客将介绍 Redis 的…

设置 相关

记录使用过程中做的设置相关事宜。方便后续查询 vscode如何自动生成html格式: vscode快速生成html模板 --两种方法,亲测有用_vscode自动生成html模板-CSDN博客 使用第二个方式。存储html格式后缀。输入!,vscode自动补全。 安装…

ywtool login guard命令

一.登录防护功能介绍 登录防护功能主要检查系统日志/var/log/secure,查看系统有没有被暴力登录。登录防护默认是检测3分钟内登录系统失败15次(次数可修改)后,视其为有攻击性,拉黑此IP(centos7通过系统文件阻止IP,centos8/9通过防火墙阻止IP)。此脚本只针对SSH访问,…

platform tree架构下i2c应用实例(HS3003)

目录 概述 1 探究platform tree下的i2c 1.1 platform tree下的i2c驱动 1.2 查看i2c总线下的设备 1.3 使用命令读写设备寄存器 2 认识HS3003 2.1 HS3003特性 2.2 HS3003寄存器 2.2.1 温湿度数据寄存器 2.2.2 参数寄存器 2.2.3 一个参数配置Demo 2.3 温湿度值转换 2.…

在工业制造方面,如何更好地实现数字化转型?

实现工业制造的数字化转型涉及利用数字技术来增强流程、提高效率并推动创新。以下是工业制造领域更好实现数字化转型的几个关键步骤: 1.定义明确的目标: 清楚地概述您的数字化转型目标。确定需要改进的领域,例如运营效率、产品质量或供应链…