feat: improved anisotropic specular highlight example

src/examples/brdfs/03_specularAnisotropic/fragment.glsl

@@ -8,8 +8,6 @@ uniform vec3 pointLightViewPosition;
 uniform vec3 pointLightColor;
 uniform float pointLightRange;
 
-uniform float     specularRoughnessModulator;
-uniform sampler2D specularRoughnessMap;
 uniform float     specularAnisotropicFlowModulator;
 uniform sampler2D specularAnisotropicFlowMap;
 
@@ -21,10 +19,10 @@ uniform sampler2D specularAnisotropicFlowMap;
 
 void main() {
 
-  vec3 albedo = vec3( 1.0 );
-  vec3 specular = vec3( 1.0 );
-  float specularRoughness = specularRoughnessModulator * texture2D( specularRoughnessMap, v_uv0 ).r;
-  vec2 specularAnisotropicFlow = specularAnisotropicFlowModulator * texture2D( specularAnisotropicFlowMap, v_uv0 ).gr * 2.0 - vec2(1.0);
+  vec3 albedo = vec3( 0.4, 0.3, 1.0 );
+  vec3 specular = vec3( 1.0, 0.0, 0.0 );
+  float specularRoughness = 0.25;
+  vec2 specularAnisotropicFlow = specularAnisotropicFlowModulator * texture2D( specularAnisotropicFlowMap, v_uv0 ).rg * 2.0 - vec2(1.0);
 
   Surface surface;
   surface.position = v_viewSurfacePosition;

src/examples/brdfs/03_specularAnisotropic/index.ts

@@ -1,4 +1,4 @@
-import { cylinder } from "../../../lib/geometry/primitives/cylinder";
+import { disk } from "../../../lib/geometry/primitives/disk";
 import { ShaderMaterial } from "../../../lib/materials/ShaderMaterial";
 import { Euler, EulerOrder } from "../../../lib/math/Euler";
 import { Matrix4 } from "../../../lib/math/Matrix4";
@@ -19,35 +19,35 @@ import fragmentSourceCode from "./fragment.glsl";
 import vertexSourceCode from "./vertex.glsl";
 
 async function init(): Promise<null> {
-  const geometry = cylinder(0.5, 1.0, 64);
+  const geometry = disk(0.5, 64);
   const material = new ShaderMaterial(vertexSourceCode, fragmentSourceCode);
-  const anisotropicFlowTexture = new Texture(await fetchImage("/assets/textures/anisotropic/radialLarge.jpg"));
-  const roughnessTexture = new Texture(await fetchImage("/assets/textures/anisotropic/radialGrooves.png"));
+  const anisotropicFlow1Texture = new Texture(
+    await fetchImage("/assets/textures/anisotropic/radialSmallOverlapping.jpg"),
+  );
+  const anisotropicFlow2Texture = new Texture(await fetchImage("/assets/textures/anisotropic/radialLarge.jpg"));
 
   const context = new RenderingContext();
   const canvasFramebuffer = context.canvasFramebuffer;
   if (canvasFramebuffer.canvas instanceof HTMLCanvasElement) {
     document.body.appendChild(canvasFramebuffer.canvas);
   }
-  const anisotropicFlowMap = makeTexImage2DFromTexture(context, anisotropicFlowTexture);
-  const roughnessMap = makeTexImage2DFromTexture(context, roughnessTexture);
+  const anisotropicFlow1Map = makeTexImage2DFromTexture(context, anisotropicFlow1Texture);
+  const anisotropicFlow2Map = makeTexImage2DFromTexture(context, anisotropicFlow2Texture);
   const program = makeProgramFromShaderMaterial(context, material);
   const uniforms = {
     // vertices
     localToWorld: new Matrix4(),
     worldToView: makeMatrix4Translation(new Vector3(0, 0, -1.0)),
-    viewToScreen: makeMatrix4PerspectiveFov(45, 0.1, 4.0, 1.0, canvasFramebuffer.aspectRatio),
+    viewToScreen: makeMatrix4PerspectiveFov(35, 0.1, 4.0, 1.0, canvasFramebuffer.aspectRatio),
 
     // lights
-    pointLightViewPosition: new Vector3(1, 0, -0.5),
-    pointLightColor: new Vector3(1, 1, 1).multiplyByScalar(1.4),
+    pointLightViewPosition: new Vector3(0.5, 0, -0.5),
+    pointLightColor: new Vector3(1, 1, 1).multiplyByScalar(0.3),
     pointLightRange: 6.0,
 
     // materials
-    specularRoughnessModulator: 1.0,
-    specularRoughnessMap: roughnessMap,
     specularAnisotropicFlowModulator: 1.0,
-    specularAnisotropicFlowMap: anisotropicFlowMap,
+    specularAnisotropicFlowMap: anisotropicFlow1Map,
   };
   const bufferGeometry = makeBufferGeometryFromGeometry(context, geometry);
   const depthTestState = new DepthTestState(true, DepthTestFunc.Less);
@@ -57,10 +57,11 @@ async function init(): Promise<null> {
 
     const now = Date.now();
     uniforms.localToWorld = makeMatrix4RotationFromEuler(
-      new Euler(now * 0.00006, now * 0.0002, now * 0.00004, EulerOrder.XZY),
+      new Euler(-0.3 * Math.PI, 0, now * 0.0006, EulerOrder.YXZ),
       uniforms.localToWorld,
     );
-    uniforms.pointLightViewPosition = new Vector3(Math.cos(now * 0.001) * 2.0, 0.3, 0.5);
+    uniforms.specularAnisotropicFlowMap = Math.floor(now / 5000) % 2 === 0 ? anisotropicFlow1Map : anisotropicFlow2Map;
+    // uniforms.pointLightViewPosition = new Vector3(Math.cos(now * 0.001) * 2.0, 0.3, 0.5);
     canvasFramebuffer.renderBufferGeometry(program, uniforms, bufferGeometry, depthTestState);
   }
 

src/lib/shaders/includes/brdfs/specular/ggx.glsl

@@ -66,9 +66,8 @@ void BRDF_Specular_GGX_Multiscattering_Environment( const in Surface surface, co
 */
 
 // based on filament
-void specularAnisotropicBentNormal( inout Surface surface, const float anisotropyLocal, const float roughnessFactor) {
-  vec3  anisotropyDirection = anisotropyLocal >= 0.0 ? surface.tangent : surface.bitangent;
-  vec3  anisotropicTangent  = cross(anisotropyDirection, surface.viewDirection);
-  vec3  anisotropicNormal   = cross(anisotropicTangent, anisotropyDirection);
-  surface.normal = normalize(mix(surface.normal, anisotropicNormal, anisotropyLocal));
+void specularAnisotropicBentNormal( inout Surface surface, const float anisotropyStrength, const float roughnessFactor) {
+  vec3  anisotropicTangent  = cross(surface.tangent, surface.viewDirection);
+  vec3  anisotropicNormal   = cross(anisotropicTangent, surface.tangent);
+  surface.normal = normalize(mix(surface.normal, anisotropicNormal, anisotropyStrength));
 }