草庐IT

GPU动画

全部标签

javascript - 如何使用重力沿弯曲路径制作动画

我正在尝试创建一个模拟,在该模拟中,球会遵循类似于此的运动路径:https://bl.ocks.org/mbostock/1705868但是,我不使用补间,而是希望球的运动由重力和物体的速度决定——类似于过山车,如下所示:https://www.myphysicslab.com/roller/roller-single-en.html这是我目前所拥有的,但有一个小问题,即过山车在每一帧中都略微获得能量,而不是失去能量:https://jsbin.com/jidazom/edit?html,js,outputX如有任何关于如何解决此问题的建议,我们将不胜感激!

javascript - 使用 jQuery 制作 PNG 动画?

是否有一个简单的插件或一些强大的代码可以让我使用简单的启动和停止方法为PNG制作动画?TSM,亚历克斯。[编辑:我制作了一个jQuery插件来为PNG动画。全部完成后会发布。] 最佳答案 虽然这不是“现成的”插件,但您可能有兴趣查看以下教程:BuildinganAnimatedCartoonRobotwithjQuery所有层都使用PNG图像。它解释了如何实现startHim()方法,我相信您可以将其转换为stopHim()。除非您正在尝试做类似的事情,否则您可能能够浏览它。 关于jav

javascript - 使用浏览器和 javascript 检测 GPU

我需要使用Chrome查明用户是否正在使用webgl黑名单上的显卡浏览网站:http://support.google.com/chrome/bin/answer.py?hl=en-GB&answer=1220892具体来说,我需要知道他们是否使用ATI显卡。当我在ATI卡上的Chrome中查看时,我使用THREE.js进行的项目会产生非常丑陋的渲染(线条没有抗锯齿),我想提供一个替代方案。我知道有一个模糊线条的后期效果,但艺术指导的结果更糟。 最佳答案 试试这个:functionaa_test(){renderer.setSize

javascript - 在 WebGL 中将大图像上传到 GPU

如何使用WebGL将大图像上传到GPU而不会卡住浏览器(想想高分辨率天空盒或纹理图集)?起初我想寻找是否有办法让texImage2D异步执行它的操作(将图像上传到GPU是IO-ish,对吧?),但我找不到任何方法。然后我尝试使用texSubImage2D上传适合16毫秒时间窗口的小块(我的目标是60fps)。但是texSubImage2D仅当您传入ArrayBufferView时才采用偏移量和宽度/高度参数-当传入Image对象时,您只能指定偏移量并且它将(我是猜测)上传整个图像。我想象先将图像绘制到Canvas上(将其作为缓冲区获取)与将整个图像上传到GPU一样慢。这是我的意思的一个

javascript - jQuery 动画设置回调抛出错误

我想实现一个jQuery动画回调方法progress或者step,但无论哪种情况,我都会收到以下错误:NS_ERROR_IN_PROGRESS:Componentreturnedfailurecode:0x804b000f(NS_ERROR_IN_PROGRESS)[nsICacheEntry.dataSize]我搜索了很多但无法在上下文中找到任何内容,我有点卡在这里,请提出可能导致此错误的原因?在fiddle中,我尝试了step和progress及其在那里的工作,但无法在我的代码中工作,我只是在看,有人在jquery动画中遇到过这种错误吗?示例代码为:this.taskHandle.

javascript - 如何在 Angular Material 动画之后执行代码

我正在使用AngularMaterial在一个网站上。作为响应式框架,它处理不同窗口大小的渲染。改变窗口大小时,添加一些布局变化和控件移动的动画示例:https://material.angularjs.org/latest/demo/gridList(打开链接并调整窗口大小)我在示例中显示的图block上有一些WebGLCanvas,需要在动画完成后重新绘制(并且容器具有最终尺寸)。如何获得一些回调或promise以完成UI动画? 最佳答案 此问题的解决方案是将属性md-on-layout添加到md-grid-list(docs)

javascript - Angular 4 使用 Angular 动画为任何高度/位置变化设置动画

我希望这是一个非常直截了当的问题。有没有办法使用Angular动画语法为元素上的任何高度或位置变化设置动画?例如,如果删除一个DOM元素导致另一个元素向上移动,是否可以在不设置状态变量的情况下为向上移动设置动画?或者类似的没有状态的东西。提前致谢。 最佳答案 您可以为所有可能被动态删除/添加的子元素添加一个折叠动画。如果子高度是动画的,那么容器大小也是动画的。trigger('fold',[transition(':enter',[style({height:0,overflow:'hidden'}),animate('.3seas

javascript - 使用内联动画关键帧定义?

我们有这种在css文件中定义关键帧的语法:@-webkit-keyframesfade{from{opacity:1;}to{opacity:0.25;}}我们像这样引用它:.foo{-webkit-animation:fade1slinearinfinite;}有没有办法直接内联它,比如:.foo{-webkit-animation:(from{opacity:1;}to{opacity:0.25;})1slinearinfinite;}有没有办法做到这一点,或者在运行时将“@-webkit-keyframes”元素注入(inject)我的样式表?谢谢 最

javascript - 谷歌地图容器在动画后无法正确调整大小

我有一个谷歌地图容器,假设高度为600像素。我有一个按钮,调整(jQuery)map周围的div容器:$('#add').click(function(){$("#container-map").animate({height:'50%',minHeight:'50%'},1500);google.maps.event.trigger(map,'resize');});现在容器和map的高度是300像素,但googlemapsapi认为它仍然是600像素,所以map的中心仍然是300像素,尽管它应该是150像素(300/2)。http://woisteinebank.de/dev2.h

javascript - 请求动画帧 : what exactly is the timestamp?

我一直认为requestAnimationFrame使用的时间戳和JavaScript中常用的时间戳是一样的,就是从1970年1月1日开始的毫秒数,今天抓取时间戳验证了一下,发现RAF时间戳大概是从1970年1月1日开始算起的页面加载的开始。时间戳的精确测量依据是什么?测试代码:vari=0;varstart=null;vartimes=[];vardur=5000;functionstep(timestamp){if(start===null)start=timestamp;times[i++]=timestamp;if(timestamp-start');}}requestAnim