Volume ray casting doesn't work fine (Webgl + GLSL + Three.js)

Question

I have tried to make better quality of my volume ray casting algorithm. I have set a smaller step of raycast (quality is better), but it causes problem. It is on pictures below (black areas where they shouldnt be).

I am using RGB cube to get direction of ray in volume. I think, i have the same algorithm like there: volume rendering (using glsl) with ray casting algorithm

Have anybody some ideas, where could be a problem? I need to resolve this, because deadline of my diplom thesis is to close:( I realy don't know, why it doesnt work:(

EDIT: I cant show there my all code (it could be problem, if i will supply it before hand it in school). But the key code to going throught the volume:

  // All variables neede to rays
  vec3 rayDirection = texture2D(backFaceCube, texCoo).xyz - varcolor.xyz;
  float lenRay = length(rayDirection);
  vec3 normDir = normalize(rayDirection);
  float d = qualitySteps; //quality steps is size of steps defined by user -> example: 0.01, 0.001, 0.0001 etc.
  vec3 step = normDir * d;
  float lenStep = length(step);
  float accumulatedLength = 0.0;

and then in cycle:

      posInCube.xyz += step;
      accumulatedLength += lenStep;

      ...
      ...
      ...

      if(accumulatedLength >= lenRay || accumulatedColor.a > 1.0 ) {
         break;
      }

EDIT2:(sorry but like comment it was too long)

Yes, the texture is noisy...i have tried to delete the condition with alpha: if(accumulatedColor.a > 1.0), but the result is same. I think that there is some direct correlation with length of ray and size of step. I tried many combination and i have found these things. If step is big, i am able to go throught all volume, but if it is small, than i am realy not able to go throught volume (maybe). If step is extremely big, than i can see mirroved object (it can be caused by repeating texture if i go out of the texture on GPU). If step is too small, than i am able to mapped only small part of texture -> it seems, that ray is too short, but in reality he isnt. Questins are, why mapping of 3D coordinates to 2D texture is wrong and depend on size of step..

Answer 1

Can you please supply the code for your fragment shader?

Are you traversing the whole vector from front to end position? Here's an example shader (the code might contain some errors since I just wrote it from the top of my head. I unfortunately can't test the code on my computer at the moment):

in vec2 texCoord;
out vec4 outColor;
uniform float stepSize;
uniform int numSteps;
uniform sampler2d frontTexture;
uniform sampler2d backTexture;
uniform sampler3d volumeTexture;
uniform sampler1d transferTexture; // Density to RGB

void main()
{
    vec4 color = vec4(0.0);
    vec3 startPosition = texture(frontTexture, texCoord);
    vec3 endPosition = texture(backTexture, texCoord);
    vec3 delta = normalize(startPosition - endPosition) * stepSize;
    vec3 position = startPosition;

    for (int i = 0; i < numSteps; ++i)
    {
        float density = texture(volumeTexture, position).r;
        vec3 voxelColor = texture(transferTexture, density);

        // Sampling distance correction
        color.a = 1.0 - pow((1.0 - color.a), stepSize * 500.0);

        // Front to back blending (no shading done)
        color.rgb = color.rgb + (1.0 - color.a) * voxelColor.a * voxelColor.rgb;
        color.a = color.a + (1.0 - color.a) * voxelColor.a;

        if (color.a >= 1.0)
        {
            break;
        }

        // Advance
        position += direction;

        if (position.x > 1.0 || position.y > 1.0 || position.z > 1.0)
        {
            break;
        }
    }

    outColor = color;
}