Threejs 最新版本 0.130.1 不渲染shadermaterial

Question

我们使用的是 3 0.115 版本，一切正常。由于我们遇到

我们有一个应用程序使用通过缓冲区几何（位置、大小和颜色缓冲区属性）和着色器材质渲染的点云。

function vertexShader() {
  return `attribute float size;
  attribute vec3 customColor;
  varying vec3 vColor;
  attribute float visibility;
  varying float vVisible;
  void main() {
    vColor = customColor;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_PointSize = size * ( 300.0 / -mvPosition.z );
    gl_Position = projectionMatrix * mvPosition;
    vVisible = visibility;
  }`
}

function fragmentShader() {
  return `uniform vec3 color;
  uniform sampler2D pointTexture;
  varying vec3 vColor;
  varying float vVisible;
  void main() {
    gl_FragColor = vec4( color * vColor, 1.0 );
    gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
    if ( gl_FragColor.a < ALPHATEST ) discard;
    if (vVisible < 0.5) discard;
  }`
}

在我们的 javascript 初始化代码中。

const material = new THREE.ShaderMaterial({
    uniforms: {
      color: { value: new THREE.Color(0xffffff) },
      texture: { value: new THREE.TextureLoader().load(circle) },
      resolution: { value: new THREE.Vector2() },
    },
    vertexShader: vertexShader(),
    fragmentShader: fragmentShader(),
    alphaTest: 0.9,
    blending: THREE.AdditiveBlending
  });

控制台没有错误。但是没有渲染点。我们使用 raycast 来检测点，并且没有任何问题。

知道为什么在升级到最新版本的 3 后，点的渲染失败了吗？这和shadermaterial有关吗？

感谢您的帮助:)

Answer 1

你像这样定义纹理统一：

texture: { value: new THREE.TextureLoader().load(circle) },

在着色器中你有这条线

uniform sampler2D pointTexture;

由于统一名称不匹配，我不明白这段代码是如何工作的。我已经根据您的代码大致对齐了以下示例中的名称。

let camera, scene, renderer;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 3;

  scene = new THREE.Scene();

  const geometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(1, 0, 0), new THREE.Vector3()]);

  const material = new THREE.ShaderMaterial({
    uniforms: {
      color: {
        value: new THREE.Color(0xffffff)
      },
      pointTexture: {
        value: new THREE.TextureLoader().load('https://threejs.org/examples/textures/sprite.png')
      },
      resolution: {
        value: new THREE.Vector2()
      },
    },
    vertexShader: vertexShader(),
    fragmentShader: fragmentShader(),
    alphaTest: 0.9,
    blending: THREE.AdditiveBlending
  });

  const points = new THREE.Points(geometry, material);
  scene.add(points);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene, camera);

}

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

function fragmentShader() {
  return `
  uniform sampler2D pointTexture;
  void main() {
    gl_FragColor = texture2D( pointTexture, gl_PointCoord );
  }`
}

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.130.1/build/three.min.js"></script>