# Instanced textures with DataArrayTexture error

**URL:** <https://discourse.threejs.org/t/instanced-textures-with-dataarraytexture-error/43187>\
**Category:** Questions\
**Tags:** textures, shaders\
**Created:** [October 3, 2022, 3:56pm UTC](https://discourse.threejs.org/t/instanced-textures-with-dataarraytexture-error/43187 "2022-10-03T15:56:13Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Darien](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/darien/32/25909_2.png) [@Darien](https://discourse.threejs.org/u/Darien)\
**Post date:** [October 3, 2022, 3:56pm UTC](https://discourse.threejs.org/t/instanced-textures-with-dataarraytexture-error/43187/1 "2022-10-03T15:56:13Z")

</div>

Hello everyone,

I have a project where I need to generate textures on the fly and pass them to instances in a custom material. I would typically do this (not on the web) either by passing a sampler2D array as uniform, or by merging the textures into a master texture, and then use a variable index number to access the desired places. However, I cannot seem to be able to do any of that since to read them in a shader I need to pass a variable sampler index, which as far as I understand is not allowed in GLSL 300es.

I read around and it seems I could use a DataArrayTexture for this purpose instead, using its depth index. However, I’m stuck with an error already trying to run the example provided by three.js.

![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/5/55ed5382472353dbaac3574e2908ff2b959547cd.png)

Here the code I’m trying. slightly adapted from the original here: [three.js examples](https://threejs.org/examples/#webgl2_materials_texture2darray)

```javascript
const vertex = `
	uniform vec2 size;
	out vec2 vUv;

	void main() {

		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

		// Convert position.xy to 1.0-0.0
		vUv.xy = position.xy / size + 0.5;
		vUv.y = 1.0 - vUv.y; // original data is upside down
	}
`;

const fragment = `
	precision highp float;
	precision highp int;
	precision highp sampler2DArray;

	uniform sampler2DArray diffuse;
	in vec2 vUv;
	uniform int depth;

	out vec4 outColor;

	void main() {

		vec4 color = texture( diffuse, vec3( vUv, depth ) );

		// lighten a bit
		outColor = vec4( color.rrr * 1.5, 1.0 );

	}
`

import * as THREE from '../../js/three.js-r124/build/three.module.js';

class DataArrayTexture extends THREE.Texture {

  constructor( data = null, width = 1, height = 1, depth = 1 ) {
    super( null );

    this.isDataArrayTexture = true;

    this.image = { data, width, height, depth };

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

    this.wrapR = THREE.ClampToEdgeWrapping;

    this.generateMipmaps = false;
    this.flipY = false;
    this.unpackAlignment = 1;
  }

}

let camera, scene, mesh, renderer, stats;

const planeWidth = 50;
const planeHeight = 50;

let depthStep = 0.4;

init();
animate();

function init() {
	const container = document.createElement( 'div' );
	document.body.appendChild( container );

	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
	camera.position.z = 70;

	scene = new THREE.Scene();

	// width 256, height 256, depth 109, 8-bit, zip archived raw data

	new THREE.FileLoader()
		.setResponseType( 'arraybuffer' )
		.load( 'textures/3d/head256x256x109.zip', function ( data ) {

			const zip = fflate.unzipSync( new Uint8Array( data ) );
			const array = new Uint8Array( zip['head256x256x109'].buffer );

			const texture = new DataArrayTexture( array, 256, 256, 109 );
			texture.format = THREE.RedFormat;
			texture.needsUpdate = true;

			const material = new THREE.ShaderMaterial( {
				uniforms: {
					diffuse: { value: texture },
					depth: { value: 55 },
					size: { value: new THREE.Vector2( planeWidth, planeHeight ) }
				},
				vertexShader: vertex,
				fragmentShader: fragment,
				glslVersion: THREE.GLSL3
			} );

			const geometry = new THREE.PlaneGeometry( planeWidth, planeHeight );

			mesh = new THREE.Mesh( geometry, material );

			scene.add( mesh );

		} );

	// 2D Texture array is available on WebGL 2.0

	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	container.appendChild( renderer.domElement );

	console.log(renderer.capabilities.isWebGL2);

	stats = new Stats();
	container.appendChild( stats.dom );

	window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

	requestAnimationFrame( animate );

	if ( mesh ) {

		let value = mesh.material.uniforms['depth'].value;

		value += depthStep;

		if ( value > 109.0 || value < 0.0 ) {

			if ( value > 1.0 ) value = 109.0 * 2.0 - value;
			if ( value < 0.0 ) value = - value;

			depthStep = - depthStep;

		}

		mesh.material.uniforms['depth'].value = value;

	}

	render();
	stats.update();
}

function render() {
	renderer.render( scene, camera );
}

```

I have to use r124 for this project, but I’ve tried up to r135 and I have the same issue.

What am I doing wrong? Many thanks!