小编Aus*_*ten的帖子

javascript中的高效粒子系统?(WebGL的)

我正在尝试编写一个程序,对粒子进行一些基本的重力物理模拟.我最初使用标准Javascript图形(带有2d上下文)编写程序,我可以通过这种方式获得大约25 fps w/10000粒子.我在WebGL中重写了这个工具,因为我假设我可以通过这种方式获得更好的结果.我也使用glMatrix库进行矢量数学运算.然而,通过这种实现,我只获得了大约15fps的10000粒子.

我目前是EECS本科生,我有一定的编程经验,但从来没有使用图形,我对如何优化Javascript代码几乎没有任何线索.关于WebGL和Javascript如何工作,我有很多不明白的地方.使用这些技术时,哪些关键组件会影响性能?是否有更有效的数据结构来管理我的粒子(我只是使用一个简单的数组)?对于使用WebGL的性能下降有什么解释?GPU和Javascript之间的延迟可能?

任何建议,解释或帮助一般将不胜感激.

我将尝试仅包含我的代码的关键区域以供参考.

这是我的设置代码:

gl = null;
try {
    // Try to grab the standard context. If it fails, fallback to experimental.
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    gl.viewportWidth = canvas.width;
    gl.viewportHeight = canvas.height;
}
catch(e) {}

if(gl){
        gl.clearColor(0.0,0.0,0.0,1.0);
        gl.clearDepth(1.0);                 // Clear everything
        gl.enable(gl.DEPTH_TEST);           // Enable depth testing
        gl.depthFunc(gl.LEQUAL);            // Near things obscure far things

        // Initialize the shaders; this is where all the lighting for the
        // vertices and so forth is established.

        initShaders();

        // Here's where …
Run Code Online (Sandbox Code Playgroud)

javascript performance particles webgl particle-system

8
推荐指数
2
解决办法
7200
查看次数

HTML5 Canvas:鼠标和多边形碰撞检测

所以我正在用HTML5和Javascript制作塔防游戏.我唯一的问题是检测鼠标何时与攻击者的路径接触,这是阻止玩家在路径上建造塔的必要条件.攻击者的路径在MAP.js文件中确定(参见底部的链接),由二维数组(包含x和y对的数组)确定,因此我必须使用的是一系列点,连接时组成路径.我只是想禁止玩家将塔放在路径的50个像素内.说实话,我对碰撞检测很可怕,所以一些帮助将非常感激.

以下是所有代码的链接:http: //shapeshifting.comuv.com/Tower_Defense/td/

如您所想,只有.js文件适用,但大多数相关代码都在objects.js文件中.(请原谅杂乱)

javascript html5 canvas collision-detection

7
推荐指数
1
解决办法
4475
查看次数