huggingface / gsplat.js

JavaScript Gaussian Splatting library.
MIT License
1.26k stars 78 forks source link

Issue: Unable to Achieve Far Clipping Effect #51

Closed himanshu-daga closed 5 months ago

himanshu-daga commented 5 months ago

Greetings! I am currently working with the gsplat.js library and have encountered an issue related to adjusting the far clipping plane. While I am able to successfully apply near clipping by modifying the _near property, adjusting the _far property does not seem to have the expected effect on the far clipping plane.

Reproduction Steps To replicate the issue, I modified the jsfiddle example provided in the documentation as follows: camera._data._near = 9; camera._data._far = 9.001; Despite setting a small value for _far, the far clipping effect is not observed as expected, as you can see in the screenshot below: image

Expected Behavior I expect that modifying the _far property should allow me to control the far clipping plane, similar to how adjusting the _near property affects the near clipping plane.

Thank you for your attention to this matter!

PS- PFB full code for reference i used in the experimentation

import * as SPLAT from "https://cdn.jsdelivr.net/npm/gsplat@latest";

const canvas = document.getElementById("canvas");
const progressDialog = document.getElementById("progress-dialog");
const progressIndicator = document.getElementById("progress-indicator");

const renderer = new SPLAT.WebGLRenderer(canvas);
const scene = new SPLAT.Scene();
const camera = new SPLAT.Camera();
const controls = new SPLAT.OrbitControls(camera, canvas);

camera._data._near = 9;
camera._data._far = 9.01;
controls.update();

async function main() {
    const url = "https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/bonsai/bonsai-7k.splat";

    await SPLAT.Loader.LoadAsync(url, scene, (progress) => progressIndicator.value = progress * 100);
    progressDialog.close();

    const handleResize = () => {
        renderer.setSize(window.innerWidth, window.innerHeight);
    };

    const frame = () => {
        controls.update();
        renderer.render(scene, camera);

        requestAnimationFrame(frame);
    };

    handleResize();
    window.addEventListener("resize", handleResize);

    requestAnimationFrame(frame);
}

main();
himanshu-daga commented 5 months ago

I wonder if these issues are linked to the same problem since these are all related to z-values, or am I missing something trivial here: Issue:#50 Issue:#48

dylanebert commented 5 months ago

Thanks for pointing that out. The renderer currently doesn't clip far values, but it should be easy to add. I'll put it on the to-do list!

dylanebert commented 5 months ago

I have added far-clipping to the shader code in #53

This fix will be published in the next update :)

himanshu-daga commented 5 months ago

Hi @dylanebert, Thanks for the prompt response. I was about to raise PR for the same & found it's already fixed :) I tested this locally & works fine on my end. Any estimate on when can we expect this update to go live?