Raymarching sphere center offset [math]

Questions
,
1

Here’s a demo

image
image884×830 38.4 KB

void main() {
            vec2 uv = gl_FragCoord.xy / uRes;
            uv -= 0.5;
            uv.x *= uRes.x / uRes.y;

            vec3 ro = vec3(0.0, 0.0, -3.0);
            vec3 rd = normalize(vec3(uv, 1.0));

            vec4 final = rayMarch(ro, rd);

            gl_FragColor = vec4(final.rgb, 0.8);
        }

I created a volume sphere with raymarch sdf positive inside volume.
As far as I know, the ray origin is at (0.0, 0.0, -3.0) and the ray direction is a normalized ray towards the uv plane that ranges between -0.5 to 0.5 both vertically and horizontally at z = 1.0 (there’s a visualization in this video https://www.youtube.com/watch?v=khblXafu7iA)

  • why is the center offset?
    it seems like the center of the sphere is not at (0,0,0). I played around with the ray origin value.

  • Can anyone explain why and how to fix it properly?
    uv -= 0.55 kinda works but I think it’s a scuffed way. I also found out that when ray origin is very close to (0, 0, 0) they are actually aligned center but it’s invisible because we are inside the volume I guess.

2

Either remove this line (line 16):

renderer.setPixelRatio( window.devicePixelRatio );

or replace the pixel ratio with 1:

renderer.setPixelRatio( 1 );

or use the pixel ratio in your calculations of resolution:

uniforms: {
        uRes: { value: new THREE.Vector2(window.innerWidth*window.devicePixelRatio, window.innerHeight*window.devicePixelRatio) },
    },
2 Likes
3

thank you. I didn’t know I had to set dpr for shaders manually. I thought I was already using it.

1 Like