`
rainsilence
  • 浏览: 160479 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

纯webgl模拟飘动效果

 
阅读更多

 

上图:

 

 

懒得去找图片,就找了个箱子来飘一下

 

大家直接看吧。不会运行webgl的看http://www.hiwebgl.com/

 

主要是index数组生成和sin函数。没什么高深的东西

 

 

GLSL版是利用了webgl规范中的特性,而不是使用opengl旧约的思想。渲染效率更高

分享到:
评论
2 楼 rainsilence 2011-12-06  
ziyouren521125 写道
这个xp系统运行不了么?

看www.hiwebgl.com里面有教程
1 楼 ziyouren521125 2011-12-06  
这个xp系统运行不了么?

相关推荐

    jquery+html5模拟3D云彩飘动效果

    【jQuery + HTML5 模拟3D云彩飘动效果】是利用现代Web技术实现的一种动态视觉效果。这个效果主要用于增强网页的互动性和视觉吸引力,让用户体验到更生动、更逼真的场景。以下是对这个主题的详细解释: 1. **HTML5**...

    HTML5 WebGL水面水波荡漾特效 可多视角展示 超逼真

    "HTML5 WebGL水面水波荡漾特效"是一种利用WebGL技术实现的视觉效果,它可以模拟水面的波动和反射,使网页中的水体看起来极其逼真。这种特效通常涉及到复杂的数学计算,如向量运算、矩阵变换以及物理模拟,如波动方程...

    HTML5 WebGL 实现逼真的云朵效果

    5. **动画效果**:为了让云朵看起来更加动态,我们可以改变噪声纹理的坐标,模拟云朵的飘动。也可以通过改变云层的厚度、形状和速度,创造出各种动态效果。 6. **性能优化**:由于云朵模型可能包含大量多边形,渲染...

    three.js+html5 canvas丝带飘动动画特效

    在three.js中,可以创建软体对象,通过调整物理参数来实现逼真的飘动效果。 5. **透明度控制**: CSS3的`opacity`属性可以控制元素的透明度,但不支持3D对象。在WebGL中,通过设置材质的Alpha通道可以实现3D对象的...

    HTML5+Three.js实现简单布料衣服模拟风吹飘动与球体动画效果源码.zip

    粒子系统通过模拟大量的微小粒子相互作用来模拟布料的柔韧性和飘动效果。另一方面,几何体模拟则会使用更精细的数学模型,如有限元分析,来计算布料的变形。 风吹飘动的效果可能是通过向布料模型施加风力或其他外力...

    Html5 效果之模拟实现物理效果

    通过以上方法,开发者可以在网页上创造出各种有趣的物理效果,例如弹跳的球、流动的液体、飘动的布料等。结合CSS3的过渡和动画,以及Audio API的声音播放,可以构建出引人入胜的交互式体验。总的来说,HTML5的物理...

    3D袜子飘动动画特效.zip

    本资源“3D袜子飘动动画特效.zip”显然聚焦于利用3D技术来实现一种动态的袜子飘动效果。这个特效可能是通过JavaScript(JS)编程语言来实现的,正如标签“JS特效-其它代码”所提示的那样。 JavaScript是一种广泛...

    HTML5+WebGL实现暗夜云雾缭绕和月亮水面倒影模糊动画特效源码.zip

    云雾效果可能通过粒子系统或纹理贴图实现,通过改变它们的位置、大小和透明度来模拟动态的云飘动。月亮的表面细节可能通过纹理映射来创建,同时其水面倒影可以通过镜像反射算法生成,并应用模糊滤镜增加真实感。 ...

    HTML5超逼真下雪场景效果

    4. **更新雪花状态**:使用`requestAnimationFrame()`或`setInterval()`定期更新每个雪花的位置,模拟下落和飘动效果。同时考虑重力、风速等因素,让雪花动态变化。 5. **碰撞检测**:检查雪花是否触碰到Canvas的...

    html5+three.js天空乌云密布背景动画特效

    为了实现云层的滚动和飘动效果,开发者可能利用了Three.js的动画框架,如Tween.js或内置的时间线功能,来控制云朵的位置、旋转和缩放。 在“右上角的参数设置面板”,用户可以调整动画的参数,这意味着代码中包含了...

    HTML5背景云朵飘飘的效果

    在这个案例中,"webgl-clouds(firefox)"可能是指使用WebGL技术实现的云朵飘动效果。WebGL是一种基于OpenGL标准的JavaScript API,允许在浏览器中进行硬件加速的3D图形渲染。如果使用WebGL,我们可以创建3D云朵模型,...

    网页背景特效代码,背景上飘动好看的图案

    - **优化与改进**:现代Web开发中,可以使用CSS3的动画属性(如`animation`和`transform`)或者WebGL技术来实现更高效、更流畅的动画效果,同时提高代码的可读性和维护性。 总之,这段代码为我们提供了一个基本的...

    html5-hair

    虽然头发动态效果不一定需要3D,但某些情况下,WebGL可能用于创建更逼真的头发飘动效果。 5. **Web Audio API**: 配合视觉效果,HTML5的Web Audio API可以创建和控制音频,使得头发飘动与声音同步,增加互动性。 6...

    flash动画 实力

    例如,雪花飘动效果可能包括随机生成雪花的位置、大小和方向,以及模拟重力让雪花缓缓下落,这些都需要通过ActionScript来编写。 6. **动画实例的学习价值**:这样的实例对于学习者来说,不仅可以提升动画设计技能...

    Three.js实现飘舞的三角形多彩纸片动画效果源码.zip

    可以使用requestAnimationFrame来创建动画循环,每次循环中,调整每个纸片的位置和旋转角度,模拟飘动的感觉。 6. **渲染场景**:最后,使用renderer.render()方法将场景渲染到网页上。确保在动画循环中调用此方法...

    HTML5+Three.js实现浓烟翻滚大雾弥漫场景动画效果源码.zip

    对于浓烟和雾,可能需要使用定制的几何体或者粒子系统(ParticleSystem)来模拟它们的飘动和扩散效果。材质定义了物体表面的外观,比如颜色、透明度和光照反应。 为了实现烟雾的动态效果,我们需要编写动画循环。在每...

    3D立体水晶雪花晃动带圆球气泡飘落js特效动画.zip

    首先,这个特效的核心在于利用JavaScript和CSS3来创建一个3D空间,模拟出水晶雪花和圆球气泡在屏幕中飘落的效果。3D效果的实现主要依赖于WebGL,这是一个JavaScript API,用于在浏览器中进行硬件加速的三维图形渲染...

    three.js+HTML5实现的锦鲤灯笼背景动画特效源码.zip

    在锦鲤灯笼动画中,锦鲤可能通过关键帧动画模拟游泳动作,灯笼则可能通过平移、旋转等操作模拟飘动效果。此外,源码可能还包含了一些用户交互逻辑,例如鼠标或触摸事件,让动画响应用户的输入。 六、场景管理 在...

Global site tag (gtag.js) - Google Analytics