Three.js的逼真的镀铬效果

Question

我正在尝试存档更清晰，更逼真的镀铬效果。 我的演示中的粒度确实很粗糙且像素化。 在自定义对象上获得完美平滑镜像效果的选项有哪些？

     var path = "textures/reflection/";
      var format = '.jpg';

      var urls = [
          path + 'px' + format, path + 'nx' + format,
          path + 'py' + format, path + 'ny' + format,
          path + 'pz' + format, path + 'nz' + format
      ];

  var envMap = THREE.ImageUtils.loadTextureCube( urls, THREE.CubeReflectionMapping );

  var chrome = new THREE.MeshPhongMaterial( {
      color: 0xffffff,
      specular:0xffffff,
      envMap: envMap,
      combine: THREE.MultiplyOperation,
      shininess: 50,
      reflectivity: 1.0
  } );

Answer 1

您可以使用着色器中的函数替换多维数据集纹理以获得非常干净的边缘，但是如果您以前从未编写过着色器，那么这并不是一件容易的事。

如果有的话，只需使用与应用于3D纹理查找相同的3D反射矢量，而是使用通常基于y的截止函数，例如

reflVec = normalize(reflVec);
vec3 reflectColor = (reflVec.y > 0.3) ? vec3(1,1,1) : vec3(0,0,0);

...在着色器代码中。 这里会有一些微小的混叠，但是会非常非常尖锐。 抗锯齿超出了stackoverflow快速解答的范围。 如果您使用的是FXAA或类似产品，您甚至可能看不到别名。