• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

183
Views
Displaying many high-resolution images on an HTML canvas (map tiling)

I'm using three.js to display a globe. At first, the image is low-quality, and as a user zooms in, the images become higher quality. This is done using tiling. Each tile is 256px x 256px. For the lowest zoom, there are only a couple tiles, and for the largest, there are thousands.

The issue is that the images are still low quality, even at the highest zoom. I think this is because of the canvas I'm using. It's 2000px x 1000px. Even if I increase this canvas, the image at its highest quality is 92160px x 46080px, which is too large of a canvas to render in most browsers.

What approach can I use to display tiles at high quality, but not have a huge canvas? Is using a canvas the right approach? Thanks!

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

I figured out a way of doing it, though I'm not sure it's a great approach. For every tile that needs to be displayed, I create a sphere. I make the sphere match the size of the tile on the map using phiStart, phiLength, thetaStart, thetaLength. Then I create a 256px x 256px canvas, put the tile image on the canvas, and put the canvas on the tile. Essentially I'm placing parts of spheres on top of a low-resolution sphere, which is the sphere that loads when the page is loaded.

I calculated the four variables by taking a whole sphere (which is 2*Pi for each variable), then multiplying by the percentage of the sphere I want to fill. Here is the four variables:

// `sphereCanvasWidth` is the width of the low-resolution sphere's canvas
// `canvasX` is the top left pixel of where you want to draw on the canvas
phiStart = (2 * Pi) * (canvasX / sphereCanvasWidth)
// `numPixelsTileX` is the number of pixels the canvas should cover
phiLength = (2 * Pi) * (numPixelsTileX / sphereCanvasWidth)
// `canvasY` is the bottom left pixel of where you want to draw on the canvas
thetaStart = (2 * Pi) * (canvasY / sphereCanvasWidth)
// `numPixelsTileY` is the number of pixels the canvas should cover
phiLength = (2 * Pi) * (numPixelsTileY / sphereCanvasWidth)

For example, if I want to fill the top left 1/4 of the sphere, it'd be:

phiStart = 0
phiLength = (2 * Pi) * .25
thetaStart = 0
thetaLength = (2 * Pi) * .25

The three.js documentation has a sphere you can test the variables on. Here's what the example above generates:

enter image description here

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error