小编Abr*_*ers的帖子

WebGL中批量调用的最快方法

我正在尝试为我的2D游戏引擎重写基于画布的渲染.我已经取得了很好的进展,可以很好地渲染纹理到webgl上下文,完成缩放,旋转和混合.但我的表现很糟糕.在我的测试笔记本电脑上,我可以获得30 fps的vanilla 2d画布,同时屏幕上有1,000个实体; 在WebGL中,我在屏幕上获得了30个fps,500个实体.我希望情况会逆转!

我有一种潜在的怀疑,罪魁祸首就是Float32Array我正在折腾的所有缓冲垃圾.这是我的渲染代码:

// boilerplate code and obj coordinates

// grab gl context
var canvas = sys.canvas;
var gl = sys.webgl;
var program = sys.glProgram;

// width and height
var scale = sys.scale;
var tileWidthScaled = Math.floor(tileWidth * scale);
var tileHeightScaled = Math.floor(tileHeight * scale);
var normalizedWidth = tileWidthScaled / this.width;
var normalizedHeight = tileHeightScaled / this.height;

var worldX = targetX * scale;
var worldY = targetY * scale;

this.bindGLBuffer(gl, this.vertexBuffer, sys.glWorldLocation);
this.bufferGLRectangle(gl, worldX, worldY, tileWidthScaled, …
Run Code Online (Sandbox Code Playgroud)

javascript performance webgl html5-canvas 2d-games

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

标签 统计

2d-games ×1

html5-canvas ×1

javascript ×1

performance ×1

webgl ×1