与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等，你甚至可能看不到别名。