better near/far for offline JS camera (#4430)

* better near/far for offline JS camera

* add changelog

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Added threshold before a drag starts which improves false negative rates for clicks. `Button` can now trigger on click and not mouse-down which is the canonical behavior in other GUI systems [#4336](https://github.com/MakieOrg/Makie.jl/pull/4336).
 - `PolarAxis` font size now defaults to global figure `fontsize` in the absence of specific `Axis` theming [#4314](https://github.com/MakieOrg/Makie.jl/pull/4314)
 - `MultiplesTicks` accepts new option `strip_zero=true`, allowing labels of the form `0x` to be `0` [#4372](https://github.com/MakieOrg/Makie.jl/pull/4372)
+- Make near/far of WGLMakie JS 3d camera dynamic, for better depth_shift scaling [#4430](https://github.com/MakieOrg/Makie.jl/pull/4430).
 
 ## [0.21.12] - 2024-09-28
 

WGLMakie/src/Camera.js

@@ -75,13 +75,18 @@ export function attach_3d_camera(
     scene.orbitcontrols = controls;
 
     controls.addEventListener("change", (e) => {
-        const view = camera.matrixWorldInverse;
-        const projection = camera.projectionMatrix;
         const [width, height] = cam3d.resolution.value;
-        const [x, y, z] = camera.position;
+        const position = camera.position;
+        const lookat = controls.target;
+        const [x, y, z] = position;
+        const dist = position.distanceTo(lookat);
         camera.aspect = width / height;
+        camera.near = dist * 0.1;
+        camera.far = dist * 5;
         camera.updateProjectionMatrix();
         camera.updateWorldMatrix();
+        const view = camera.matrixWorldInverse;
+        const projection = camera.projectionMatrix;
         makie_camera.update_matrices(
             view.elements,
             projection.elements,

WGLMakie/src/wglmakie.bundled.js

@@ -21032,13 +21032,18 @@ function attach_3d_camera(canvas, makie_camera, cam3d, light_dir, scene) {
     controls.target0 = center.clone();
     scene.orbitcontrols = controls;
     controls.addEventListener("change", (e)=>{
-        const view = camera.matrixWorldInverse;
-        const projection = camera.projectionMatrix;
         const [width, height] = cam3d.resolution.value;
-        const [x, y, z] = camera.position;
+        const position = camera.position;
+        const lookat = controls.target;
+        const [x, y, z] = position;
+        const dist = position.distanceTo(lookat);
         camera.aspect = width / height;
+        camera.near = dist * 0.1;
+        camera.far = dist * 5;
         camera.updateProjectionMatrix();
         camera.updateWorldMatrix();
+        const view = camera.matrixWorldInverse;
+        const projection = camera.projectionMatrix;
         makie_camera.update_matrices(view.elements, projection.elements, [
             width,
             height