javascript - Varying pixel color value for same -
i trying create interactive map in webgl . each counrty in map image filled unique color. when user clicks on image, read pixeldata iof point clicked using readpixels() , depending on color of pixel intend highlight counrty. clicking on same country returns different color everytime leading incorrect info country clicked.
how eliminate error in finding exact color of point on image, user clicked? shadowing effects or lighting positions causing problem? or there different approach identify user clicked on image , country corresponds to?
var texture = three.imageutils.loadtexture('map_indexed.png'); var material = new three.meshlambertmaterial({map: texture}); var sphere = new three.mesh(new three.spheregeometry(globeradius, globeradius, globeradius),material); sphere.overdraw = true; scene.add(sphere);
reading pixel data
var x = e.pagex ; var y = e.pagey ; var canvas = document.getelementbyid('canvas'); var gl = renderer.getcontext(); //read pixel under mouse texture var pixelbuffer = new uint8array( 4 ); var xp=gl.readpixels( x, y, 1, 1, gl.rgba, gl.unsigned_byte, pixelbuffer );
indeed, shadowing/lighting effects may change color. try use meshbasicmaterial material instead of meshlambertmaterial , see if helps (meshbasicmaterial not need lights in scene).
Comments
Post a Comment