WebGL助手：TWGL简化WebGL API的js动画库插件

twgl.js是一个小巧的WebGL助手库。这个js库的目的是让WebGL API更加简洁易读。WebGL的API非常的冗长，设置着色器，缓冲器，属性和uniforms需要大量的代码。一个简单的发光立方体效果在WebGL中可能需要超过60次代码调用。使用TWGL可以大大减少代码的书写，而且书写的代码整洁明了，非常容易读懂。

TWGL有5个核心函数：

  • twgl.createProgramInfo：编译着色器和创建属性和uniforms的设置器。
  • twgl.createBufferInfoFromArrays：插件缓冲区和属性的设置器。
  • twgl.setBuffersAndAttributes：绑定缓冲区并设置属性。
  • twgl.setUniforms：设置uniforms。
  • twgl.createTextures：创造各种各样的纹理。

效果演示：http://www.htmleaf.com/Demo/201504131674.html

下载地址：http://www.htmleaf.com/html5/html5-canvas/201504131673.html

时间： 2024-10-03 10:19:34

WebGL助手：TWGL简化WebGL API的js动画库插件的相关文章

模拟真实物体运动的js动画库插件-Anima

Anima是一款可以同时控制许多对象进行动画的js插件.并且每一个对象都有它们各自的质量和密度以模拟现实生活中的物体. CSS3动画有一些限制,最主要的是你不可以真正完全的控制它们.如果不使用一些技巧的话,你几乎不可能停止动画的过渡. Anima是一个基本的物理基础js动画库框架.你可以通过它很容易的创建现实生活中的物体运动动画.Anima经过压缩后只有5K大小. 在线演示:http://www.htmleaf.com/Demo/201502041327.html 下载地址:http://www

聊聊JS动画库:Velocity.js

前言 又到了炎热的7月,很久没有更新技术文章了,原因是上月月底实习结束,从公司离职.然后最近在弄自己的项目和考驾照,为了下次公司的应聘做准备,送别了女朋友到外地,哩哩啦啦半个月把一切事情都办妥后,还是静下心来学习新技术和写一写技术文章,希望能继续坚持下去吧. JS动画 随着互联网越来越丰富多样,网页端的美化和新技术层出不穷,作为一个网站的浏览者,更多吸引他们的除了保证网站的流畅之外还有各种炫酷的交互动效. 网页的交互动效大概分为 css动画,js动画 . JS动画的优点 既然我们大概了解了这两类

Velocity.js动画库使用

1.简介 Velocity 是一个简单易用.高性能.功能丰富的轻量级JS动画库.它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用. 2.兼容性 可兼容到 IE8 和 Android 2.3. 若需要兼容 IE8,就必须引入 jQuery 1.x 3.示例代码(注意文件引用路径) (1)index.html <!DOCTYPE html> <html lang="zh"> <head>

Html5添加轻量级炫酷js粒子动画库插件教程

一.使用方法 该粒子动画库插件使用方法非常简单,首先要在页面中引入particles.js文件. <script src="js/particles.js"></script> 在页面中使用一个div来作为放置粒子的容器. <div id="particles-js"></div> 然后可以按下面的方法调用该粒子插件: particlesJS('particles-js', { particles: { color:

html5轻量级炫酷js粒子动画库插件

这是一款基于html5 canvas的轻量级炫酷js粒子动画库插件.该粒子动画库js插件可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常酷. 同样的例子效果还有:HTML5 Canvas彩色的光粒子模拟粒子运动动画效果. 在线演示:http://www.htmleaf.com/Demo/201501301300.html 下载地址:http://www.htmleaf.com/html5/html5-canvas/201501301299.html

tween.js可生成平滑动画效果的js动画库

tween.js是一款可生成平滑动画效果的js动画库.tween.js允许你以平滑的方式修改元素的属性值.它可以通过设置生成各种类似CSS3动画效果.相关的jquery插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween.js允许你以平滑的方式修改元素的属性值.你只需要告诉tween你想修改什么值,以及动画结束时它的最终值是什么,动画花费多少时间等信息,tween引擎就可以计算从开始动画点到结束动画点之间值,来产生平滑的动画效

snabbt.js 强大的jQuery动画库插件

snabbt.js是一款轻量级的.功能强大的.简单易用的jQuery插件.snabbt.js提供了丰富的函数和接口来组合各种动画效果,它的过渡动画效果可以和CSS transform媲美,是一个非常强大的js动画库.snabbt.js的每秒传输帧数(刷新率)达到60FPS,即使是移动设备上也能达到这个数值.它的大小只有4KB,非常轻便. 使用snabbt.js可以很容易的将元素移动.旋转.放大缩小.倾斜和改变元素的大小.通过使用矩阵乘法运算(matrix multiplication opera

js动画库

Three.js Mo.js Anime.js Velocity Popmotion Vivus GreenSock JS Scroll Reveal Hover (CSS) Kute.js Typed.js animation.css 原文地址:https://www.cnblogs.com/tujw/p/12043806.html

TweenJS----前端常用的js动画库，缓动画和复制动画的制作，效果非常好。

TweenJS类库主要用来调整和动画HTML5和Javascript属性,提供了简单并且强大的tweening接口. http://www.createjs.cc/tweenjs/ http://www.createjs.cc/ CreateJS是基于HTML5开发的一套模块化的库和工具.基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. 快速入门 原文地址:https://www.cnblogs.com/shimily/p/11336278.html