Create Postprocessing_fxaa.html

ValeeraJS · Feb 18, 2024 · f0cbfd7 · f0cbfd7
1 parent bf88b71
commit f0cbfd7
Showing 1 changed file with 103 additions and 0 deletions.
diff --git a/examples/webgpu/Postprocessing_fxaa.html b/examples/webgpu/Postprocessing_fxaa.html
@@ -0,0 +1,103 @@
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+	<link rel="stylesheet" href="./../style/common.css" />
+</head>
+<body>
+	<script src="https://cdn.bootcdn.net/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
+	<script type="text/javascript" src="./../../build/Nova.js"></script>
+	<script>
+		const engine = new Nova.Engine();
+		const world = new Nova.World();
+
+		const geo = Nova.Geometry3Factory.createPlane();
+		const mesh = Nova.EntityFactory.createMesh3(geo);
+
+		const projection = new Nova.PerspectiveProjection();
+		const camera = new Nova.Camera3(projection);
+		camera.position.z = 3;
+
+		const renderSystem = new Nova.WebGPURenderSystem();
+		const renderer = new Nova.WebGPUMesh3Renderer(camera);
+		renderSystem.addRenderer(renderer);
+		world.addSystem(renderSystem).add(mesh);
+
+		const pass = new Nova.WebGPUPostProcessingPass("fxaa", `
+@group(0) @binding(0) var mySampler : sampler;
+@group(0) @binding(1) var myTexture : texture_2d<f32>;
+@group(0) @binding(2) var<uniform> resolution : vec2<f32>;
+
+const FXAA_REDUCE_MIN  = 1.0 / 128.0;
+const FXAA_REDUCE_MUL = 1.0 / 8.0;
+const FXAA_SPAN_MAX = 8.0;
+
+fn fxaa(tex: texture_2d<f32>, sam: sampler, fragCoord: vec2<f32>, resolution: vec2<f32>) -> vec4<f32> {
+	
+	var color = vec4<f32>(0.);
+	var inverseVP = vec2<f32>(1.0 / resolution.x, 1.0 / resolution.y);
+
+	var v_rgbNW = (fragCoord + vec2(-1.0, -1.0)) * inverseVP;
+	var v_rgbNE = (fragCoord + vec2(1.0, -1.0)) * inverseVP;
+	var v_rgbSW = (fragCoord + vec2(-1.0, 1.0)) * inverseVP;
+	var v_rgbSE = (fragCoord + vec2(1.0, 1.0)) * inverseVP;
+	var v_rgbM = vec2(fragCoord * inverseVP);
+
+	var rgbNW = textureSample(tex, sam, v_rgbNW).xyz;
+    var rgbNE = textureSample(tex, sam, v_rgbNE).xyz;
+    var rgbSW = textureSample(tex, sam, v_rgbSW).xyz;
+    var rgbSE = textureSample(tex, sam, v_rgbSE).xyz;
+    var texColor = textureSample(tex, sam, v_rgbM);
+    var rgbM  = texColor.xyz;
+
+	var luma = vec3<f32>(0.299, 0.587, 0.114);
+    var lumaNW = dot(rgbNW, luma);
+    var lumaNE = dot(rgbNE, luma);
+    var lumaSW = dot(rgbSW, luma);
+    var lumaSE = dot(rgbSE, luma);
+    var lumaM  = dot(rgbM,  luma);
+    var lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));
+    var lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));
+
+	var dir = vec2<f32>(0.);
+    dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));
+    dir.y =  ((lumaNW + lumaSW) - (lumaNE + lumaSE));
+    
+    var dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) *
+                          (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);
+    
+    var rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);
+    dir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX),
+              max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX),
+              dir * rcpDirMin)) * inverseVP;
+
+	var rgbA = 0.5 * (
+        textureSample(tex, sam, fragCoord * inverseVP + dir * (1.0 / 3.0 - 0.5)).xyz +
+        textureSample(tex, sam, fragCoord * inverseVP + dir * (2.0 / 3.0 - 0.5)).xyz);
+    var rgbB = rgbA * 0.5 + 0.25 * (
+        textureSample(tex, sam, fragCoord * inverseVP + dir * -0.5).xyz +
+        textureSample(tex, sam, fragCoord * inverseVP + dir * 0.5).xyz);
+
+    var lumaB = dot(rgbB, luma);
+    if ((lumaB < lumaMin) || (lumaB > lumaMax)) {
+		return vec4(rgbA, texColor.a);
+	} else {
+        return vec4(rgbB, texColor.a);
+	}
+}
+
+@fragment
+fn main(@location(0) fragUV : vec2<f32>) -> @location(0) vec4<f32> {
+	var fragCoord = fragUV * resolution; 
+	return fxaa(myTexture, mySampler, fragCoord, resolution);
+}`);
+
+		renderSystem.addPostprocessingPass(pass);
+
+		const gui = new dat.GUI();
+		gui.add(pass, "disabled");
+
+		engine.addTask(() => {
+			world.run();
+			mesh.rotation.y -= 0.01;
+		});
+	</script>
+</body>