depth of field Post effect

.github/workflows/main.yml

@@ -25,3 +25,4 @@ jobs:
           path: dist
 
       - uses: actions/deploy-pages@v4
+        if: github.ref == 'refs/heads/master'

src/index.ts

@@ -1,4 +1,4 @@
-import { mat4 } from "gl-matrix";
+import { mat4, vec3 } from "gl-matrix";
 import {
 	deriveViewMatrix,
 	stepCameraWobble,
@@ -10,7 +10,8 @@ import { stepProgress } from "./logic/progress";
 import { deriveSprites } from "./logic/sprites";
 import { createState } from "./logic/state";
 import { attachUserEvent } from "./logic/userEvent";
-import { createSpriteRenderer } from "./renderer/spriteRenderer";
+import { createDepthOfFieldPassRenderer } from "./renderer/depthOfFieldPass/renderer";
+import { createSpriteRenderer } from "./renderer/sprite/spriteRenderer";
 import { createSpriteAtlas } from "./sprites";
 
 const spritePromise = createSpriteAtlas();
@@ -30,27 +31,54 @@ gl.depthFunc(gl.LESS);
 gl.enable(gl.BLEND);
 gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
-const renderer = createSpriteRenderer(gl);
+const rendererSprite = createSpriteRenderer(gl);
+const rendererBlurPass = createDepthOfFieldPassRenderer(gl);
 
-const set = renderer.createSet();
+const set = rendererSprite.createSet();
 
 //
 //
 
 const state = createState(runnerCount);
-attachUserEvent(state, canvas, gl);
-window.dispatchEvent(new Event("resize"));
-
+attachUserEvent(state);
 computeFinalPlacement(state, message);
-
 const stepPhysic = createPhysicStepper(runnerCount);
 
+//
+//
+
+const resize = () => {
+	const dpr = window.devicePixelRatio ?? 1;
+
+	canvas.width = canvas.clientWidth * dpr;
+	canvas.height = canvas.clientHeight * dpr;
+
+	gl.viewport(0, 0, canvas.width, canvas.height);
+
+	const aspect = canvas.width / canvas.height;
+	mat4.perspective(
+		state.projectionMatrix,
+		Math.PI / 4 / aspect,
+		aspect,
+		0.1,
+		2000,
+	);
+
+	rendererBlurPass.resize();
+};
+
+window.addEventListener("resize", resize);
+resize();
+
+//
+//
+
 spritePromise.then((res) => {
-	renderer.updateSet(set, { colorTexture: res.texture });
+	rendererSprite.updateSet(set, { colorTexture: res.texture });
 
-	gl.useProgram(renderer._internal.program);
+	gl.useProgram(rendererSprite._internal.program);
 
-	gl.uniform1i(renderer._internal.u_colorTexture, 0);
+	gl.uniform1i(rendererSprite._internal.u_colorTexture, 0);
 	gl.bindVertexArray(set.vao);
 
 	gl.activeTexture(gl.TEXTURE0);
@@ -71,27 +99,23 @@ spritePromise.then((res) => {
 
 		//
 
-		renderer.updateSet(set, state);
+		rendererSprite.updateSet(set, state);
 
 		//
 
-		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-		//
-		// usually the API is meant to call renderer.draw(state.projectionMatrix,state.viewMatrix,[set])
-		// but since there is only oone program let's save some gl instructions
-		gl.uniformMatrix4fv(
-			renderer._internal.u_viewMatrix,
-			false,
-			state.viewMatrix,
+		const l = vec3.length(state.camera.eye);
+		const aspect = canvas.width / canvas.height;
+		rendererBlurPass.withEffect(
+			{
+				near: 0.1,
+				far: 2000,
+				depthFocus: l,
+				depthFocusSpread: l / 0.6 / aspect,
+			},
+			() => {
+				rendererSprite.draw(state.projectionMatrix, state.viewMatrix, [set]);
+			},
 		);
-		gl.uniformMatrix4fv(
-			renderer._internal.u_projectionMatrix,
-			false,
-			state.projectionMatrix,
-		);
-
-		gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, set.numInstances);
 
 		//
 

src/logic/sprites.ts

@@ -47,7 +47,7 @@ export const deriveSprites = (state: State, coords: Record<sprite, Box[]>) => {
 		// i++;
 	}
 
-	// ground
+	// pointer on ground
 	{
 		const tr = state.objectTransforms[i];
 		vec3.set(v, state.pointerOnGround[0], state.pointerOnGround[1], 0);
@@ -64,6 +64,24 @@ export const deriveSprites = (state: State, coords: Record<sprite, Box[]>) => {
 		i++;
 	}
 
+	// ground
+	{
+		const tr = state.objectTransforms[i];
+		quat.identity(q);
+		vec3.set(s, 200, 200, 200);
+		vec3.set(v, 0, 0, -0.05);
+		mat4.fromRotationTranslationScale(tr, q, v, s);
+		const [min, max] = coords[sprite.whiteSquare][0];
+		state.spriteBoxes[i * 4 + 0] = min[0];
+		state.spriteBoxes[i * 4 + 1] = min[1];
+		state.spriteBoxes[i * 4 + 2] = max[0];
+		state.spriteBoxes[i * 4 + 3] = max[1];
+
+		state.hues[i] = 0;
+
+		i++;
+	}
+
 	// characters
 	for (const runner of state.runners) {
 		const tr = state.objectTransforms[i];

src/logic/userEvent.ts

@@ -1,11 +1,7 @@
 import { mat4 } from "gl-matrix";
 import { State } from "./state";
 
-export const attachUserEvent = (
-	state: State,
-	canvas: HTMLCanvasElement,
-	gl: WebGL2RenderingContext,
-) => {
+export const attachUserEvent = (state: State) => {
 	window.addEventListener("mousemove", (e) => {
 		state.pointer.x = e.clientX / window.innerWidth;
 		state.pointer.y = e.clientY / window.innerHeight;
@@ -49,24 +45,4 @@ export const attachUserEvent = (
 		},
 		{ passive: true },
 	);
-
-	const resize = () => {
-		const dpr = window.devicePixelRatio ?? 1;
-
-		canvas.width = canvas.clientWidth * dpr;
-		canvas.height = canvas.clientHeight * dpr;
-
-		gl.viewport(0, 0, canvas.width, canvas.height);
-
-		const aspect = canvas.width / canvas.height;
-		mat4.perspective(
-			state.projectionMatrix,
-			Math.PI / 4 / aspect,
-			aspect,
-			0.1,
-			2000,
-		);
-	};
-
-	window.addEventListener("resize", resize);
 };