在 Processing.js 上绘制图像时如何使用 Z-Buffer？

Question

如何在Processing.js上使用Z-Buffer，以便在绘制时设置图像的深度？

---

问题：对象的绘制顺序不正确。我尝试过的：我在每个并列帧中对所有对象进行排序以获得正确的结果，但是 JavaScript 的排序在几乎排序的数组上表现不佳，因此它既是浪费也是瓶颈。使用 z 缓冲区可能是一个解决方案。在文档上找不到它，也找不到“z-index”、“depth”、“z-buffer”和“depth-buffer”。

Answer 1

这些讨论可能对您有所帮助：HTML5 Canvas set z-index、How can I control z-index of canvas objects?。

您应该先绘制后面的对象，最后绘制前面的对象。 Processing.js 使用 HTML5 Canvas，没有 z-index 的概念。