Creating a lifelike metallic finish using three.js

Question

Creating a lifelike metallic finish using three.js

Looking to achieve a more polished and lifelike chrome effect. The texture quality in my demo is currently jagged and pixelated. What methods can be used to achieve a flawless reflective surface on a customized object?

https://i.sstatic.net/dfPKv.gif

     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
  } );

javascript three.js blender

Answer 1

Answer №1

To achieve crisp edges, consider replacing the cube texture with a function embedded within the shader. However, this task may prove challenging if you are new to writing shaders.

If you are familiar with shaders, simply utilize the same 3D reflection vector intended for the 3D texture lookup. Instead, implement a cut-off function based on the 'y' value, such as:

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

By incorporating this code snippet within the shader, you can expect minimal aliasing but extremely sharp results. Comprehensive anti-aliasing techniques extend beyond the scope of a brief response like this one. Nonetheless, if you are using FXAA or similar methods, the aliasing may not be noticeable.

Answer 2

To achieve crisp edges, consider replacing the cube texture with a function embedded within the shader. However, this task may prove challenging if you are new to writing shaders.

If you are familiar with shaders, simply utilize the same 3D reflection vector intended for the 3D texture lookup. Instead, implement a cut-off function based on the 'y' value, such as:

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

By incorporating this code snippet within the shader, you can expect minimal aliasing but extremely sharp results. Comprehensive anti-aliasing techniques extend beyond the scope of a brief response like this one. Nonetheless, if you are using FXAA or similar methods, the aliasing may not be noticeable.

Creating a lifelike metallic finish using three.js

Answer №1

Similar questions

Conceal the Div containing the specified class

Retrieve all MongoDB documents that match multiple regular expressions

Troubles with IE7 regarding jQuery [clicking and changing events]

JQuery does not recognize modifications in input values triggered by Ajax

Condense a lineup of names into only two rows

What are the benefits of keeping JavaScript and HTML separate in web development?

What is the best way to perform a keyword search in AngularJS?

Determine the name of the chosen item during program execution

Is there a method to run code in the parent class right after the child constructor is called in two ES6 Parent-Child classes?

Can a PHP script be executed through an Ajax event?

Struggling to retrieve information from a JSON file and display it within a component?

Creating a pair of interconnected drop-down menus linked to arrays within a Rails model

Oops! It seems like there was an error that occurred because the document was not

retrieve items from an array according to the hierarchy of the objects

Is there a way to automatically set all object properties to false if one property is set to true in React?

Adding a line and text as a label to a rectangle in D3: A step-by-step guide

Retrieving specific fields from a MongoDB document through Mongoose for flexible querying

The intricacies of how Node.js handles asynchronous execution flow

Sorting in Vuejs fails to function properly when a filter is applied

Error message "Assignment operation cannot occur on the left side" occurs when attempting to use the NOT operator