glslwebglraycastingvolume-rendering

volume rendering raycasting artifacts

I am trying to implement a simple raycasting volume rendering in WebGL.

It is kind of working, but there are some artifacts when you rotate the volume around (i.e. the head appears deformed).

enter image description here

Live demo: http://fnndsc.github.io/vjs/#shaders_raycasting_adibrain

GLSL Code used for debugging: https://github.com/FNNDSC/vjs/blob/master/src/shaders/shaders.raycasting.secondPass.frag

Simplified version of the code:

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;
}

I do not understand what could explain those artifacts.

Could it be because I do not use gradients to modulate opacity/color?

Any hint would be very welcome.

Solution

  • The backface coordinates were not computed properly during the first pass of the raycasting. The range of the "normalized" coodinates was not [0, 1]. It was [-.5, 1.5], therefore creating the visualization artifact as all values outside of [0, 1] range were clamped out.