体积渲染光线投射伪影

Question

我正在尝试在 WebGL 中实现一个简单的光线投射体积渲染。

它有点工作，但是当你旋转体积时会有一些伪影（即头部看起来变形）。

现场演示： http://fnndsc.github.io/vjs/#shaders_raycasting_adibrain

用于调试的 GLSL 代码： https://github.com/FNNDSC/vjs/blob/master/src/shaders/shaders.raycasting.secondPass.frag

代码的简化版本：

for(int rayStep = 0; rayStep < maxSteps; rayStep++){

  // map world coordinates to data coordinates
  vec4 dataCoordinatesRaw = uWorldToData * currentPosition;
  ivec3 dataCoordinates = ivec3(int(floor(dataCoordinatesRaw.x)), int(floor(dataCoordinatesRaw.y)), int(floor(dataCoordinatesRaw.z)));

  float intensity = getIntensity(dataCoordinates);

  // we have the intensity now
  vec3 colorSample = vec3(intensity);
  float alphaSample = intensity;

  accumulatedColor += (1.0 - accumulatedAlpha) * colorSample * alphaSample;
  accumulatedAlpha += alphaSample;

  //Advance the ray.
  currentPosition += deltaDirection;
  accumulatedLength += deltaDirectionLength;

  if(accumulatedLength >= rayLength || accumulatedAlpha >= 1.0 ) break;
}

我不明白什么可以解释这些人工制品。

难道是因为我没有用渐变来调制opacity/color？

欢迎任何提示。

Answer 1

在第一次光线投射过程中，背面坐标计算不正确。 "normalized" 坐标的范围不是 [0, 1]。它是 [-.5, 1.5]，因此创建了可视化工件，因为 [0, 1] 范围之外的所有值都被限制了。

体积渲染光线投射伪影

volume rendering raycasting artifacts

glsl

webgl

raycasting

volume-rendering