如何加速这个基于网格的 3D 渲染系统?
我最近一直在开发一个等距渲染系统,用于在 Javascript 中绘制 3D 网格。网格上的所有项目都是相同尺寸的立方体,每个项目之间的唯一区别是表示该坐标值的纹理。我的应用程序需要绘制大型网格,即使在视口中一次只能看到一小部分。
因为我使用的是 Canvas,每帧绘制数千个形状的速度很慢,所以我将脚本设置为循环遍历每个块,但仅在以下情况下绘制其面:1.) 在空网格空间旁边以及 2.) 在视口内。该系统适用于较小的网格,但由于我的应用程序需要相当大的网格(1000+x1000+x128),因此我需要为最终产品添加一些性能改进。
有使用过渲染系统的人知道我可以进一步优化引擎的方法吗?我认为可能有效的一件事是尝试不循环遍历每个网格值,即使它没有被绘制。但是,我不知道是否要循环遍历网格值的最有效方法(我目前正在遍历每个值,然后计算是否应该绘制它)。
如果我说得太含糊,请告诉我,我很乐意详细说明。感谢您的时间和专业知识;我是一名学生,任何帮助都会极大地帮助我的学习。
I have recently been developing an isometric, rendering system to map out 3D grids in Javascript. All of the items on the grid are cubes of equal dimensions, the only differences between each one is a texture to represent a value for that coordinate. My application requires large grids to be graphed, even though only a small portion is visible in the viewport at once.
Because I am using Canvas, which is slow to draw thousands of shapes per frame, I set my script to loop through each block but only draw its faces if they are 1.) next to an empty grid space and 2.) inside the viewport. This system works fine for smaller grids, but as my application will need considerably large ones (1000+x1000+x128), I will need to add some performance improvements for the final product.
Does anyone that has worked with rendering systems know any way I can further optimize my engine? One thing that I guess may be effective will be trying to not loop through each grid value, even if it is not being drawn. However, I do not know the most efficient way to know whether to loop through a grid value or not (I am currently going through EVERY value, then calculating whether it should be drawn).
If I have been too vague, please tell me and I will be happy to elaborate. Thank you for your time and expertise; I am a student and any help will greatly aid my learning.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
给您的一些提示:您可能想看看使用八叉树(或您的情况下的四叉树)等经典剔除算法,...
Some pointers to you: you might want to have a look at classic culling algorithms using things like octree (or quadtrees in your case), ...