1

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

我相信我正在正确加载材料，问题出在我的片段着色器中，但由于我是three.js 的新手，所以无法解决这个问题。我设法使用几何而不是 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

4

0 回答 0