Exploring the globe using Three.js and WebGL: Visualizing countries and their colors on a sphere

Question

Exploring the globe using Three.js and WebGL: Visualizing countries and their colors on a sphere

I was able to create a globe similar to this example. However, I am facing an issue when trying to retrieve the countries visible in the scene in Three.js when the globe is stationary. I can successfully retrieve the color code of a specific country when hovering or clicking on it using the readPixels method as shown below

var gl = renderer.context;
var mx = ( mouseX + renderer.context.canvas.width/2 );
var my = ( -mouseY + renderer.context.canvas.height/2 );
mx = Math.floor( mx );
my = Math.floor( my );
var buf = new Uint8Array( 4 );
gl.readPixels( mx, my, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, buf );

However, when the globe is not rotating and I need to retrieve a list of visible countries from the scene, using Raycaster to scan through all the pixels and obtain the country code proves to be a performance issue for us

I would greatly appreciate any insights or suggestions on this matter

javascript three.js

Answer 1

Answer №1

To create a unique visual effect, you can render the scene onto a texture using various shaders and uniforms. The official website provides examples for reference, such as this one:

For example, you could design a scene where the texture of a globe is color-coded by countries. When the user interacts with the globe, you can render that specific scene onto a texture and extract information from a single pixel.

It is important to note that when rendering to textures, you may need to manually update your textures by setting needsUpdate to true.

I hope this explanation is helpful to you in achieving your desired outcome.

Answer 2

To create a unique visual effect, you can render the scene onto a texture using various shaders and uniforms. The official website provides examples for reference, such as this one:

For example, you could design a scene where the texture of a globe is color-coded by countries. When the user interacts with the globe, you can render that specific scene onto a texture and extract information from a single pixel.

It is important to note that when rendering to textures, you may need to manually update your textures by setting needsUpdate to true.

I hope this explanation is helpful to you in achieving your desired outcome.

Exploring the globe using Three.js and WebGL: Visualizing countries and their colors on a sphere

Answer №1

Similar questions

Is there a way to create a curve that stays below the text and does not intersect with it?

Retrieving JSON data in Angular 2

Middleware functions in Mongoose for pre and post actions are not being triggered when attempting to save

Is the oscillator value remaining stagnant in Safari?

While attempting to use JavaScript and AJAX to read a JSON object, I encountered an issue caused by the CORS

Organize my JavaScript code by implementing a function

Outputting HTML using JavaScript following an AJAX request

Discovering the potential of utilizing an array transmitted by Node/Express on the server-side and integrating it into Google Maps on the client-side

Displaying default tab content while hiding other tab content in Javascript can be achieved through a simple code implementation

I plan to compile a collection of names in a text field and then have the ability to select and access each name individually with just a click

Passing parameters to JavaScript onload event from PHP

Issue with Cross Site Scripting Iframe Permission Denied

Specify the dependencies in the package.json file to ensure that the React package designed for React v17 is compatible with React v18 as well

Delete the event handler if the original selector used to set up the handler is unknown

Change multiple materials to json format by converting .obj and .mtl files

Can Vuex mapActions be utilized within a module that is exported?

Can you explain the significance of `Component<Props>` in React Native?

What is the best way to retrieve the canonicalized minimum and maximum values within the beforeShow method of jQuery UI's datepicker?

Configuring the default value for a selection menu in Vue3

The variable being attempted to read is undefined, resulting in an error