Materials

Wed, 04 Oct 2023 17:41:10 GMT — Properties

---

Common Materials

In Three.js, a material determines how an object interacts with light and, consequently, how it appears when rendered. It defines the surface's color, reflection, transparency, and other visual properties. Materials are applied to 3D objects to give them their final appearance.

Here's a summary of some common three.js materials and their properties:

1. MeshBasicMaterial
   • Purpose: Simplest material, unaffected by lights.
   • Properties:
     • color: Color of the material.
     • map: Texture map.
     • transparent: Enables transparency.
   • Use: Suitable for non-reflective, non-transparent surfaces.
2. MeshStandardMaterial
   • Purpose: Represents a standard physically-based material.
   • Properties:
     • color: Color of the material.
     • roughness: Surface roughness.
     • metalness: Metalness of the material.
     • map: Texture map.
     • normalMap: Normal map for surface details.
     • envMap: Environment map for reflections.
     • transparent: Enables transparency.
   • Use: Suitable for most surfaces, handles reflections and lighting well.
3. MeshPhongMaterial
   • Purpose: Represents a Phong shaded material.
   • Properties:
     • color: Color of the material.
     • specular: Specular color.
     • shininess: Shininess factor.
     • map: Texture map.
     • normalMap: Normal map for surface details.
     • envMap: Environment map for reflections.
     • transparent: Enables transparency.
   • Use: Suitable for shiny surfaces.
4. MeshLambertMaterial
   • Purpose: Represents a Lambert shaded material.
   • Properties:
     • color: Color of the material.
     • emissive: Emissive color.
     • map: Texture map.
     • transparent: Enables transparency.
   • Use: Suitable for non-shiny, non-reflective surfaces.
5. MeshToonMaterial
   • Purpose: Represents a toon shaded material.
   • Properties:
     • color: Color of the material.
     • gradientMap: Gradient map for toon shading.
     • transparent: Enables transparency.
   • Use: Suitable for stylized, cartoon-like rendering.
6. PointsMaterial
   • Purpose: Material for rendering points.
   • Properties:
     • color: Color of the points.
     • size: Size of the points.
     • map: Texture map for points.
     • transparent: Enables transparency.
   • Use: Suitable for particle systems and point clouds.
7. LineBasicMaterial
   • Purpose: Material for rendering lines.
   • Properties:
     • color: Color of the lines.
     • linewidth: Width of the lines.
     • transparent: Enables transparency.
   • Use: Suitable for wireframes and simple lines.

Each material in three.js has specific properties tailored for different rendering needs. Choosing the right material is crucial for achieving the desired visual effects in 3D scenes. By adjusting these properties, developers can create a wide range of realistic and stylized appearances for their 3D objects.

Materials and Shaders

In the context of three.js, materials and shaders are two fundamental concepts that work closely together to achieve complex visual effects in 3D graphics. Let's break down the relationship between three.js materials and GLSL shaders:

Materials

In three.js, a material is an object that defines how an object should be rendered visually. Materials encapsulate the surface properties of objects, such as color, reflection, transparency, etc. Three.js provides various types of materials like MeshBasicMaterial, MeshStandardMaterial, MeshPhongMaterial, etc., each suitable for different rendering requirements.

When you apply a material to a 3D object, you're specifying how that object should respond to light and interact with the scene. Materials in three.js are designed to be easy to use and abstract away many of the complexities of shader programming for developers who don't want or need to dive deeply into low-level graphics programming.

Shaders (GLSL)

GLSL (OpenGL Shading Language) is a C-like language that allows you to write custom shaders. Shaders are programs that run directly on the GPU and are used to control the rendering pipeline. They enable developers to create highly customized and advanced visual effects that go beyond what standard materials can achieve. Shaders can be divided into two main types in the context of three.js:

1. Vertex Shaders: These shaders manipulate the geometry of 3D models. They are responsible for transforming 3D coordinates of vertices into 2D screen coordinates.
2. Fragment Shaders: Also known as pixel shaders, these shaders determine the color of individual pixels on the object's surface. They are executed for every pixel covered by the object on the screen.

Relationship Between Materials and Shaders

Three.js allows you to use custom shaders in conjunction with materials through the ShaderMaterial class. Instead of using the built-in materials, you can create a ShaderMaterial and specify your custom vertex and fragment shader programs. This gives you full control over the rendering process.

Here's how the relationship works:

1. Shader Programs: You write custom vertex and fragment shader programs in GLSL. These shaders define how the geometry (vertex shader) and pixels (fragment shader) of the object should be rendered.
2. Shader Material: You create a ShaderMaterial in three.js and provide your custom vertex and fragment shaders as strings. This material uses your shader programs to render the object.
3. Attributes and Uniforms: Shaders can receive data through attributes (per-vertex data) and uniforms (global data). When setting up your ShaderMaterial, you can define attributes and uniforms to pass data from your JavaScript code to the shaders.
4. Rendering: When you render the scene, three.js takes care of sending the necessary data to the shaders and executing them on the GPU. The shaders process the geometry and pixels based on the logic you defined, producing the final image displayed on the screen.

In summary, materials provide a high-level interface for basic rendering in three.js, while shaders offer a low-level, customizable approach for advanced visual effects. By combining custom shaders with materials using ShaderMaterial, developers can achieve highly sophisticated and unique rendering results in their three.js applications.

Back to top