Create Data Texture

Questions
1

How do you convert a PNG for example into data that can be passed to THREE.DataTexture?

Python/Php/NodeJS? Photoshop? Javascript/three.js?

2

How about drawing the PNG texture onto a canvas and then using CanvasRenderingContext2D.getImageData()? You can then access the resulting image data of type Uint8ClampedArray which you can use to create an instance of DataTexture.

https://jsfiddle.net/4rdgmanL/

4 Likes
3

Oh nice. Thank you!

Would this be the optimal workflow for an app with hundreds of textures or would it be best to save a file in raw data form before loading the asset? If the latter, what is the recommended workflow for this?

The WebGL 2D Texture Array example appears to have some proprietary image format which is not very helpful as an example.

4

Why use DataTexture instead of TextureLoader, if you’re loading normal image files? Typically DataTexture is used for procedurally-modified textures: https://codepen.io/SereznoKot/pen/vNjJWd, I think.

5

I thought that the WebGL2 2D Texture Array API requires them:

function DataTexture2DArray( data, width, height, depth ) {

	Texture.call( this, null );

	this.image = { data: data || null, width: width || 1, height: height || 1, depth: depth || 1 };

	this.magFilter = NearestFilter;
	this.minFilter = NearestFilter;

	this.wrapR = ClampToEdgeWrapping;

	this.generateMipmaps = false;
	this.flipY = false;

	this.needsUpdate = true;

}

Am I misunderstanding this?

1 Like
6

Oh, might be right then. I don’t know about that. :innocent:

7

Here is an example of @Mugen87’s approach:

I think you will only need one additional canvas for this loading process, since getImageData gets you a copy in array form. I think you must take care to throw away references to intermediary representations, to allow garbage collection.

BTW:

It looks like a 3D texture can be either an image file or an ArrayBufferView into a typed array (data texture).

Still, aside from this, is it not possible to have a uniform texture array / sampler2D array?