Fragmentshader with only texture2D results in washed out color compared to MeshBasicMaterial or any other

Questions
,
1

I made this below shader which should simply get pixels from a specific area from a texture. The offset / scale works fine but the resulting RGB is very different to when i render the same texture with for example MeshBasicMaterial. I suspect it has to do with ‘mapTexelToLinear’ that i found in the default THREE shaders. But no idea what this does or how to duplicate that here.

I am aware that material.onBeforeCompile would be the best way but I cannot get this working . Can someone help me translate below into a onBeforeCompile apporach?

Thanks !!

getCutoutShaderMaterial(cutouttexture, offsetx, offsety, scalex, scaley) {

    return new THREE.ShaderMaterial({
      transparent: true,
      side: SphereSide,
      depthTest: false,
      fog: false,
      uniforms: {
        cutouttexture: {
          value: cutouttexture
        },
        offsetx: {
          type: 'f',
          value: offsetx
        },
        offsety: {
          type: 'f',
          value: offsety
        },
        scalex: {
          type: 'f',
          value: scalex
        },
        scaley: {
          type: 'f',
          value: scaley
        }
      },
      vertexShader: `
          varying vec2 vUv;
          void main(){
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
          }
        `,
      fragmentShader: `
          uniform sampler2D cutouttexture;
          uniform float offsetx;
          uniform float offsety;
          uniform float scalex;
          uniform float scaley;
          varying vec2 vUv;
          void main(){
            gl_FragColor = texture2D( cutouttexture, vUv * vec2(scalex, scaley) + vec2(offsetx, offsety)  * vec2(scalex, scaley) );
          }
        `
    });

  }
2

Here you go !

  getMapTranformMaterial(map, offsetx, offsety, scalex, scaley) {

    const material = new THREE.MeshBasicMaterial({
      map: map,
      transparent: true,
      depthTest: false,
      side: SphereSide,
      color: '#ffffff'
    });

    const uniforms = {
      map: {
        value: map
      },
      offsetx: {
        type: 'f',
        value: offsetx
      },
      offsety: {
        type: 'f',
        value: offsety
      },
      scalex: {
        type: 'f',
        value: scalex
      },
      scaley: {
        type: 'f',
        value: scaley
      }
    };

    // make uniforms directly accessible as in 'material.offsetx'
    Object.defineProperties(material, {
      offsetx: {
        get: function() {
          return uniforms.offsetx.value;
        },
        set: function(v) {
          uniforms.offsetx.value = v;
        }
      },
      offsety: {
        get: function() {
          return uniforms.offsety.value;
        },
        set: function(v) {
          uniforms.offsety.value = v;
        }
      },
      scalex: {
        get: function() {
          return uniforms.scalex.value;
        },
        set: function(v) {
          uniforms.scalex.value = v;
        }
      },
      scaley: {
        get: function() {
          return uniforms.scaley.value;
        },
        set: function(v) {
          uniforms.scaley.value = v;
        }
      }
    });

    const mapParseFragmentChunk = "#ifdef USE_MAP\n\tuniform sampler2D map;\n\tuniform float offsetx;\n\tuniform float offsety;\n\tuniform float scalex;\n\tuniform float scaley;\n#endif";
    const mapTransformFragmentChunk = "#ifdef USE_MAP\n\tvec4 texelColor = texture2D( map, vUv * vec2(scalex, scaley) + vec2(offsetx, offsety)  * vec2(scalex, scaley) );\n\ttexelColor = mapTexelToLinear( texelColor );\n\tdiffuseColor *= texelColor;\n#endif";

    material.onBeforeCompile = function(shader) {
      for (const uniformName in uniforms) {
        shader.uniforms[uniformName] = uniforms[uniformName];
      }
      shader.fragmentShader = shader.fragmentShader.replace('#include <map_pars_fragment>', mapParseFragmentChunk).replace('#include <map_fragment>', mapTransformFragmentChunk);
    };

    material.needsUpdate = true;

    return material;
  }