1

I am trying to add a texture to the particles i create using BufferGeometry in three.js.

I believe I am loading the material correctly, and that the issue is in my fragment shader but cannot figure this out as I am new to three.js. I managed to get the effect I wanted using Geometry rather than BufferGeometry: https://codepen.io/phillip-hogan/pen/mMJdXY/?editors=0010

...but I really need to use BufferGeometry ideally. Below is my code: 

 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
});

...and my vertex and fragment shader code:

    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

Phillip Hogan
  • 123
  • 1
  • 2
  • 9
  • 1
    See [this SO answer](https://stackoverflow.com/a/25372202/1461008). – WestLangley Aug 01 '17 at 16:47
  • @WestLangley - thank you. I'll give this a go today. Would this work using new THREE.TextureLoader().load("https://s17.postimg.org/dbsly2hm7/galactic_sharp.png") rather than creating an img node in html and then adding the data to the src of the image? – Phillip Hogan Aug 02 '17 at 08:03
  • The first problem I notice is that you are sending the texture to the shader, but are not using it. – 2pha Aug 04 '17 at 15:30

0 Answers0