Question

我正在尝试使用three.js中的BufferGeometry为我创建的粒子添加纹理。

我相信我正在正确加载材料，并且问题出在我的片段着色器中，但由于我是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

Three.js shaderMaterial为粒子添加纹理

0 个答案: