feat: add bump map example

src/examples/brdfs/05_bump/fragment.glsl

@@ -0,0 +1,52 @@
+precision highp float;
+
+varying vec3 v_viewSurfacePosition;
+varying vec3 v_viewSurfaceNormal;
+varying vec2 v_uv0;
+
+uniform vec3 pointLightViewPosition;
+uniform vec3 pointLightColor;
+uniform float pointLightRange;
+
+uniform sampler2D albedoMap;
+uniform sampler2D bumpMap;
+uniform sampler2D specularRoughnessMap;
+
+#pragma include <brdfs/common>
+#pragma include <lighting/punctual>
+#pragma include <brdfs/ambient/basic>
+#pragma include <brdfs/diffuse/lambert>
+#pragma include <brdfs/specular/ggx>
+#pragma include <color/spaces/srgb>
+
+void main() {
+
+  vec3 albedo = texture2D( albedoMap, v_uv0 ).rgb;
+  vec3 specular = vec3(1.0);
+  float specularRoughness = texture2D( specularRoughnessMap, v_uv0 ).r;
+  vec3 normal = bumpMapToNormal( bumpMap, v_uv0, 1.0 );
+
+  Surface surface;
+  surface.position = v_viewSurfacePosition;
+  surface.normal = normalize( v_viewSurfaceNormal );
+  surface.viewDirection = normalize( -v_viewSurfacePosition );
+
+  uvToTangentFrame( surface, v_uv0 );
+  perturbSurfaceNormal_TangentSpace( surface, normal );
+
+  PunctualLight punctualLight;
+  punctualLight.position = pointLightViewPosition;
+  punctualLight.color = pointLightColor;
+  punctualLight.range = pointLightRange;
+
+  DirectIllumination directIllumination;
+  pointLightToDirectIllumination( surface, punctualLight, directIllumination );
+
+  vec3 outputColor = vec3(0.0);
+  outputColor += BRDF_Diffuse_Lambert( directIllumination, surface, albedo );
+  outputColor += BRDF_Specular_GGX( directIllumination, surface, specular, specularRoughness );
+
+  gl_FragColor.rgb = linearTosRGB( outputColor );
+  gl_FragColor.a = 1.0;
+
+}

src/examples/brdfs/05_bump/index.ts

@@ -0,0 +1,75 @@
+import { box } from "../../../lib/geometry/primitives/box";
+import { ShaderMaterial } from "../../../lib/materials/ShaderMaterial";
+import { Euler, EulerOrder } from "../../../lib/math/Euler";
+import { Matrix4 } from "../../../lib/math/Matrix4";
+import {
+  makeMatrix4PerspectiveFov,
+  makeMatrix4RotationFromEuler,
+  makeMatrix4Translation,
+} from "../../../lib/math/Matrix4.Functions";
+import { Vector3 } from "../../../lib/math/Vector3";
+import { makeBufferGeometryFromGeometry } from "../../../lib/renderers/webgl/buffers/BufferGeometry";
+import { ClearState } from "../../../lib/renderers/webgl/ClearState";
+import { DepthTestFunc, DepthTestState } from "../../../lib/renderers/webgl/DepthTestState";
+import { AttachmentBits } from "../../../lib/renderers/webgl/framebuffers/AttachmentBits";
+import { makeProgramFromShaderMaterial } from "../../../lib/renderers/webgl/programs/Program";
+import { RenderingContext } from "../../../lib/renderers/webgl/RenderingContext";
+import { makeTexImage2DFromTexture } from "../../../lib/renderers/webgl/textures/TexImage2D";
+import { fetchImage } from "../../../lib/textures/loaders/Image";
+import { Texture } from "../../../lib/textures/Texture";
+import fragmentSourceCode from "./fragment.glsl";
+import vertexSourceCode from "./vertex.glsl";
+
+async function init(): Promise<null> {
+  const geometry = box(0.75, 0.75, 0.75);
+  const material = new ShaderMaterial(vertexSourceCode, fragmentSourceCode);
+  const albedoTexture = new Texture(await fetchImage("/assets/textures/bricks/albedo.jpg"));
+  const bumpTexture = new Texture(await fetchImage("/assets/textures/bricks/bump.jpg"));
+  const specularRoughnessTexture = new Texture(await fetchImage("/assets/textures/bricks/roughness.jpg"));
+
+  const context = new RenderingContext();
+  const canvasFramebuffer = context.canvasFramebuffer;
+  if (canvasFramebuffer.canvas instanceof HTMLCanvasElement) {
+    document.body.appendChild(canvasFramebuffer.canvas);
+  }
+
+  const program = makeProgramFromShaderMaterial(context, material);
+  const uniforms = {
+    // vertices
+    localToWorld: new Matrix4(),
+    worldToView: makeMatrix4Translation(new Vector3(0, 0, -2.0)),
+    viewToScreen: makeMatrix4PerspectiveFov(25, 0.1, 4.0, 1.0, canvasFramebuffer.aspectRatio),
+
+    // lights
+    pointLightViewPosition: new Vector3(0.0, 0, 3.0),
+    pointLightColor: new Vector3(1, 1, 1).multiplyByScalar(30.0),
+    pointLightRange: 12.0,
+
+    // materials
+    albedoMap: makeTexImage2DFromTexture(context, albedoTexture),
+    bumpMap: makeTexImage2DFromTexture(context, bumpTexture),
+    specularRoughnessMap: makeTexImage2DFromTexture(context, specularRoughnessTexture),
+  };
+  const bufferGeometry = makeBufferGeometryFromGeometry(context, geometry);
+  const depthTestState = new DepthTestState(true, DepthTestFunc.Less);
+  const blackClearState = new ClearState(new Vector3(0, 0, 0), 1.0);
+
+  function animate(): void {
+    const now = Date.now();
+    uniforms.localToWorld = makeMatrix4RotationFromEuler(
+      new Euler(0.15 * Math.PI, now * 0.0002, 0, EulerOrder.XZY),
+      uniforms.localToWorld,
+    );
+    uniforms.pointLightViewPosition = new Vector3(Math.cos(now * 0.001) * 3.0, 2.0, 0.5);
+    canvasFramebuffer.clear(AttachmentBits.All, blackClearState);
+    canvasFramebuffer.renderBufferGeometry(program, uniforms, bufferGeometry, depthTestState);
+
+    requestAnimationFrame(animate);
+  }
+
+  animate();
+
+  return null;
+}
+
+init();

src/examples/brdfs/05_bump/vertex.glsl

@@ -0,0 +1,20 @@
+attribute vec3 position;
+attribute vec3 normal;
+attribute vec2 uv;
+
+uniform mat4 localToWorld;
+uniform mat4 worldToView;
+uniform mat4 viewToScreen;
+
+varying vec3 v_viewSurfacePosition;
+varying vec3 v_viewSurfaceNormal;
+varying vec2 v_uv0;
+
+void main() {
+
+  v_viewSurfaceNormal = normalize( ( worldToView * localToWorld * vec4( normalize( position ), 0.0 ) ).xyz );
+  v_viewSurfacePosition = ( worldToView * localToWorld * vec4( position, 1.0 ) ).xyz;
+  v_uv0 = uv;
+  gl_Position = viewToScreen * vec4( v_viewSurfacePosition, 1.0 );
+
+}