Comments (19)
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' });
from ultraglobe.
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
from ultraglobe.
Oh yes, I understand, I have this problem when I use the npm
But thank you for your work and the maintenance of ultraglobe
from ultraglobe.
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
from ultraglobe.
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: }
from ultraglobe.
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
from ultraglobe.
Oh thank you ! Sorry for the inconvenience, I hadn't paid attention to my version.
Sincerely thank you for your time 🙏
from ultraglobe.
Hey no worries, I'm glad to have someone testing my stuff but no pressure or anything, I was fixing it anyhow
from ultraglobe.
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.
from ultraglobe.
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
from ultraglobe.
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.
from ultraglobe.
Ok I'll keep that kind of functionality in mind
from ultraglobe.
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.
from ultraglobe.
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
from ultraglobe.
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.
from ultraglobe.
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.
from ultraglobe.
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.
from ultraglobe.
Oh, and I forgot to mention, yes, I only have the Google Tile Layer loaded, no other meshes or anything else.
from ultraglobe.
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.
from ultraglobe.
Related Issues (13)
- Support for i3s web services HOT 4
- I3SLayer support "Point" layerType now, can it support other layer type? HOT 2
- Can't rotate map HOT 2
- Scrolling and panning is too fast in custom app HOT 5
- Limit navigation and Loading to a specific area HOT 5
- PanController constrain axis HOT 2
- TypeError: cli.isMultipleCompiler is not a function HOT 3
- Issue with planetTile when starting blank project HOT 1
- PerlinTerrainColorShader.js img src change HOT 2
- WMS layers are broken in version 4.2.5 and 4.2.4 HOT 3
- Uncaught ReferenceError: eventName is not defined HOT 3
- How to tell if tile loading has finished? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ultraglobe.