WebGL / Three.js – Particles colored by texture flicker erratically while moving camera

by

The issue is you’re pointing at the edges between texels.

These lines

   geoX.push(tx / imageSize);
   geoY.push(1.0 - ty / imageSize); // flip y

compute the exact edge between texels. What I mean by that is lets say imageSize is 4 texels and lets say tx and ty go from 0 to 3

Your texture coordinates go like this

   0    0.25  0.5   0.75       <- texture coords you're computing
   |     |     |     |     
   V     V     V     V     
   +-----+-----+-----+-----+
   |     |     |     |     |
   |     |     |     |     |   <- texels
   +-----+-----+-----+-----+

But the texture coords you want are like this

     0.125 0.375 0.625 0.875   
      |     |     |     |   
      V     V     V     V  
   +-----+-----+-----+-----+
   |     |     |     |     |
   |     |     |     |     |   <- texels
   +-----+-----+-----+-----+

The easiest fix is to add 1/2 a texel

   geoX.push(tx / imageSize       + 0.5 / imageSize);
   geoY.push(1.0 - ty / imageSize + 0.5 / imageSize); // flip y

The problem is with your math pointing directly between texels rounding errors make it pick one texel or the other. Choosing the center of the texel will fix that. If the image didn’t have so much contrast between neighboring texels you might not have noticed.

More Related Contents:

  1. Drawing a line with three.js dynamically
  2. Thickness of lines using THREE.LineBasicMaterial
  3. Multiple transparent textures on the same mesh face in Three.js
  4. How to stop a requestAnimationFrame recursion/loop?
  5. How to get the absolute position of a vertex in three.js?
  6. Three.js / WebGL – transparent planes hiding other planes behind them
  7. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  8. How to detect collision in three.js?
  9. Three.js/WebGL: Large spheres appear broken at intersection
  10. Antialiasing not working in Three.js
  11. Threejs: assign different colors to each vertex in a geometry
  12. Why do shaders have to be in html file for webgl program?
  13. “Cross origin requests are only supported for HTTP.” error when loading a local file
  14. How can I render an ‘atmosphere’ over a rendering of the Earth in Three.js?
  15. How to Fit Camera to Object
  16. THREE.js Ray Intersect fails by adding div
  17. How to rotate a 3D object on axis three.js?
  18. Converting World coordinates to Screen coordinates in Three.js using Projection
  19. Transparent background with three.js
  20. Emulating palette based graphics in WebGL v.s. Canvas 2D
  21. Rendering a transparent shell
  22. How do you save an image from a Three.js canvas?
  23. How do I clean up and unload a WebGL canvas context from GPU after use?
  24. Three JS Pivot point
  25. three.js transparent object occlusion
  26. How to change face color in Three.js
  27. How do you pack one 32 bit integers into 4, 8bit ints in GLSL / WebGL?
  28. How to render clipped surfaces as solid objects
  29. Three.js add an object to a group but keep global position/rotation/scale as it was
  30. Apply color gradient to material on mesh – three.js

Leave a Comment