About Moire pattern in customshader

CesiumJS
1

Hi! Here is a visual problem:
I wrote a customShader and I applied it to my custom primitive to perform raymaching process.

void main()
{
vec3 rayDir = normalize( vDirection );
vec2 bounds = hitBox( vOrigin, rayDir );

if ( bounds.x > bounds.y ) discard;

bounds.x = max( bounds.x, 0.0 );

vec3 p = vOrigin + bounds.x * rayDir;
p = vec3(p.x / dim.x, p.y / dim.y, p.z / dim.z);

vec3 inc = 1.0 * dim / abs(rayDir );
float delta = min(min( inc.x, min(inc.y, inc.z)), 50000.0); //keep delta small enough
delta /= 400.0;

// Nice little seed from
// https://blog.demofox.org/2020/05/25/casual-shadertoy-path-tracing-1-basic-camera-diffuse-emissive/
uint seed = uint( gl_FragCoord.x ) * uint( 1973 ) + uint( gl_FragCoord.y ) * uint( 9277 );
vec3 size = vec3( textureSize( map, 0 ) );
float randNum = randomFloat( seed ) * 2.0 - 1.0;

p += rayDir * ( 0.1 / size );


//

vec3 result = rayDir * delta;

vec4 ac = vec4(0.0);
vec3 color;
float opacity;
float d;
float col;

for ( float t = bounds.x; t < bounds.y; t += delta ) {

    d = round(getValue( p + 0.5 ) * 70.0);
    col = shading( p + 0.5, delta ) * 0.3 + 1.0;

    opacity = (d - threshold) / (70.0 - threshold);
    opacity = opacity * opacity * opacity * 1.2;

    if(d > 10. && d > threshold){
        if( d < 15.){
            color = vec3(1, 160, 246);
        }
        else if(d < 20.){
            color = vec3(0, 236, 236);
        }
        else if(d < 25.){
            color = vec3(0, 216, 0);
        }
        else if(d < 30.){
            color = vec3(1, 144, 0);
        }
        else if(d < 35.){
            color = vec3(255, 255, 0);
        }
        else if(d < 40.){
            color = vec3(231, 192, 0);
        }
        else if(d < 45.){
            color = vec3(255, 144, 0);
        }
        else if(d < 50.){
            color = vec3(255, 0, 0);
        }
        else if(d < 55.){
            color = vec3(214, 0, 0);
        }
        else if(d < 60.){
            color = vec3(192, 0, 0);
        }
        else if(d < 65.){
            color = vec3(255, 0, 240);
        }
        else if(d < 70.){
            color = vec3(150, 0, 180);
        }
        else if(d >= 70.){
            color = vec3(173, 144, 240);
        }
        color /= 255.;

        if (!isActive) ac += (1.0 - ac.a) * vec4(color * opacity * col, opacity);
    }
    
    if(isActive) {
        if((p.x > lon - 0.0005 && p.x < lon + 0.0005) || (p.y > lat - 0.0005 && p.y < lat + 0.0005) || (p.z > alt - 0.01 && p.z < alt + 0.01)) {
            if(d > 10.0) {
                ac = vec4(color, 1.0);
            }
            else{
                ac = vec4(0.8, 0.8, 0.8, 0.0);
            }
        }
    }
    if ( ac.a >= 0.95 ) break;

    p += vec3(result.x / dim.x, result.y / dim.y, result.z / dim.z) ;//
}

fragColor = ac;//"out_FragColor" only in TRANSLUCENT pass, else def: in vec4 fragColor

if ( ac.a == 0.0 ) discard;

}
However, it shows strange ripple effect which is noticeable when camera ray is perpendicular to Z axis:

image
image1972×949 229 KB

I tryied jittering and increaing sampling steps, but it didn’t resolve the problem.

2

Hi @Link_ZY, does the ripple pattern change as you adjust the step size? I would expect the artifacts to get smaller as your step size becomes smaller–is that what you see?

We saw many of these patterns in early versions of our voxel renderer. Choosing the “right” step size is hard, because even with very small step size, the ray could skip over an edge or corner of a voxel. You can find a more in-depth discussion of the problem, as well as our solution, at Optimum step size and lighting for cylinder- and ellipsoid-shaped voxels by jjhembd · Pull Request #11875 · CesiumGS/cesium · GitHub.