Restricted colors with ShaderMaterial?

Questions
, , ,
1

I’m trying to create a Points mesh with each color having a different color using a ShaderMaterial. But, I’m only seeing a limited color set of white, blue, yellow, and a few magenta. There should be 489 unique colors! I figure I must be doing something wrong with blending or something but I can’t figure out what. Any help appreciated!

const vertexShader = glsl`
    attribute float size;
    attribute vec3 customColor;

    varying vec3 vColor;

    void main() {
        vColor = customColor;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_PointSize = size * ( 300.0 / -mvPosition.z );
        gl_Position = projectionMatrix * mvPosition;
    }
`;

const fragmentShader = glsl`
  uniform sampler2D texture;
  varying vec3 vColor;

  void main() {
      vec4 tColor = texture2D( texture, gl_PointCoord );
      if (tColor.a < 0.1) discard;
      gl_FragColor = vec4( vColor, 1.0 );
      gl_FragColor = gl_FragColor * tColor;
  }
`;


const particleTexture2 =
  'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/sprites/spark1.png';

const materialSettings: ShaderMaterialParameters = {
  uniforms: {
    texture: {
      type: 't',
      value: textureLoader.load(particleTexture2)
    }
  },
  vertexShader: vertexShader,
  fragmentShader: fragmentShader,
  blending: NormalBlending,
  depthTest: true,
  transparent: false
};

export const createParticleMaterial = () => {
  const material = new ShaderMaterial(materialSettings);

  return material;
};

    geometry.setAttribute('position', new Float32BufferAttribute(positions, 3));
    geometry.setAttribute('customColor', new Float32BufferAttribute(colors, 3));
    geometry.setAttribute('size', new Float32BufferAttribute(sizes, 1));

    const material = createParticleMaterial();
    const points = new Points(geometry, material);
2

Someone in IRC helped me. I wasn’t normalizing the colors to be between 0 and 1.

2 Likes