三.js CanvasRender 问题:人脸闪烁进出 [英] Three.js CanvasRender problems: faces flicker in and out

问题描述

我正在绘制两个相对简单的形状，它们的几何形状不重叠.

I am drawing two relative simple shapes and the geometry of them do not overlap.

这是代码示例:http://jsfiddle.net/pGD4n/9/

Three.js 轨迹球就在其中，因此您可以单击并拖动以在 3d 空间中旋转对象.问题是当物体旋转时，一些面会消失，露出下面的物体.稍微旋转一下，丢失的脸又回来了，但其他人已经不见了.

The Three.js Trackball is in there so you can click and drag to spin the objects around in 3d space. The problem is that as the objects rotate some faces disappear revealing the object below. A slight more rotation and the missing face returns, but others have gone missing.

我已经尝试了 BasicMaterial、Normal Material 和 LambertMaterial 以及 SmoothShading 和 Flat Shading.我试过有灯光和没有灯光的场景.将对象移得更远似乎可以解决这个问题，但在给定的示例代码中，网格不重叠，不应该有这个问题.Chrome 和 Firefox 都会出现问题.

I've tried BasicMaterial, Normal Material and LambertMaterial with both SmoothShading and Flat Shading. I have tried the scene with and without lighting. Moving the objects farther apart seems to correct the issue, but in the given example code the meshes do not overlap and should not have this problem. Problem happens in both Chrome and Firefox.

我想切换到 OpenGL 渲染器会解决这个问题，但为了兼容性，我们需要使用 Canvas 渲染器.

I imagine that switching to the OpenGL renderer would resolve the issue, but for compatibility we need use the Canvas renderer.

感谢任何帮助或想法.

推荐答案

这是 CanvasRenderer 的一个限制.不幸的是，CanvasRenderer 中不提供按像素 z 排序，因此它基本上尝试对整个多边形进行排序.取决于您从哪个多边形的中心看，一个多边形的中心可能比侧面的多边形更近，因此它跳跃".

This is a limitation of CanvasRenderer. Unfortunately per pixel z sorting is not available in CanvasRenderer so it basically tries to sort the whole polygon instead. Depending of where you're looking from the center of one polygon may be closer than the polygon on the side and so it "jumps".

目前唯一的解决方案是使用 WebGLRenderer.我正在为 context2d 开发一个新的渲染器，希望它可以在不需要 webgl 的情况下解决这个问题，但仍然需要一些时间.

The only solution right now is using WebGLRenderer. I'm working on a new renderer for context2d which hopefully will solve this without requiring webgl but it will still take some time.

这篇关于三.js CanvasRender 问题:人脸闪烁进出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！