透明度面对跳跃？ [英] Transparency Face-Jumping?

问题描述

我一直致力于在Three.js库之上运行的WebGL项目。我正在渲染几个半透明网格，我注意到根据您倾斜相机的角度，一个不同的对象在顶部。

I've been working on a WebGL project that runs on top of the Three.js library. I am rendering several semi-transparent meshes, and I notice that depending on the angle you tilt the camera, a different object is on top.

为了说明问题，我使用三个半透明立方体进行了快速演示。当您将图像旋转过去垂直于屏幕时，最小立方体的后半部分会跳跃并且不再可见。但是，它不应该仍然可见吗？我尝试调整一些混合方程，但这似乎没有什么区别。

To illustrate the problem, I made a quick demo using three semi-transparent cubes. When you rotate the image past perpendicular to the screen, the second half of the smallest cube "jumps" and is no longer visible. However, shouldn't it still be visible? I tried adjusting some of the blending equations, but that didn't seem to make a difference.

我想知道这是否是WebGL中的一个错误/三，或者我能解决的问题。任何见解都会非常感激：）

What I'm wondering is whether or not this is a bug in WebGL/Three, or something I can fix. Any insight would be much appreciated :)

推荐答案

嗯，这是他们发明所有这些硬件时无法解决的问题加速图形业务，听起来好像我们将不得不处理这个问题。

Well, that's something they weren't able to solve when they invented all this hardware accelerated graphics business and sounds like we'll have to deal with this for a long while.

这里的问题是图形卡不对多边形进行排序，也不对对象进行排序。图形卡是哑，你告诉它绘制一个对象，它将绘制代表它的像素，并且在另一个不可见的图像中称为zbuffer（或depthbuffer），将绘制代表该对象的像素但不是颜色，它会为每个像素绘制到相机的距离。您之后绘制的任何其他对象，图形卡将检查每个像素到相机的距离是否更远，如果它更远，它将不会绘制它（除非您禁用检查，即）。

The issue here is that graphic cards do not sort the polygons, nor objects. The graphics card is "dumb", you tell it to draw an object and it will draw the pixels that represent it and also, in another non-visible "image" called zbuffer (or depthbuffer), will draw the pixels that represent the object but instead of color it will draw the distance to the camera for each pixels. Any other objects that you draw afterwards, the graphics card will check if the distance to the camera for each pixel, and if it's farther, it won't draw it (unless you disable the check, that is).

这可以加速很多事情，并为您提供实体对象之间的良好交叉。但它在透明度方面表现不佳。假设您有2个透明对象，并且您希望A在B后面绘制。您需要告诉显卡先绘制A然后绘制B.只要它们不相交就可以正常工作。为了绘制相交的2个透明物体，图形必须对所有多边形进行排序，并且由于图形卡不这样做，所以你必须这样做。

This speeds up things a lot and gives you nice intersections between solid objects. But it doesn't play well with transparency. Say that you have 2 transparent objects and you want A to be drawn behind B. You'll need to tell the graphics card to draw A first and then B. This works fine as long as they're not intersecting. In order to draw 2 transparent objects intersecting then the graphics would have to sort all the polygons, and as the graphics card doesn't do that, then you'll have to do it.

这是你需要理解并特别针对你的案例进行调整的其中一件事。

It's one of these things that you need to understand and specifically tweak for your case.

在three.js中，如果设置 material.transparent = true 我们将对该对象进行排序，以便在之前（之前）其他对象之前绘制它。但如果你想与它们相交，我们就无法真正帮助你。

In three.js, if you set material.transparent = true we'll sort that object so it's drawn before (earlier) other objects that are in front. But we can't really help you if you want to intersect them.

这篇关于透明度面对跳跃？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！