How to use SwitchLight's materials?

SwitchLight API enables the extraction of high-quality materials like normals, albedo, roughness and specular maps, essential components in Physical Based Rendering (PBR) (opens in a new tab). These material maps can be seamlessly integrated into your favorite rendering tools such as Blender, Unreal, and Three.js. Additionally, by incorporating environment maps in formats like .exr or .hdr, you can easily switch lighting conditions to achieve desired visual effects. Explore PBR in action with SwitchLight's materials in the Three.js Playground.

What is Albedo?

An Albedo map represents the base color of a material without any shadows or specular highlights. It provides a view of the material as it would appear under neutral lighting. It's crucial in physically-based rendering because it sets the base tone upon which all other lighting calculations are made. In software like Blender or Unreal, you should plug the Albedo map into the BaseColor input. For three.js, use the .map designation. This can greatly enhance the realism and believability of the final composite result.

What is Surface normals?

A Normal map is a texture derived from normal vectors, used to create the illusion of complex surface details without altering the actual geometry. It represents small perturbations in the surface's normals, which can simulate intricate details like bumps, scratches, and wrinkles by affecting the way light interacts with the surface. Most contemporary 3D rendering tools provide a dedicated normal input for materials. By plugging into this input, it offers a more realistic and dynamic effect across various lighting environments.

What is Roughness map?

A Roughness map defines how rough or smooth a surface is. It indicates how the light is reflected on the material's surface, thereby determining how matte or glossy the surface appears. Darker values on the map correspond to smoother surfaces with sharp reflections, while brighter values indicate rougher surfaces that produce blurred reflections.

Three.js Playground

In this playground, we render on the web using Three.js, utilizing three materials: Albedo, Normal, Roughness. You can easily extract them with SwitchLight API (opens in a new tab) and leverage Physical Based Rendering (PBR). We provide React (Typescript) codes below for your further understanding.

How to play?

• Drag the mouse over the canvas to change the direction of the light.
• Toggle different maps on and off to see how they affect the rendering.
• Select different materials you want to see

Code snippets (react-three-fiber (opens in a new tab))

import { useFrame, useLoader } from "@react-three/fiber"
import { ReactElement,  } from "react"
import * as THREE from "three"
 
// Texture URLs
const TEXTURE_URLS = [
    "https://space-images.beeble.ai/asset/api_docs/albedo_woman_v2.png",
    "https://space-images.beeble.ai/asset/api_docs/normal_woman_v2.png",
    "https://space-images.beeble.ai/asset/api_docs/roughness_woman_v2.png",
  ];
 
// Load textures
const [albedoMap, normalMap, roughnessMap] = useLoader(THREE.TextureLoader, TEXTURE_URLS);
 
// Define mesh with meshPhysicalMaterial
const Mesh = (): ReactElement => {
 
    // Set proper colorSpace for each map when using meshPhysicalMaterial
    useFrame((state) => {
        albedoMap.colorSpace = THREE.SRGBColorSpace;
        normalMap.colorSpace = THREE.NoColorSpace;
        roughnessMap.colorSpace = THREE.NoColorSpace;
    });
 
    // Retrun mesh component
    return (
        <mesh>
        <planeGeometry args={[WIDTH, HEIHGT]} />
        <meshPhysicalMaterial
            roughnessMap={roughnessMap}
            normalMap={normalMap}
            map={albedoMap}
            transparent />
        </mesh>
    );
}