Three.js shaderMaterial добавляет текстуру к частицам

Question

Я пытаюсь добавить текстуру к частицам, которые я создаю с помощью BufferGeometry в three.js.

Я полагаю, что я загружаю материал правильно, и что проблема в моем фрагментном шейдере, но не могу понять это, поскольку я новичок в three.js. Мне удалось получить эффект, который я хотел, используя Geometry, а не BufferGeometry: https://codepen.io/phillip-hogan/pen/mMJdXY/?editors=0010

... но мне действительно нужно использовать BufferGeometry в идеале. Ниже мой код:

 var shaderMaterial = new THREE.ShaderMaterial({
  uniforms: particleUniforms,
  vertexShader: vertexshaderSource, // need to fill this variable with source of vertex-shader
  fragmentShader: fragmentshaderSource, // similarly, source of the fragment-shader

  blending: THREE.AdditiveBlending,
  depthTest: false,
  depthWrite: false,
  transparent: true
});

... и мой код вершинного и фрагментного шейдера:

    var vertexshaderSource = [
    "attribute float size;",
    "attribute vec3 customColor;",
    "varying vec3 vColor;",
    "void main() {",
    "vColor = customColor;",
    "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
    "gl_PointSize = size * ( 30.0 / -mvPosition.z );",
    "gl_Position = projectionMatrix * mvPosition;",
    "}"
  ].join("\n");

  var vertexshaderSource = [
    "attribute float size;",
    "attribute vec3 customColor;",
    "varying vec3 vColor;",
    "void main() {",
    "vColor = customColor;",
    "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
    "gl_PointSize = size * ( 30.0 / -mvPosition.z );",
    "gl_Position = projectionMatrix * mvPosition;",
    "}"
  ].join("\n");

  var fragmentshaderSource = [
    "uniform vec3 color;",
    "varying vec3 vColor;",
    "void main() {",
    "gl_FragColor = vec4( color * vColor, 1.0 );",
    "}"
  ].join("\n");

https://codepen.io/phillip-hogan/pen/VzaqEV/?editors=0010