DataTexture problem

Unfortunately it would be difficult to share relevant code for this. I set up a simple test case for using a DataTexture and that went very well and was straight forward. I’m trying to integrate it into my current project but it’s not cooperating.

@alteredq do you recognize any of these issues:

  • Attempting to call texture2D on the texture uniform results in Uncaught TypeError: Type error on this line:
    _gl.texImage2D( _gl.TEXTURE_2D, 0, _gl.RGBA, _gl.RGBA, _gl.UNSIGNED_BYTE, texture.image );
    Texture is undefined at that point of code, which is why it skips the if ( instanceof THREE.DataTexture ) check
  • WebGL inspector isn’t showing anything related to the texture either in Textures panel or in the shader program.
  • Inspecting material.uniforms to compare the data texture against a normal texture I see a discrepancy in that uniformsList.0[0].texture is a Texture while uniformsList.1[0].texture is an Object, not a DataTexture. However, all of its values appear to be present & correct.

Author: Fantashit

1 thought on “DataTexture problem

  1. Hard to tell without seeing the full code.

    Here is how DataTexture should be used (taken from working example, creates RGB texture of size 256 x 1 pixels):

    var rwidth = 256, rheight = 1, rsize = rwidth * rheight;
    
    var tcolor = new THREE.Color( 0xffffff );
    
    var dataColor = new Uint8Array( rsize * 3 );
    
    for ( var i = 0; i < rsize; i ++ ) {
    
        var h = i / 255;
    
        tcolor.setHSV( 0.45 + 0.5 * h, 0.5 + 0.4 * h, h * h );
    
        dataColor[ i * 3 ]     = Math.floor( tcolor.r * 255 );
        dataColor[ i * 3 + 1 ] = Math.floor( tcolor.g * 255 );
        dataColor[ i * 3 + 2 ] = Math.floor( tcolor.b * 255 );
    
    }
    
    colorRampTexture = new THREE.DataTexture( dataColor, rwidth, rheight, THREE.RGBFormat );
    colorRampTexture.needsUpdate = true;
    
    uniformsColor = {
    
        scale:      { type: "v2", value: new THREE.Vector2( 1, 1 ) },
        heightMap:  { type: "t",  value: 1, texture: noiseMap },
        colorRamp:  { type: "t",  value: 2, texture: colorRampTexture }
    
    };

    You can check your code against this.

Comments are closed.