Search code examples
three.jsglsltexturesshader

Referencing texels in a data texture using indexes in the shader

I have values in the texels of a DataTexture that I am trying to access using indexes in my shader. The indexes [0, 1, 2, 3, 4, 5, 6... 62, 63] are continuous, while the data texture has a height and width (uTextureDimension) of 8. After some research I wrote this function to take a particular index value, and reference the corresponding texel:

vec2 customUV = vec2( mod(aIndex, uTextureDimension) / uTextureDimension, floor(aIndex / uTextureDimension) / uTextureDimension );
vec4 texelValues = texture2D( tDataTexture, customUV ).xyzw;

I also tried this version to reference the texel from its center point. Also no dice:

vec2 perMotifUV = vec2( mod( aIndex, uTextureDimension ) * (( 1.0 / uTextureDimension )/2.0), floor( aIndex / uTextureDimension ) * (( 1.0 / uTextureDimension )/2.0) );
vec4 texelValues = texture2D( tDataTexture, customUV ).xyzw;

After working with this since yesterday afternoon, editing it here and there, and looking around for other solutions, I'm still not getting the expected results. I should say that in using Three.js, the shaders are set to high precision float - is this part of the problem? Can anyone nudge me on track here? Thanks!

Solution

  • The first one seems right, if everything is a float. Are you using NEAREST filter mode? Technically you should also add a half-texel-size offset too:

    vec2 texelSize = 1.0 / uTextureDimension;
vec2 customUV = vec2( mod(aIndex, uTextureDimension)*texelSize, floor(aIndex / uTextureDimension)*texelSize );
customUV += vec2(0.5*texelSize);

    EDIT - Also your indices should go 0-63 not 0-64