# ShaderMaterial don't receive customColor？

**URL:** <https://discourse.threejs.org/t/shadermaterial-dont-receive-customcolor/6100>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [February 13, 2019, 3:34am UTC](https://discourse.threejs.org/t/shadermaterial-dont-receive-customcolor/6100 "2019-02-13T03:34:57Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Zongyan86](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zongyan86/32/3482_2.png) [@Zongyan86](https://discourse.threejs.org/u/Zongyan86)\
**Post date:** [February 13, 2019, 3:34am UTC](https://discourse.threejs.org/t/shadermaterial-dont-receive-customcolor/6100/1 "2019-02-13T03:34:57Z")

</div>

“attribute vec3 customColor;”  
“attribute float customOpacity;”,  
“attribute float customSize;”,  
“attribute float customAngle;”,

Vertex shaders don’t receive customColor ，other values(customOpacity……) is ok.  
what happend？who could help me？

![0](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/2/25865d6da654a7bb24c3abb43e89d782b69c511b.png)

![QQ%E5%9B%BE%E7%89%8720190213113036](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/b/b4f3ed2de872bfe49865ef2e2f773c634afd7348.png)

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [February 13, 2019, 4:34am UTC](https://discourse.threejs.org/t/shadermaterial-dont-receive-customcolor/6100/2 "2019-02-13T04:34:41Z")

</div>

I don’t think you can store colors wherever you are storing them. Did you try just doing three floats?

---

<div class="post-metadata">

**Author:** ![Zongyan86](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zongyan86/32/3482_2.png) [@Zongyan86](https://discourse.threejs.org/u/Zongyan86)\
**Post date:** [February 13, 2019, 5:44am UTC](https://discourse.threejs.org/t/shadermaterial-dont-receive-customcolor/6100/3 "2019-02-13T05:44:21Z")

</div>

> [@pailhead](#):
>
> three floats?

color-\>float？ RGB to float？ How do I use it?

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [February 13, 2019, 6:08am UTC](https://discourse.threejs.org/t/shadermaterial-dont-receive-customcolor/6100/4 "2019-02-13T06:08:02Z")

</div>

Something like

```auto
var myNumber = myColor.r

```

If you want it in an array you can do this:

```auto
var array_of_numbers = [
  myColor0.r, 
  myColor1.g, 
  distance_to_hong_kong
]

```

```auto
function arrayOfColorsToRaw(array){
  const typed = new Float32Array(array.length * 3)
  for( let i = 0, c=0 ; i < array.length; i++){
    typed[c++] = array[i].r
    typed[c++] = array[i].g
    typed[c++] = array[i].b
  }
}
```

---

<div class="post-metadata">

**Author:** ![Zongyan86](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zongyan86/32/3482_2.png) [@Zongyan86](https://discourse.threejs.org/u/Zongyan86)\
**Post date:** [February 13, 2019, 6:26am UTC](https://discourse.threejs.org/t/shadermaterial-dont-receive-customcolor/6100/5 "2019-02-13T06:26:15Z")

</div>

attribute vec3 customColor;-\>attribute float customColorR；attribute float customColorG；attribute float customColorB； this way is ok 🤣

I don’t understand how vertexAttrib1fv works. and Vertex shaders 's vec3 how to receive ?

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [February 13, 2019, 6:33am UTC](https://discourse.threejs.org/t/shadermaterial-dont-receive-customcolor/6100/6 "2019-02-13T06:33:34Z")

</div>

I don’t understand why you are looking at threes source. There is a higher level api to this.

---

<div class="post-metadata">

**Author:** ![Zongyan86](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zongyan86/32/3482_2.png) [@Zongyan86](https://discourse.threejs.org/u/Zongyan86)\
**Post date:** [February 13, 2019, 7:40am UTC](https://discourse.threejs.org/t/shadermaterial-dont-receive-customcolor/6100/7 "2019-02-13T07:40:52Z")

</div>

> [@Zongyan86](#):
>
> vec3 how to receive

Vertex shaders 's vec3 don’t recevie value.😂  
in this way:

 ![888](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/c082b7c02681a272965b9147bb8cb3910793ef2c.png)

this.particleMaterial.defaultAttributeValues.customColor.value[i] = new THREE.Color({r,g,b}) ; this way is wrong. i dont‘t understand.

---

<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:** [February 13, 2019, 9:55am UTC](https://discourse.threejs.org/t/shadermaterial-dont-receive-customcolor/6100/8 "2019-02-13T09:55:13Z")

</div>

Do it like so:

```auto
var color = new THREE.Color();
var colors = [];

for ( var i = 0; i < positionAttribute.count; i ++ ) {
		
    color.set( 0xffffff * Math.random() ); // generate random color
    colors.push( color.r, color.g, color.b ); // layout is [r, g, b, r, g, b, ...]
		
}
		
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

```

Array of objects are not supported. You always have to store primitive values in your attribute buffer.

Demo: [https://jsfiddle.net/ypsc9m12/1/](https://jsfiddle.net/ypsc9m12/1/)

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [February 13, 2019, 4:59pm UTC](https://discourse.threejs.org/t/shadermaterial-dont-receive-customcolor/6100/9 "2019-02-13T16:59:17Z")

</div>

I don’t think there is a type `c` or any other type for that matter.

---

<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:** [February 13, 2019, 6:50pm UTC](https://discourse.threejs.org/t/shadermaterial-dont-receive-customcolor/6100/10 "2019-02-13T18:50:41Z")

</div>

Yeah, your attribute definitions look strange. Where have you seen this approach?

---

<div class="post-metadata">

**Author:** ![Zongyan86](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zongyan86/32/3482_2.png) [@Zongyan86](https://discourse.threejs.org/u/Zongyan86)\
**Post date:** [February 14, 2019, 5:42am UTC](https://discourse.threejs.org/t/shadermaterial-dont-receive-customcolor/6100/11 "2019-02-14T05:42:41Z")

</div>

> [@Zongyan86](#):
>
> defaultAttributeValues

in this demo：[Particle Engine (Three.js)](http://stemkoski.github.io/Three.js/Particle-Engine.html) js:ParticleEngine.js,but it used three version was 60. 😆 I want to update to the latest version.

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [February 15, 2019, 3:38am UTC](https://discourse.threejs.org/t/shadermaterial-dont-receive-customcolor/6100/12 "2019-02-15T03:38:05Z")

</div>

Ancient history 🙂 There is no need for any of that i think, just make your attributes and call them from the shader.