Cannot read properties of undefined (reading 'x') about ultraglobe

[babisous]

I forgot to share my code with you, but it's just the one presented in the guide:

import { Map } from '@jdultra/ultra-globe/dist/ultraglobe.min.js';

let map = new Map({ divID: 'screen' });

[ebeaufay]

Hi I see you closed it. I could reproduce and I'm busy pushing things to stabilize, it should be more stable in a bit

[babisous]

Oh yes, I understand, I have this problem when I use the npm

But thank you for your work and the maintenance of ultraglobe

[ebeaufay]

No problem, I had some bugs in new version where atmosphere had to be "true". I'm updating the getting started to have volumetric clouds as well

[babisous]

In the same way if "shadows" is false on the Map then:

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Material Name:
Material Type: ShaderMaterial

Program Info Log: Fragment shader is not compiled.
�

FRAGMENT

ERROR: 0:588: '<' : wrong operand types - no operation '<' exists that takes a left-hand operand of type 'highp float' and a right operand of type 'const int' (or there is no acceptable conversion)
ERROR: 0:592: '>=' : wrong operand types - no operation '>=' exists that takes a left-hand operand of type 'highp float' and a right operand of type 'const int' (or there is no acceptable conversion)
�

583: diffuse = mix(diffuse,atmosphereColor,atmosphereThickness);
584:
585:
586:
587: vec4 cl = texture2D(tClouds, vUv);

588: if(cameraHeightAboveEllipsoid<0){
589: diffuse = mix(diffuse, cl.xyz, cl.w);
590: }
591:
592: if(cameraHeightAboveEllipsoid>=0){
593: diffuse = mix(diffuse, cl.xyz, cl.w);
594: }

[ebeaufay]

it should be fixed with v 4.3.4

I uploaded a new gettingStarted project: https://drive.google.com/file/d/1ECn7C98WRZRlaNhz_CG5sVFWkwG4mvTb/view?usp=drive_link

I'm still fixing the typescript version

[babisous]

Oh thank you ! Sorry for the inconvenience, I hadn't paid attention to my version.
Sincerely thank you for your time 🙏

[ebeaufay]

Hey no worries, I'm glad to have someone testing my stuff but no pressure or anything, I was fixing it anyhow

[babisous]

That's nice anyway! By the way, I have a quick question (I'm not sure if issues are really the place to ask this), do you have a layer in place to load meshes at the same time as the maptile they are on? For example, with GoogleMap3DTileLayer I load a tile, and if this tile is loaded then the meshes (THREE.Box or GLTFs) are loaded, otherwise they are unloaded.

[ebeaufay]

No I don't, I can add mesh layers, but the logic you describe would be custom. The layers themselves have a visible property that's used to show or hide layers, synchronizing would be custom.

I'll see about adding a simple MeshLayer to add any threejs mesh with a lon/lat/height and rotation to geolocate it

[babisous]

Okay, I see. I was trying to have an eventListener on the loaded tile, so at least if it's loaded, we add the 3D model to the scene; otherwise, we unload the 3D model.

[ebeaufay]

Ok I'll keep that kind of functionality in mind

[babisous]

Hi!

I created a function to display or not a GLTF model based on the camera's position. If the camera is at a certain level of distance, then we display the model perfectly; if we move away, we display it with less detail, and from a certain distance, we unload it.

I think I am getting a bit lost in the documentation :') but do you know how I could retrieve the height at a specific point? I have an event listener on the click with a raycaster to get the longitude and latitude, but I don't know how to get the GPS height on my map with GoogleMap3DTileLayer as the height reference.

[ebeaufay]

Yes I exposed an object "transform" that under the hood uses proj4 for transformations.

So, if you ray-cast on google tiles, you'll have the cartesian coordinate (EPSG:4978)
You want to transform it to lon lat height (EPSG:4326)

So, you can do this:

import * as TRANSFORM from '@jdultra/ultra-globe';

let cartesianToLLH = TRANSFORM.transform("EPSG:4978", "EPSG:4326");
let lonLatHeight = cartesianToLLH .forward({x:cartesian.x, y:cartesian.yy, z:cartesian.z});

Even easier, there's the opposite transform as a property of map.planet so you can do:

map.planet.llhToCartesian.inverse({x:cartesian.x, y:cartesian.yy, z:cartesian.z});

But I'm not certain the property name is preserved in minification so it might not work.

If you have a THREE.Vector3, you can pass it directly but the returned object is not a Vector3, it's a plain old js object.

Tell me if that works for you

[babisous]

So I did my little test and here is my code:

document.addEventListener("click", function (event) {
let mouse = new THREE.Vector2(
(event.clientX / window.innerWidth) * 2 - 1,
-(event.clientY / window.innerHeight) * 2 + 1
);

let raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, map.camera);

let intersects = raycaster.intersectObject(map.scene, true);

if (intersects.length > 0) {
	let intersection = intersects[0];
	let cartesian = intersection.point; // Point d'intersection en coordonnées cartésiennes

	// Convertir les coordonnées cartésiennes en coordonnées GPS (lon, lat, height)
	let cartesianToLLH = TRANSFORM.transform("EPSG:4978", "EPSG:4326");
	let lonLatHeight = cartesianToLLH.forward({
		x: cartesian.x,
		y: cartesian.y,
		z: cartesian.z,
	});

	console.log("Coordonnées GPS du curseur:", lonLatHeight);
} else {
	console.log("Aucune intersection détectée.");
}

});

The result is problematic because, at a given longitude and latitude, my altitude should be 5 meters, but here my z = 49.

Thanks again for your help, man.

[ebeaufay]

How do you know your altitude should be 5, what's your reference?

Are you only displaying google tiles or also other meshes (are you certain intersects[0] is the correct mesh?)

I'm pretty sure the coordinate conversion is correct because it uses proj4 which is the best possible code for this.
However, it only considers the earth as an ellipsoid (WGS84) while google earth also takes into account the earth geoid (EGM96) so there might be differences though 40+ meters seems like a lot but it really depends on the area you're at. the earth "geoid" adds an extra height difference of up to 200 meters or so.

There is a reference (EPSG:5773) that gives the EGM96 height so you'd have to set-up a transformation from 4326 to 5773, get the height (I guess on the result z-axis) and add that to the height you got before.
I've never tested that and I don't even know if proj4 supports this reference but it may explain the issue.
What area are you in, france? This is an older geoid but france seems to have positive geoid values so it may explain the height difference

By the way, there's a layer for OGC3DTiles, it's the same format as the one used by google tiles (tiled and multileveled) so you'd get optimal LODs management. If you want to try a model in that format at some point, I can help generate it.

[babisous]

My reference is https://www.freemaptools.com/elevation-finder.htm with the same coordinates.

Okay, I just checked, I've never used THREE before :(. So no, I'm not sure about my intersects[0].

From what you're telling me, wouldn't it be better to have an ElevationLayer with a heightMap image and apply the RayCaster on that layer?

By the way, how do you select a particular layer on the map?

For example, my raycaster should only apply to the elevation layer and not the Google Tiles layer.

If you have time, I would appreciate your help to solve this problem and obtain accurate GPS coordinates.

And yes, if you have the time, I would also appreciate help with managing models by tile, but I think I need to think in terms of models rather than tiles. But I'm all ears because I am really a beginner.

But to quickly explain the project:

Have Google tiles
The user can place GLTF models wherever they want and obtain their coordinates
Manage the loading of models on the map because if we have a million models, we are not going to load them all at the same time.

[babisous]

Oh, and I forgot to mention, yes, I only have the Google Tile Layer loaded, no other meshes or anything else.

[ebeaufay]

The raycaster will return every object traversed along the ray, I think ordered by proximity to the camera but not sure.

So I have an "ElevationLayer" but it's not that accurate. It loads a single image in memory in grayscale format so the resolution is very limited.

I do something like this:

import earthElevationImage from "./images/earth_elevation.jpg"

var earthElevation = new SingleImageElevationLayer({
    id: 9,
    name: "singleImageEarthElevation",
    bounds: [-180, -90, 180, 90],
    url: earthElevationImage,
    visible: true,
    min: 0,
    max: 8848
});

//map.setLayer(earthElevation, 0); //unnecessary unless you want to visualize the terrain

let height = earthElevation.getElevation([lon, lat, lon, lat], 1,1)[0]; // returns an array of elevations but here we just want elevation for a singlePoint

This is NOT going to give you precise elevation. Instead, I would probably query bingmaps elevation service. you'll need an API key but the service is free unless you make a ton of requests. look online or ask chatGPT how to query the service, it's quite straight forward.

Adding the EGM96 height from the height you get through google tiles might still be a valid approach and doesn't require you setting up access to an extra service. However, google tiles themselves may not be super accurate and you'll get the buildings etc rather than the height at ground level.

For 3DTiles, once a mesh is converted to that format, you can handle it like any THREE.Object3D but if you want users to upload meshes themselves it's not ideal because conversion is not that simple. If you have large models you want to display and those models are static, it's a good solution.