# Passing array to TSL function

**URL:** <https://discourse.threejs.org/t/passing-array-to-tsl-function/76859>\
**Category:** Questions\
**Tags:** tsl, shaders\
**Created:** [January 22, 2025, 2:38pm UTC](https://discourse.threejs.org/t/passing-array-to-tsl-function/76859 "2025-01-22T14:38:26Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![barryNormal](https://avatars.discourse-cdn.com/v4/letter/b/91b2a8/32.png) [@barryNormal](https://discourse.threejs.org/u/barryNormal)\
**Post date:** [January 22, 2025, 2:38pm UTC](https://discourse.threejs.org/t/passing-array-to-tsl-function/76859/1 "2025-01-22T14:38:26Z")

</div>

Hello everyone, very excited by TSL, but this problem is driving me crazy. Hopefully it’s a relatively simple solution.

I’m working from the procedural terrain TSL example.

But I want to generate terrain by passing an array to `material.positionNode = Fn( () => {`  
Then at some point in there I will set `position.y.addAssign( myArray.element(z*x) );`

I’ve tried `const myArray = uniform(getRndIntegerArray(100));`  
// where the function returns an array of ints, or an array of floats. Just to have dummy data

This gives `Uncaught ReferenceError: myArray is not defined`

Though there’s no issue if I, for example say `const myNumber = uniform(1.0 );`

What am I missing?

Thanks in advance

B

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 22, 2025, 4:16pm UTC](https://discourse.threejs.org/t/passing-array-to-tsl-function/76859/2 "2025-01-22T16:16:39Z")

</div>

If you need a uniform array, use `uniformArray()`. E.g.

```js
const tintColors = uniformArray( [
	new Color( 1, 0, 0 ),
	new Color( 0, 1, 0 ),
	new Color( 0, 0, 1 )
], 'color' );

```

If the array data are constants and don’t have to be uniforms, you have to wait until the following PR is merged:

> <https://github.com/mrdoob/three.js/pull/30386>
>
> Closes https://github.com/mrdoob/three.js/issues/30097
> 
> \*\*Description\*\*
> 
> The… implementation has two types of declarations \`array( \[...nodes \] )\` and \`array( 'type', count )\`. Both are compatible with \`.toConst()\` and \`.toVar()\` and have been updated in parse. \`TempNode\` has also been updated to automatically generate cache if \`.toVar()\` is not used.
> 
> \`\`\`js
> // style 1 - constants
> const a = array( \[vec3(), vec3() \] );
> 
> // style 1 - runtime values
> const b = array( \[uniform( 1 ), a.element( 0 ).x \] );
> 
> // style 2 - constants
> const c = array( 'vec3', 2 );
> 
> // style 3 - constants / runtime values
> const d = vec3( 0, 0, 1 ).toArray( 2 ); // the result will be: \[vec3( 0, 0, 1 ), vec3( 0, 0, 1 ) \]
> 
> // .toVar() and assigns
> const e = array( \[vec3(), vec3() \] ).toVar();
> e.element( 0 ).assign( vec3() );
> 
> // .toConst()
> const f = array( \[vec3(), vec3() \] ).toConst();
> const v = f.element( 0 );
> \`\`\`

---

<div class="post-metadata">

**Author:** ![barryNormal](https://avatars.discourse-cdn.com/v4/letter/b/91b2a8/32.png) [@barryNormal](https://discourse.threejs.org/u/barryNormal)\
**Post date:** [January 22, 2025, 5:19pm UTC](https://discourse.threejs.org/t/passing-array-to-tsl-function/76859/3 "2025-01-22T17:19:09Z")

</div>

Thank you very much for the fast reply @Mugen87

The array is just a way to pass the elevation (y-value) of a real-world map, which will be copied for each vertex in the terrain map. So they’re just regular Ints or Floats.

So, like this? `var myArray = uniformArray([1,2,3], 'number');`

I still get an endless `Uncaught ReferenceError: myArray is not defined`

I could well be mangling the declaration of myArray…

B

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [January 23, 2025, 9:09am UTC](https://discourse.threejs.org/t/passing-array-to-tsl-function/76859/4 "2025-01-23T09:09:33Z")

</div>

Here is the (simplified) code I’m using with success.

```javascript
//regular JS array of numbers (float)
const currentMap = [0.1, 0.2, 0.3]; 

//no need to specify type
const cm = uniformArray( currentMap );

//node
const myNode = Fn(() => {

	//retrieve the value within a loop
	Loop( { type: 'int', start: int( 0 ), end: int( 3 ), condition: '<' }, ( { i } ) => {
		const elem = float( cm.element(i) );
	} );

})();

```

---

<div class="post-metadata">

**Author:** ![barryNormal](https://avatars.discourse-cdn.com/v4/letter/b/91b2a8/32.png) [@barryNormal](https://discourse.threejs.org/u/barryNormal)\
**Post date:** [January 24, 2025, 1:27pm UTC](https://discourse.threejs.org/t/passing-array-to-tsl-function/76859/6 "2025-01-24T13:27:29Z")

</div>

Thank you @Oxyn that was very helpful.

However, I must still be doing something wrong. I’ve updated my code but now I just get a blank screen. No errors. But no plane either.

Here’s what I’m doing, does anything jump out as an obvious rookey error?:

```javascript
function tsl(){
	const myArray = getRndIntegerArray(10);
	const myNum = uniform(1.0);
	const uniform_array = uniformArray(myArray);
	const arraySize = uniform(myArray.length);
  	const geometry = new THREE.PlaneGeometry( 10, 10, 10, 10 );
	var material = new THREE.MeshStandardNodeMaterial( { color: 0xFF0000 } );
				
	material.positionNode = Fn( () => {
	var position = positionLocal.xyz.toVar();

	//retrieve the value within a loop
	Loop( { type: 'int', start: int( 0 ), end: int(arraySize), condition: '<=' }, ( { i } ) => {
		const v = float( uniform_array.element(i) );
		position.y.assign( v);
	} );
	
	return position;

} )();

```

If I console log the `mesh.geometry.attributes.position` I get:

 ![Screenshot from 2025-01-24 14-23-56](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/6/46bdb2bdf11696dbd81141d96531f36c7e84e895.png)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 24, 2025, 1:43pm UTC](https://discourse.threejs.org/t/passing-array-to-tsl-function/76859/7 "2025-01-24T13:43:32Z")

</div>

Do you mind share a live example that shows what you are doing? [three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/mnqr9oj0/)

In any event, if you have a height value per vertex, you would not use a loop to access the array values. Do it with `vertexIndex`.

```js
position.y.assign( uniform_array.element( vertexIndex ) );

```

---

<div class="post-metadata">

**Author:** ![barryNormal](https://avatars.discourse-cdn.com/v4/letter/b/91b2a8/32.png) [@barryNormal](https://discourse.threejs.org/u/barryNormal)\
**Post date:** [January 24, 2025, 1:50pm UTC](https://discourse.threejs.org/t/passing-array-to-tsl-function/76859/8 "2025-01-24T13:50:08Z")

</div>

Thank you again @Mugen87.

Fiddle: [three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/mnqr9oj0/)

I’ll try to get vertexIndex to work.  
B

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 24, 2025, 2:21pm UTC](https://discourse.threejs.org/t/passing-array-to-tsl-function/76859/9 "2025-01-24T14:21:14Z")

</div>

It seems you have not saved your modifications of the fiddle.

---

<div class="post-metadata">

**Author:** ![barryNormal](https://avatars.discourse-cdn.com/v4/letter/b/91b2a8/32.png) [@barryNormal](https://discourse.threejs.org/u/barryNormal)\
**Post date:** [January 24, 2025, 2:37pm UTC](https://discourse.threejs.org/t/passing-array-to-tsl-function/76859/10 "2025-01-24T14:37:07Z")

</div>

Apologies, now saved! [three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/fsg3Lax6/)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 24, 2025, 2:48pm UTC](https://discourse.threejs.org/t/passing-array-to-tsl-function/76859/11 "2025-01-24T14:48:38Z")

</div>

If you want to apply a height per vertex, you can also use the following approach: [three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/z3u6j0gd/)

The idea is to make use of `bufferAttribute()` and represent you height data as an additional buffer attribute.

---

<div class="post-metadata">

**Author:** ![barryNormal](https://avatars.discourse-cdn.com/v4/letter/b/91b2a8/32.png) [@barryNormal](https://discourse.threejs.org/u/barryNormal)\
**Post date:** [January 24, 2025, 2:54pm UTC](https://discourse.threejs.org/t/passing-array-to-tsl-function/76859/12 "2025-01-24T14:54:54Z")

</div>

Amazing! Such a clean solution. Thanks very much @Mugen87  
B