shaderlab pbr support refraction

packages/core/src/material/PBRMaterial.ts

@@ -1,9 +1,11 @@
 import { MathUtil, Vector2, Vector3, Vector4, Color } from "@galacean/engine-math";
 import { Engine } from "../Engine";
-import { ShaderProperty } from "../shader";
+import { ShaderMacro, ShaderProperty } from "../shader";
 import { Shader } from "../shader/Shader";
 import { Texture2D } from "../texture/Texture2D";
 import { PBRBaseMaterial } from "./PBRBaseMaterial";
+import { RefractionMode } from "./enums/Refraction";
+import { RenderQueueType } from "../shader/enums/RenderQueueType";
 
 /**
  * PBR (Metallic-Roughness Workflow) Material.
@@ -31,6 +33,22 @@
   private static _sheenTextureProp = ShaderProperty.getByName("material_SheenTexture");
   private static _sheenRoughnessTextureProp = ShaderProperty.getByName("material_SheenRoughnessTexture");
 
+  protected _refractionMode: RefractionMode;
+  protected static _refractionMacro: ShaderMacro = ShaderMacro.getByName("MATERIAL_ENABLE_SS_REFRACTION");
+  private static _refractionSphereMacro: ShaderMacro = ShaderMacro.getByName("REFRACTION_SPHERE");
+  private static _refractionPlaneMacro: ShaderMacro = ShaderMacro.getByName("REFRACTION_PLANE");
+  private static _refractionThinMacro: ShaderMacro = ShaderMacro.getByName("REFRACTION_THIN");
+  private static _transmissionMacro: ShaderMacro = ShaderMacro.getByName("MATERIAL_HAS_TRANSMISSION");
+  private static _thicknessMacro: ShaderMacro = ShaderMacro.getByName("MATERIAL_HAS_THICKNESS");
+  private static _absorptionMacro: ShaderMacro = ShaderMacro.getByName("MATERIAL_HAS_ABSORPTION");
+  private static _thicknessTextureMacro: ShaderMacro = ShaderMacro.getByName("MATERIAL_HAS_THICKNESS_TEXTURE");
+  private static _transmissionTextureMacro: ShaderMacro = ShaderMacro.getByName("MATERIAL_HAS_TRANSMISSION_TEXTURE");
+  private static _transmissionProp = ShaderProperty.getByName("material_Transmission");
+  private static _transmissionTextureProp = ShaderProperty.getByName("material_TransmissionTexture");
+  private static _attenuationColorProp = ShaderProperty.getByName("material_AttenuationColor");
+  private static _attenuationDistanceProp = ShaderProperty.getByName("material_AttenuationDistance");
+  private static _thicknessProp = ShaderProperty.getByName("material_Thickness");
+  private static _thicknessTextureProp = ShaderProperty.getByName("material_ThicknessTexture");
   /**
    * Index Of Refraction.
    * @defaultValue `1.5`
@@ -289,6 +307,145 @@
     }
   }
 
+  /**
+   * Refraction switch.
+   * @remarks Use refractionMode to set the refraction shape.
+   */
+  get refractionMode(): RefractionMode {
+    return this._refractionMode;
+  }
+
+  set refractionMode(value: RefractionMode) {
+    if (value !== this._refractionMode) {
+      if (value) {
+        this.shaderData.enableMacro(PBRMaterial._refractionMacro);
+        this.renderState.renderQueueType = RenderQueueType.Transparent;
+        this.renderState.blendState.targetBlendState.enabled = false;
+      } else {
+        this.shaderData.disableMacro(PBRMaterial._refractionMacro);
+        this.renderState.renderQueueType = RenderQueueType.Opaque;
+        this.renderState.blendState.targetBlendState.enabled = true;
+      }
+    }
+    this._refractionMode = value;
+    this.setRefractionMode(value);
+  }
+
+  private setRefractionMode(refractionMode: RefractionMode): void {
+    this.shaderData.disableMacro(PBRMaterial._refractionSphereMacro);
+    this.shaderData.disableMacro(PBRMaterial._refractionPlaneMacro);
+    this.shaderData.disableMacro(PBRMaterial._refractionThinMacro);
+
+    switch (refractionMode) {
+      case RefractionMode.Sphere:
+        this.shaderData.enableMacro(PBRMaterial._refractionSphereMacro);
+        break;
+      case RefractionMode.Plane:
+        this.shaderData.enableMacro(PBRMaterial._refractionPlaneMacro);
+        break;
+      case RefractionMode.Thin:
+        this.shaderData.enableMacro(PBRMaterial._refractionThinMacro);
+        break;
+    }
+  }
+
+  /**
+   * Transmission factor.
+   * @defaultValue `0.0`
+   */
+  get transmission(): number {
+    return this.shaderData.getFloat(PBRMaterial._transmissionProp);
+  }
+
+  set transmission(value: number) {
+    value = Math.max(0, Math.min(1, value));
+    if (!!this.shaderData.getFloat(PBRMaterial._transmissionProp) !== !!value) {
+      this.shaderData.disableMacro(PBRMaterial._transmissionMacro);
+    } else {
+      this.shaderData.enableMacro(PBRMaterial._transmissionMacro);
+    }
+    this.shaderData.setFloat(PBRMaterial._transmissionProp, value);
+  }
+
+  /**
+   * Transmission texture.
+   * @remarks Use red channel, and multiply 'transmission'.
+   */
+  get transmissionTexture(): Texture2D {
+    return <Texture2D>this.shaderData.getTexture(PBRMaterial._transmissionTextureProp);
+  }
+
+  set transmissionTexture(value: Texture2D) {
+    this.shaderData.setTexture(PBRMaterial._transmissionTextureProp, value);
+    if (value) {
+      this.shaderData.enableMacro(PBRMaterial._transmissionTextureMacro);
+    } else {
+      this.shaderData.disableMacro(PBRMaterial._transmissionTextureMacro);
+    }
+  }
+
+  /**
+   * Attenuation color.
+   * @defaultValue `[1,1,1]`
+   */
+  get attenuationColor(): Color {
+    return this.shaderData.getColor(PBRMaterial._attenuationColorProp);
+  }
+
+  set attenuationColor(value: Color) {
+    const attenuationColor = this.shaderData.getColor(PBRMaterial._attenuationColorProp);
+    if (value !== attenuationColor) {
+      attenuationColor.copyFrom(value);
+    }
+  }
+
+  /**
+   * Attenuation distance, greater than 0.0.
+   * @defaultValue `infinity`
+   */
+  get attenuationDistance(): number {
+    return this.shaderData.getFloat(PBRMaterial._attenuationDistanceProp);
+  }
+
+  set attenuationDistance(value: number) {
+    value = Math.max(0, value);
+    this.shaderData.setFloat(PBRMaterial._attenuationDistanceProp, value);
+  }
+
+  /**
+   * Thickness, greater than or equal to 0.0.
+   * @defaultValue `0.0`
+   */
+  get thickness(): number {
+    return this.shaderData.getFloat(PBRMaterial._thicknessProp);
+  }
+
+  set thickness(value: number) {
+    value = Math.max(0, value);
+    if (!!this.shaderData.getFloat(PBRMaterial._thicknessProp) !== !!value) {
+      this.shaderData.disableMacro(PBRMaterial._thicknessMacro);
+    } else {
+      this.shaderData.enableMacro(PBRMaterial._thicknessMacro);
+    }
+    this.shaderData.setFloat(PBRMaterial._thicknessProp, value);
+  }
+
+  /**
+   * Thickness texture.
+   * @remarks Use green channel, and multiply 'thickness', range is 0.0 to 1.0.
+   */
+  get thicknessTexture(): Texture2D {
+    return <Texture2D>this.shaderData.getTexture(PBRMaterial._thicknessTextureProp);
+  }
+
+  set thicknessTexture(value: Texture2D) {
+    this.shaderData.setTexture(PBRMaterial._thicknessTextureProp, value);
+    if (value) {
+      this.shaderData.enableMacro(PBRMaterial._thicknessTextureMacro);
+    } else {
+      this.shaderData.disableMacro(PBRMaterial._thicknessTextureMacro);
+    }
+  }
   /**
    * Create a pbr metallic-roughness workflow material instance.
    * @param engine - Engine to which the material belongs
@@ -304,6 +461,11 @@
     shaderData.setVector4(PBRMaterial._iridescenceInfoProp, new Vector4(0, 1.3, 100, 400));
     const sheenColor = new Color(0, 0, 0);
     shaderData.setColor(PBRMaterial._sheenColorProp, sheenColor);
+    this.refractionMode = RefractionMode.Plane;
+    shaderData.setFloat(PBRMaterial._thicknessProp, 0);
+    shaderData.setFloat(PBRMaterial._attenuationDistanceProp, Infinity);
+    const attenuationColor = new Color(1, 1, 1);
+    shaderData.setColor(PBRMaterial._attenuationColorProp, attenuationColor);
     // @ts-ignore
     this._iridescenceRange._onValueChanged = this._onIridescenceRangeChanged.bind(this);
     // @ts-ignore
@@ -318,6 +480,15 @@
         }
       }
     };
+    // @ts-ignore
+    attenuationColor._onValueChanged = () => {
+      const enableAbsorption = attenuationColor.r + attenuationColor.g + attenuationColor.b > 1;
+      if (enableAbsorption) {
+        this.shaderData.enableMacro(PBRMaterial._absorptionMacro);
+      } else {
+        this.shaderData.disableMacro(PBRMaterial._absorptionMacro);
+      }
+    };
   }
 
   private _onIridescenceRangeChanged(): void {

packages/core/src/material/enums/Refraction.ts

@@ -0,0 +1,11 @@
+/**
+ * Refraction mode.
+ */
+export enum RefractionMode {
+  /** Refraction shape is sphere */
+  Sphere,
+  /** Refraction shape is plane */
+  Plane,
+  /** Refraction shape is thin */
+  Thin
+}

packages/loader/src/gltf/extensions/GLTFExtensionSchema.ts

@@ -188,6 +188,16 @@ export interface IKHRMaterialsIridescence {
   iridescenceThicknessTexture?: ITextureInfo;
 }
 
+/**
+ * Interfaces from the KHR_materials_volume extension
+ */
+export interface IKHRMaterialsVolume {
+  thicknessFactor?: number;
+  thicknessTexture?: ITextureInfo;
+  attenuationDistance?: number;
+  attenuationColor?: number[];
+}
+
 export type GLTFExtensionSchema =
   | IKHRLightsPunctual_Light
   | IKHRMaterialsClearcoat
@@ -207,4 +217,5 @@ export type GLTFExtensionSchema =
   | IKHRXmp_Node
   | IGalaceanAnimation
   | IKHRMaterialsIridescence
+  | IKHRMaterialsVolume
   | Object;

packages/loader/src/gltf/extensions/KHR_materials_transmission.ts

@@ -1,0 +1,23 @@
+import { PBRMaterial, Texture2D } from "@galacean/engine-core";
+import { GLTFMaterialParser } from "../parser/GLTFMaterialParser";
+import { registerGLTFExtension } from "../parser/GLTFParser";
+import { GLTFParserContext, GLTFParserType } from "../parser/GLTFParserContext";
+import { GLTFExtensionMode, GLTFExtensionParser } from "./GLTFExtensionParser";
+import { IKHRMaterialsTransmission } from "./GLTFExtensionSchema";
+
+@registerGLTFExtension("KHR_materials_transmission", GLTFExtensionMode.AdditiveParse)
+class KHR_materials_transmission extends GLTFExtensionParser {
+  override additiveParse(context: GLTFParserContext, material: PBRMaterial, schema: IKHRMaterialsTransmission): void {
+    const { transmissionFactor = 0, transmissionTexture } = schema;
+
+    material.transmission = transmissionFactor;
+
+    if (transmissionTexture) {
+      GLTFMaterialParser._checkOtherTextureTransform(transmissionTexture, "Transmission texture");
+
+      context.get<Texture2D>(GLTFParserType.Texture, transmissionTexture.index).then((texture) => {
+        material.transmissionTexture = texture;
+      });
+    }
+  }
+}

packages/loader/src/gltf/extensions/KHR_materials_volume.ts

@@ -1,0 +1,34 @@
+import { PBRMaterial, Texture2D } from "@galacean/engine-core";
+import { Color } from "@galacean/engine-math";
+import { GLTFMaterialParser } from "../parser/GLTFMaterialParser";
+import { registerGLTFExtension } from "../parser/GLTFParser";
+import { GLTFParserContext, GLTFParserType } from "../parser/GLTFParserContext";
+import { GLTFExtensionMode, GLTFExtensionParser } from "./GLTFExtensionParser";
+import { IKHRMaterialsVolume } from "./GLTFExtensionSchema";
+
+@registerGLTFExtension("KHR_materials_volume", GLTFExtensionMode.AdditiveParse)
+class KHR_materials_volume extends GLTFExtensionParser {
+  override additiveParse(context: GLTFParserContext, material: PBRMaterial, schema: IKHRMaterialsVolume): void {
+    const { thicknessFactor = 0, thicknessTexture, attenuationDistance = Infinity, attenuationColor } = schema;
+
+    material.thickness = thicknessFactor;
+    material.attenuationDistance = attenuationDistance;
+
+    if (attenuationColor) {
+      material.attenuationColor.set(
+        Color.linearToGammaSpace(attenuationColor[0]),
+        Color.linearToGammaSpace(attenuationColor[1]),
+        Color.linearToGammaSpace(attenuationColor[2]),
+        undefined
+      );
+    }
+
+    if (thicknessTexture) {
+      GLTFMaterialParser._checkOtherTextureTransform(thicknessTexture, "Thickness texture");
+
+      context.get<Texture2D>(GLTFParserType.Texture, thicknessTexture.index).then((texture) => {
+        material.thicknessTexture = texture;
+      });
+    }
+  }
+}

packages/shader-shaderlab/src/shaders/PBR.gs

@@ -54,6 +54,15 @@ Shader "PBR.gs" {
         material_SheenTexture("ColorTexture", Texture2D);
         material_SheenRoughnessTexture("RoughnessTexture", Texture2D);
       }
+
+      Header("Refraction"){
+        material_AttenuationColor("AttenuationColor", Color ) = (1, 1, 1, 1);
+        material_AttenuationDistance("AttenuationDistance", Range(0, 1, 0.01)) = 0;
+        material_Transmission("Transmission", Range(0, 1, 0.01)) = 0;
+        material_Thickness("Thickness", Range(0, 5, 0.01)) = 0;
+        material_TransmissionTexture("TransmissionTexture", Texture2D);
+        material_ThicknessTexture("ThicknessTexture", Texture2D);
+      }
 
       Header("Common") {
         material_AlphaCutoff( "AlphaCutoff", Range(0, 1, 0.01) ) = 0;

packages/shader-shaderlab/src/shaders/shadingPBR/BRDF.glsl

@@ -24,6 +24,7 @@ struct SurfaceData{
     float specularAO;
     float f0;
     float opacity;
+    float IOR;
 
     // geometry
     vec3 position;
@@ -64,6 +65,12 @@ struct SurfaceData{
         vec3  sheenColor;
     #endif
 
+    #ifdef MATERIAL_ENABLE_SS_REFRACTION 
+        vec3 attenuationColor;
+        float attenuationDistance;
+        float transmission;
+        float thickness;
+    #endif
 };
 
 

packages/shader-shaderlab/src/shaders/shadingPBR/BTDF.glsl

@@ -0,0 +1,53 @@
+#ifndef BTDF_INCLUDED
+#define BTDF_INCLUDED
+
+#include "Refraction.glsl"
+
+#ifdef MATERIAL_ENABLE_SS_REFRACTION 
+    sampler2D camera_OpaqueTexture;
+    vec3 evaluateRefraction(SurfaceData surfaceData, BRDFData brdfData, vec3 specularColor) {
+        RefractionModel ray;
+        #if defined(REFRACTION_SPHERE) 
+            RefractionModelSphere(-surfaceData.viewDir, surfaceData.position, surfaceData.normal, surfaceData.IOR, surfaceData.thickness, ray);
+        #elif defined(REFRACTION_PLANE)
+            RefractionModelBox(-surfaceData.viewDir, surfaceData.position, surfaceData.normal, surfaceData.IOR, surfaceData.thickness, ray);
+        #elif defined(REFRACTION_THIN)
+            RefractionModelBox(-surfaceData.viewDir, surfaceData.position, surfaceData.normal, surfaceData.IOR, 0.005, ray);
+        #endif
+        //TODO: support cubemap refraction.
+        vec3 refractedRayExit = ray.position;
+
+        // We calculate the screen space position of the refracted point
+        vec4 samplingPositionNDC = camera_ProjMat * camera_ViewMat * vec4( refractedRayExit, 1.0 );
+        vec2 refractionCoords = (samplingPositionNDC.xy / samplingPositionNDC.w) * 0.5 + 0.5;
+
+        // Absorption coefficient from Disney: http://blog.selfshadow.com/publications/s2015-shading-course/burley/s2015_pbs_disney_bsdf_notes.pdf
+       #ifdef MATERIAL_HAS_ABSORPTION
+            vec3 absorptionCoefficient = -log(clamp(surfaceData.attenuationColor, 1e-5f, 1.0f)) / max(1e-5f, surfaceData.attenuationDistance);
+            #ifdef MATERIAL_HAS_THICKNESS
+                vec3 transmittance = min(vec3(1.0), exp(-absorptionCoefficient * ray.dist));
+            #else
+                vec3 transmittance = 1.0 - absorptionCoefficient;
+            #endif
+       #endif
+
+        // Sample the opaque texture to get the transmitted light
+		vec4 getTransmission = texture2D(camera_OpaqueTexture, refractionCoords);
+
+        vec3 refractionTransmitted = getTransmission.rgb;
+        refractionTransmitted *= brdfData.diffuseColor;
+
+        // Use specularFGD as an approximation of the fresnel effect
+        // https://blog.selfshadow.com/publications/s2017-shading-course/imageworks/s2017_pbs_imageworks_slides_v2.pdf
+        vec3 specularFGD = envBRDFApprox(specularColor, surfaceData.roughness, surfaceData.dotNV);
+        refractionTransmitted *= (1.0 - specularFGD);
+
+       #ifdef MATERIAL_HAS_ABSORPTION
+            refractionTransmitted *= transmittance;
+       #endif
+
+    return refractionTransmitted;
+    }
+#endif
+
+#endif