Posted in Uncategorized

DataTexture problem

   January 6, 2021  1 Comment on 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.