Using Float Textures in Three.js

There are a few issues with your implementation that might be causing problems when using float textures in Three.js.

WebGL Extensions

First, when using THREE.FloatType textures, you need to ensure that your WebGL implementation supports the required extensions. As mentioned in the documentation:

In order to use the types THREE.FloatType and THREE.HalfFloatType, the WebGL implementation must support the respective extensions OES_texture_float and OES_texture_half_float. In order to use THREE.LinearFilter for component-wise, bilinear interpolation of the texels based on these types, the WebGL extensions OES_texture_float_linear or OES_texture_half_float_linear must also be present.

Texture Format Issues

Here are some suggestions to fix your implementation:

1. Check your format settings:

   JAVASCRIPTCopied
   // Try using RGBA format instead of RG
   this.xyTexture = new THREE.DataTexture(
       this.mydata,
       width,
       height,
       THREE.RGBAFormat, // Use RGBA for better compatibility
       THREE.FloatType
   );

2. Ensure data array size matches format:

   • If using THREE.RGFormat, your data array should have 2 values per texel
   • If using THREE.RGBAFormat, your data array should have 4 values per texel
   • Make sure this.mydata has the correct length: width * height * componentsPerTexel

3. Remove manual setting of internalFormat:

   • Let Three.js handle the internal format based on the format and type you provide
   • If you need to set it manually, ensure it's compatible with your WebGL version

4. Verify WebGL capabilities:

   JAVASCRIPTCopied
   // Check if float textures are supported
   const renderer = yourRendererInstance;
   const capabilities = renderer.capabilities;
   console.log("Float textures supported:", capabilities.isWebGL2 || 
                 capabilities.extensions.has('OES_texture_float'));

Shader Modifications

Your shader approach looks correct, but here are some suggestions:

GLSLCopied
// For texelFetch approach
ivec2 coords = ivec2(coord_x, coord_y);
// Make sure you're not exceeding texture dimensions
if(coords.x < width && coords.y < height) {
    vec2 xyValue = texelFetch(xyTexture, coords, 0).rg;
    // Use xyValue...
}

// For normalized coordinates approach
vec2 coords = vec2(
    (float(coord_x) + 0.5) / float(width),  // Add 0.5 to get center of texel
    (float(coord_y) + 0.5) / float(height)
);
vec2 xyValue = texture(xyTexture, coords).rg;

Complete Example

Here's a modified version of your code:

JAVASCRIPTCopied
// Create float data
this.mydata = new Float32Array(width * height * 2); // 2 components per pixel (RG)
// Fill your data...

// Create texture
this.xyTexture = new THREE.DataTexture(
    this.mydata,
    width,
    height,
    THREE.RGFormat,
    THREE.FloatType
);

// Set texture parameters
this.xyTexture.magFilter = THREE.NearestFilter;
this.xyTexture.minFilter = THREE.NearestFilter;
this.xyTexture.wrapS = THREE.ClampToEdgeWrapping;
this.xyTexture.wrapT = THREE.ClampToEdgeWrapping;
this.xyTexture.generateMipmaps = false;
this.xyTexture.needsUpdate = true;

// Create material
this.material = new THREE.RawShaderMaterial({
    uniforms: {
        xyTexture: { value: this.xyTexture },
        width: { value: width },
        height: { value: height }
    },
    vertexShader: vertexSource,
    fragmentShader: fragmentSource,
    glslVersion: THREE.GLSL3
});

If you're still having issues, try debugging by rendering the texture values to a simple quad to verify the data is being read correctly.