+
diff --git a/web/frontend/src/components/navigation/plugins/render.ts b/web/frontend/src/components/navigation/plugins/render.ts
index 75ac352bfed..9ec3a5b5320 100644
--- a/web/frontend/src/components/navigation/plugins/render.ts
+++ b/web/frontend/src/components/navigation/plugins/render.ts
@@ -2,76 +2,28 @@ import * as THREE from 'three';
import { injectPlugin, useFrame, useRender, useThrelte } from '@threlte/core';
import { MercatorCoordinate, type LngLat, LngLatBounds } from 'maplibre-gl';
import { AxesHelper } from 'trzy';
-import { map, cameraMatrix, mapSize, view } from '../stores';
+import { map, cameraMatrix, mapSize } from '../stores';
+import { onDestroy } from 'svelte';
const { clamp } = THREE.MathUtils;
-const renderTarget = new THREE.WebGLRenderTarget(0, 0, { format: THREE.RGBAFormat });
-const renderTexture = renderTarget.texture;
-
-const scene = new THREE.Scene();
const world = new THREE.Group();
+const axes = new AxesHelper({ size: 1000 });
+const rotation = new THREE.Euler();
+const rotationMatrix = new THREE.Matrix4();
+const scale = new THREE.Vector3();
+
// Viam's coordinate system.
world.rotateY(-Math.PI / 2);
world.rotateX(-Math.PI / 2);
world.rotateZ(Math.PI / 2);
-
-scene.add(world);
-const ambient = new THREE.AmbientLight();
-const dir = new THREE.DirectionalLight();
-dir.intensity = 1.5;
-world.add(ambient);
-
-if (localStorage.getItem('debug_axes_helper')) {
- world.add(new AxesHelper({ size: 1000 }));
-}
-
-view.subscribe((value) => {
- if (value === '2D') {
- ambient.intensity = 3.5;
- world.remove(dir);
- } else {
- ambient.intensity = 2.5;
- world.add(dir);
- }
-});
-
-const material = new THREE.ShaderMaterial({
- transparent: true,
- uniforms: { tex: { value: renderTexture } },
- vertexShader: `
-varying vec2 vUv;
-void main(){ vUv = uv; gl_Position = vec4(position,1.);}
- `,
- fragmentShader: `
-uniform sampler2D tex;
-varying vec2 vUv;
-void main(){ gl_FragColor = texture2D(tex, vUv); }`,
-});
-
-const quad = new THREE.Mesh(
- new THREE.PlaneGeometry(2, 2),
- material
-);
-
-const vecPositiveX = new THREE.Vector3(1, 0, 0);
-const vecPositiveY = new THREE.Vector3(0, 1, 0);
-const vecPositiveZ = new THREE.Vector3(0, 0, 1);
-const rotation = new THREE.Euler();
-
-const rotationX = new THREE.Matrix4();
-const rotationY = new THREE.Matrix4();
-const rotationZ = new THREE.Matrix4();
-const scale = new THREE.Vector3();
-
-const scenes: {
- ref: THREE.Object3D
- camera: THREE.PerspectiveCamera
-}[] = [];
+world.add(axes);
let initialized = false;
+let counter = 0;
let cursor = 0;
+const scenes: { ref: THREE.Object3D; matrix: THREE.Matrix4 }[] = [];
const objects: { id: number, start: () => void; stop: () => void; lngLat: LngLat }[] = [];
const setFrameloops = () => {
@@ -98,42 +50,41 @@ const setFrameloops = () => {
};
const initialize = () => {
- map.current?.on('move', setFrameloops);
+ initialized = true;
+
+ map.current!.on('move', setFrameloops);
setFrameloops();
- mapSize.subscribe(({ width, height }) => {
- const dpi = window.devicePixelRatio;
- renderTarget.setSize(width * dpi, height * dpi);
- });
+ const { renderer, scene, camera } = useThrelte();
+
+ renderer!.autoClear = false;
- const { renderer } = useThrelte();
+ scene.add(world);
- useRender((ctx) => {
- renderer!.resetState();
- renderer!.setRenderTarget(renderTarget);
+ useRender(() => {
renderer!.clear();
- scenes.forEach(({ ref, camera }) => {
+ scenes.forEach(({ ref, matrix }) => {
+ camera.current.projectionMatrix = matrix;
world.add(ref);
- renderer!.render(scene, camera);
+ renderer!.render(scene, camera.current);
world.remove(ref);
});
+ });
- renderer!.setRenderTarget(null);
- renderer!.render(quad, ctx.camera.current);
+ const unsub = mapSize.subscribe((value) => {
+ renderer?.setSize(value.width, value.height);
});
- initialized = true;
+ onDestroy(() => unsub());
};
-const deregister = (id: number) => {
- objects.splice(objects.findIndex((object) => object.id === id), 1);
-};
+const deinitialize = () => {
+ initialized = false;
-const register = (lngLat: LngLat, start: () => void, stop: () => void) => {
- cursor += 1;
- objects.push({ id: cursor, lngLat, start, stop });
- return cursor;
+ map.current!.off('move', setFrameloops);
+ scenes.splice(0, scenes.length);
+ objects.splice(0, objects.length);
};
export interface Props {
@@ -153,12 +104,12 @@ export const renderPlugin = () => injectPlugin
('lnglat', ({ ref, props })
initialize();
}
- const camera = new THREE.PerspectiveCamera();
- const sceneObj = { ref, camera };
- scenes.push(sceneObj);
-
+ const matrix = new THREE.Matrix4();
const modelMatrix = new THREE.Matrix4();
+ const sceneObj = { ref, matrix };
+ scenes.push(sceneObj);
+
const updateModelMatrix = (lngLat: LngLat, altitude?: number) => {
const mercator = MercatorCoordinate.fromLngLat(lngLat, altitude);
const scaleScalar = mercator.meterInMercatorCoordinateUnits();
@@ -167,35 +118,52 @@ export const renderPlugin = () => injectPlugin('lnglat', ({ ref, props })
rotation.copy(currentRef.rotation);
rotation.x += Math.PI / 2;
- rotationX.makeRotationAxis(vecPositiveX, rotation.x);
- rotationY.makeRotationAxis(vecPositiveY, rotation.y);
- rotationZ.makeRotationAxis(vecPositiveZ, rotation.z);
+ rotationMatrix.makeRotationFromEuler(rotation);
modelMatrix
.makeTranslation(mercator.x, mercator.y, mercator.z)
.scale(scale)
- .multiply(rotationX)
- .multiply(rotationY)
- .multiply(rotationZ);
+ .multiply(rotationMatrix);
};
updateModelMatrix(currentProps.lnglat);
const { start, stop } = useFrame(() => {
- camera.projectionMatrix.copy(cameraMatrix).multiply(modelMatrix);
+ matrix.copy(cameraMatrix).multiply(modelMatrix);
}, { order: 1 });
- const id = register(currentProps.lnglat, start, stop);
+ const { scene } = useThrelte();
+
+ currentRef.matrixAutoUpdate = false;
+ currentRef.matrixWorldAutoUpdate = false;
+
+ scene.remove(currentRef);
+
+ cursor += 1;
+ counter += 1;
+
+ objects.push({ id: cursor, lngLat: currentProps.lnglat, start, stop });
+
+ const id = cursor;
+
+ onDestroy(() => {
+ stop();
+ objects.splice(objects.findIndex((object) => object.id === id), 1);
+ scenes.splice(scenes.indexOf(sceneObj), 1);
+ counter -= 1;
+ if (counter === 0) {
+ deinitialize();
+ }
+ });
return {
onRefChange (nextRef) {
currentRef = nextRef;
sceneObj.ref = nextRef;
- return () => {
- deregister(id);
- stop();
- };
+ if (currentProps.lnglat) {
+ updateModelMatrix(currentProps.lnglat, currentProps.altitude);
+ }
},
onPropsChange (nextProps) {
currentProps = nextProps;
diff --git a/web/frontend/src/lib/log.ts b/web/frontend/src/lib/log.ts
index c69fa7b1124..c3b43e506bb 100644
--- a/web/frontend/src/lib/log.ts
+++ b/web/frontend/src/lib/log.ts
@@ -1,5 +1,5 @@
export const rcLogConditionally = (req: unknown) => {
- if (window.rcDebug) {
+ if (window.rcDebug || localStorage.getItem('rc_debug')) {
console.log('gRPC call:', req);
}
};