Custom data RG32F textures: Can't manage to read any data in the shader.

Questions
1

Hi all,

I want to use my float data in the shader. The idea is to create a width x height texture with 2 float(4 bytes) values per texel. This is the way I create the texture and shader:

 this.mydata = new Float32Array(data);
this.xyTexture = new THREE.DataTexture(
    this.mydata,
    width,
    height,
    THREE.RGFormat,
    THREE.FloatType
);
this.xyTexture.internalFormat = THREE.RG32F;
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;

this.material = new THREE.RawShaderMaterial({
            uniforms: {
                ....
                ,
                "xyTexture": {
                    type: "t",
                    value: this.xyTexture
                },
               ....
            },
            vertexShader: vertexSource,
            fragmentShader: fragmentSource,
            glslVersion: THREE.GLSL3,
            transparent: true
        });

And this is how I try to read my data in the vertex shader:

precision highp float;
...
uniform int width;
uniform int height;
uniform sampler2D xyTexture;
...
int index = gl_VertexID;
int coord_x = index % width;
int coord_y = index / width;
int mipmap = 0;
ivec2 coords = ivec2(coord_x, coord_y);
vec2 xyValue = texelFetch(xyTexture, coords, mipmap).rg;

Also I tried:

precision highp float;
...
uniform int width;
uniform int height;
uniform sampler2D xyTexture;
...
int index = gl_VertexID;
int coord_x = index % width;
int coord_y = index / width;

vec2 coords = vec2(float(coord_x)/float(width), float(coord_y)/float(height));
vec2 xyValue = texture(xyTexture, coords).rg;

Neither works. I dont know what’s the exact problem is, I can´t figure itout what the problem could be. Any tip, please?

2

It turns out that with this line all my problems are solved:

this.material.uniforms.xyTexture.value = this.xyTexture;

I didn’t expect this behavior since I do this(I thought I was doing) here:

this.material = new THREE.RawShaderMaterial({
            uniforms: {
                ....
                ,
                "xyTexture": {
                    type: "t",
                    value: this.xyTexture
                },
               ....
            },

Well, now is working. It can help someone who is facing a similar problem.

1 Like