CODEWITHSUNDEEP
webglfloating-point-precision
Raziza O
Raziza O

Reputation: 1646

Zoom in problems

My application is a the world map with some shapes. The user can drag and zoom the map for navigation.

The world bounds coordination are minX=-180 minY=-90 maxX=180 maxY=90. My shapes vertices are as well in this coordinates range.

I use orthographic projection for mapping the world to the screen. When the user drag or zoom i'm simply change the matrix with the new visible map bounds.

The application works well, the user can zoom, and drag the map. the shapes are moving accordingly.

I use lighgl as a 3rd party

The problems occurs when the user zooming in allot, then my shapes vertices are starting to shake and in some point disappear. I'm pretty sure this is a float precision problems. because when we zoom in the visible area bounds is very small - for ex. minx:30.0001 - maxX: 30.0002, so as y.

my shaders are basic shaders as shown below:

Vertex Shader

uniform mat4 gl_ModelViewProjectionMatrix;    
attribute vec4 gl_Vertex;
 
void main() {
   gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
}

Fragment Shader

void main() {
  gl_FragColor = vec4(1.,0.,0.,1.);
}

I'm looking for a math or webGL solution for this problem..

Try 1:

I tried to scale everything by factor, but for some reason it didn't work.

For ex. instead of mapping the minX:30.001 it will map minx:3000.1 - factor 100 (and so on for the rest of the bounds values). In my shader I multiply my gl_Vertex with this factor. But it is looking the same.

Upvotes: 0

Views: 247

Answers (1)

Raziza O
Raziza O

Reputation: 1646

After many tries and examining how float bits works, i've realized that when my values of float are between -1 to 1 the precision is very high. around +/-1.e-45.

So what i'm basically doing is offsetting my mapping to origin - my middle point will be (0,0). and so on the vertices comes in the shader.

For Ex. if our world map is showing an area between 30.999999990 to 30.999999996 (in X and Y) then mapping this values will basically map the round values - 40 to 40 due to float precision.

For solving it we offset to origin as mention before. which mean, 30.999999993 is the middle of the mapping values, i'm reducing the them by it. Mapping now -0.000000003 to 0.000000003 - this values are acceptable in float.

Our integer (if this is the right word for it) is 0, so more bits are now available for the fraction.

In the shader i'm also reducing this middle value (30.999999993) from my vertices..

Hope helped someone with this answer.

I've used this link for helping me understand

Upvotes: 1

Related Questions