From eef76effe3a83f8c0f4c91b49e40a5bfb562e317 Mon Sep 17 00:00:00 2001 From: Diego Arias Date: Fri, 16 Sep 2022 15:56:16 -0300 Subject: [PATCH] examples: add pixel post processing effect example --- build.zig | 1 + examples/pixel-post-process/cube_mesh.zig | 49 +++ examples/pixel-post-process/frag.wgsl | 8 + examples/pixel-post-process/main.zig | 435 +++++++++++++++++++ examples/pixel-post-process/normal_frag.wgsl | 6 + examples/pixel-post-process/pixel_frag.wgsl | 72 +++ examples/pixel-post-process/pixel_vert.wgsl | 14 + examples/pixel-post-process/quad_mesh.zig | 13 + examples/pixel-post-process/vert.wgsl | 20 + 9 files changed, 618 insertions(+) create mode 100644 examples/pixel-post-process/cube_mesh.zig create mode 100644 examples/pixel-post-process/frag.wgsl create mode 100644 examples/pixel-post-process/main.zig create mode 100644 examples/pixel-post-process/normal_frag.wgsl create mode 100644 examples/pixel-post-process/pixel_frag.wgsl create mode 100644 examples/pixel-post-process/pixel_vert.wgsl create mode 100644 examples/pixel-post-process/quad_mesh.zig create mode 100644 examples/pixel-post-process/vert.wgsl diff --git a/build.zig b/build.zig index 7aaf14d0..dc976ab7 100644 --- a/build.zig +++ b/build.zig @@ -78,6 +78,7 @@ pub fn build(b: *std.build.Builder) void { .{ .name = "triangle-msaa" }, .{ .name = "boids" }, .{ .name = "rotating-cube", .packages = &[_]Pkg{Packages.zmath} }, + .{ .name = "pixel-post-process", .packages = &[_]Pkg{Packages.zmath} }, .{ .name = "two-cubes", .packages = &[_]Pkg{Packages.zmath} }, .{ .name = "instanced-cube", .packages = &[_]Pkg{Packages.zmath} }, .{ .name = "advanced-gen-texture-light", .packages = &[_]Pkg{Packages.zmath} }, diff --git a/examples/pixel-post-process/cube_mesh.zig b/examples/pixel-post-process/cube_mesh.zig new file mode 100644 index 00000000..98c2578e --- /dev/null +++ b/examples/pixel-post-process/cube_mesh.zig @@ -0,0 +1,49 @@ +pub const Vertex = struct { + pos: @Vector(3, f32), + normal: @Vector(3, f32), + uv: @Vector(2, f32), +}; + +pub const vertices = [_]Vertex{ + .{ .pos = .{ 1, -1, 1 }, .normal = .{ 0, -1, 0 }, .uv = .{ 1, 1 } }, + .{ .pos = .{ -1, -1, 1 }, .normal = .{ 0, -1, 0 }, .uv = .{ 0, 1 } }, + .{ .pos = .{ -1, -1, -1 }, .normal = .{ 0, -1, 0 }, .uv = .{ 0, 0 } }, + .{ .pos = .{ 1, -1, -1 }, .normal = .{ 0, -1, 0 }, .uv = .{ 1, 0 } }, + .{ .pos = .{ 1, -1, 1 }, .normal = .{ 0, -1, 0 }, .uv = .{ 1, 1 } }, + .{ .pos = .{ -1, -1, -1 }, .normal = .{ 0, -1, 0 }, .uv = .{ 0, 0 } }, + + .{ .pos = .{ 1, 1, 1 }, .normal = .{ 1, 0, 0 }, .uv = .{ 1, 1 } }, + .{ .pos = .{ 1, -1, 1 }, .normal = .{ 1, 0, 0 }, .uv = .{ 0, 1 } }, + .{ .pos = .{ 1, -1, -1 }, .normal = .{ 1, 0, 0 }, .uv = .{ 0, 0 } }, + .{ .pos = .{ 1, 1, -1 }, .normal = .{ 1, 0, 0 }, .uv = .{ 1, 0 } }, + .{ .pos = .{ 1, 1, 1 }, .normal = .{ 1, 0, 0 }, .uv = .{ 1, 1 } }, + .{ .pos = .{ 1, -1, -1 }, .normal = .{ 1, 0, 0 }, .uv = .{ 0, 0 } }, + + .{ .pos = .{ -1, 1, 1 }, .normal = .{ 0, 1, 0 }, .uv = .{ 1, 1 } }, + .{ .pos = .{ 1, 1, 1 }, .normal = .{ 0, 1, 0 }, .uv = .{ 0, 1 } }, + .{ .pos = .{ 1, 1, -1 }, .normal = .{ 0, 1, 0 }, .uv = .{ 0, 0 } }, + .{ .pos = .{ -1, 1, -1 }, .normal = .{ 0, 1, 0 }, .uv = .{ 1, 0 } }, + .{ .pos = .{ -1, 1, 1 }, .normal = .{ 0, 1, 0 }, .uv = .{ 1, 1 } }, + .{ .pos = .{ 1, 1, -1 }, .normal = .{ 0, 1, 0 }, .uv = .{ 0, 0 } }, + + .{ .pos = .{ -1, -1, 1 }, .normal = .{ -1, 0, 0 }, .uv = .{ 1, 1 } }, + .{ .pos = .{ -1, 1, 1 }, .normal = .{ -1, 0, 0 }, .uv = .{ 0, 1 } }, + .{ .pos = .{ -1, 1, -1 }, .normal = .{ -1, 0, 0 }, .uv = .{ 0, 0 } }, + .{ .pos = .{ -1, -1, -1 }, .normal = .{ -1, 0, 0 }, .uv = .{ 1, 0 } }, + .{ .pos = .{ -1, -1, 1 }, .normal = .{ -1, 0, 0 }, .uv = .{ 1, 1 } }, + .{ .pos = .{ -1, 1, -1 }, .normal = .{ -1, 0, 0 }, .uv = .{ 0, 0 } }, + + .{ .pos = .{ 1, 1, 1 }, .normal = .{ 0, 0, 1 }, .uv = .{ 1, 1 } }, + .{ .pos = .{ -1, 1, 1 }, .normal = .{ 0, 0, 1 }, .uv = .{ 0, 1 } }, + .{ .pos = .{ -1, -1, 1 }, .normal = .{ 0, 0, 1 }, .uv = .{ 0, 0 } }, + .{ .pos = .{ -1, -1, 1 }, .normal = .{ 0, 0, 1 }, .uv = .{ 0, 0 } }, + .{ .pos = .{ 1, -1, 1 }, .normal = .{ 0, 0, 1 }, .uv = .{ 1, 0 } }, + .{ .pos = .{ 1, 1, 1 }, .normal = .{ 0, 0, 1 }, .uv = .{ 1, 1 } }, + + .{ .pos = .{ 1, -1, -1 }, .normal = .{ 0, 0, -1 }, .uv = .{ 1, 1 } }, + .{ .pos = .{ -1, -1, -1 }, .normal = .{ 0, 0, -1 }, .uv = .{ 0, 1 } }, + .{ .pos = .{ -1, 1, -1 }, .normal = .{ 0, 0, -1 }, .uv = .{ 0, 0 } }, + .{ .pos = .{ 1, 1, -1 }, .normal = .{ 0, 0, -1 }, .uv = .{ 1, 0 } }, + .{ .pos = .{ 1, -1, -1 }, .normal = .{ 0, 0, -1 }, .uv = .{ 1, 1 } }, + .{ .pos = .{ -1, 1, -1 }, .normal = .{ 0, 0, -1 }, .uv = .{ 0, 0 } }, +}; diff --git a/examples/pixel-post-process/frag.wgsl b/examples/pixel-post-process/frag.wgsl new file mode 100644 index 00000000..0a0cc2d5 --- /dev/null +++ b/examples/pixel-post-process/frag.wgsl @@ -0,0 +1,8 @@ +@fragment fn main( + @location(0) normal: vec3, + @location(1) uv: vec2, +) -> @location(0) vec4 { + var color = floor((uv * 0.5 + 0.25) * 32) / 32; + return vec4(color, 1, 1); +} + diff --git a/examples/pixel-post-process/main.zig b/examples/pixel-post-process/main.zig new file mode 100644 index 00000000..4d814de2 --- /dev/null +++ b/examples/pixel-post-process/main.zig @@ -0,0 +1,435 @@ +const std = @import("std"); +const mach = @import("mach"); +const gpu = @import("gpu"); +const glfw = @import("glfw"); +const zm = @import("zmath"); + +const Vertex = @import("cube_mesh.zig").Vertex; +const vertices = @import("cube_mesh.zig").vertices; +const Quad = @import("quad_mesh.zig").Quad; +const quad = @import("quad_mesh.zig").quad; + +pub const App = @This(); + +const pixel_size = 8; + +const UniformBufferObject = struct { + mat: zm.Mat, +}; +const PostUniformBufferObject = struct { + width: u32, + height: u32, + pixel_size: u32 = pixel_size, +}; + +timer: mach.Timer = undefined, +queue: *gpu.Queue, + +pipeline: *gpu.RenderPipeline, +normal_pipeline: *gpu.RenderPipeline, +vertex_buffer: *gpu.Buffer, +uniform_buffer: *gpu.Buffer, +bind_group: *gpu.BindGroup, + +post_pipeline: *gpu.RenderPipeline, +post_vertex_buffer: *gpu.Buffer, +post_uniform_buffer: *gpu.Buffer, +post_bind_group: *gpu.BindGroup, + +draw_texture_view: *gpu.TextureView, +depth_texture_view: *gpu.TextureView, +normal_texture_view: *gpu.TextureView, + +pub fn init(app: *App, core: *mach.Core) !void { + app.timer = try mach.Timer.start(); + + app.create_render_textures(core); + app.create_draw_pipeline(core); + app.create_post_pipeline(core); +} + +pub fn deinit(app: *App, _: *mach.Core) void { + app.cleanup(); +} + +pub fn resize(app: *App, core: *mach.Core, _: u32, _: u32) !void { + app.cleanup(); + app.create_render_textures(core); + app.create_draw_pipeline(core); + app.create_post_pipeline(core); +} + +pub fn update(app: *App, core: *mach.Core) !void { + while (core.pollEvent()) |event| { + switch (event) { + .key_press => |ev| { + if (ev.key == .space) + core.setShouldClose(true); + }, + else => {}, + } + } + + const encoder = core.device.createCommandEncoder(null); + encoder.writeBuffer(app.post_uniform_buffer, 0, &[_]PostUniformBufferObject{ + PostUniformBufferObject{ + .width = core.getWindowSize().width, + .height = core.getWindowSize().height, + }, + }); + + { + const time = app.timer.read() * 0.5; + const model = zm.mul(zm.rotationX(time * (std.math.pi / 2.0)), zm.rotationZ(time * (std.math.pi / 2.0))); + const view = zm.lookAtRh( + zm.f32x4(0, 5, 2, 1), + zm.f32x4(0, 0, 0, 1), + zm.f32x4(0, 0, 1, 0), + ); + const proj = zm.perspectiveFovRh( + (std.math.pi / 4.0), + @intToFloat(f32, core.current_desc.width) / @intToFloat(f32, core.current_desc.height), + 0.1, + 10, + ); + const mvp = zm.mul(zm.mul(model, view), proj); + const ubo = UniformBufferObject{ + .mat = zm.transpose(mvp), + }; + encoder.writeBuffer(app.uniform_buffer, 0, &[_]UniformBufferObject{ubo}); + } + + { + // render scene to downscaled texture + const color_attachment = gpu.RenderPassColorAttachment{ + .view = app.draw_texture_view, + .clear_value = std.mem.zeroes(gpu.Color), + .load_op = .clear, + .store_op = .store, + }; + const render_pass_info = gpu.RenderPassDescriptor.init(.{ + .color_attachments = &.{color_attachment}, + .depth_stencil_attachment = &gpu.RenderPassDepthStencilAttachment{ + .view = app.depth_texture_view, + .depth_load_op = .clear, + .depth_store_op = .store, + .depth_clear_value = 1.0, + }, + }); + + const pass = encoder.beginRenderPass(&render_pass_info); + pass.setPipeline(app.pipeline); + pass.setVertexBuffer(0, app.vertex_buffer, 0, @sizeOf(Vertex) * vertices.len); + pass.setBindGroup(0, app.bind_group, &.{0}); + pass.draw(vertices.len, 1, 0, 0); + pass.end(); + pass.release(); + } + + { + // render scene normals to texture + const normal_color_attachment = gpu.RenderPassColorAttachment{ + .view = app.normal_texture_view, + .clear_value = .{ .r = 0.5, .b = 0.5, .g = 0.5, .a = 1.0 }, + .load_op = .clear, + .store_op = .store, + }; + const normal_render_pass_info = gpu.RenderPassDescriptor.init(.{ + .color_attachments = &.{normal_color_attachment}, + }); + + const normal_pass = encoder.beginRenderPass(&normal_render_pass_info); + normal_pass.setPipeline(app.normal_pipeline); + normal_pass.setVertexBuffer(0, app.vertex_buffer, 0, @sizeOf(Vertex) * vertices.len); + normal_pass.setBindGroup(0, app.bind_group, &.{0}); + normal_pass.draw(vertices.len, 1, 0, 0); + normal_pass.end(); + normal_pass.release(); + } + + const back_buffer_view = core.swap_chain.?.getCurrentTextureView(); + { + // render to swap_chain using previous passes + const post_color_attachment = gpu.RenderPassColorAttachment{ + .view = back_buffer_view, + .clear_value = std.mem.zeroes(gpu.Color), + .load_op = .clear, + .store_op = .store, + }; + const post_render_pass_info = gpu.RenderPassDescriptor.init(.{ + .color_attachments = &.{post_color_attachment}, + }); + + const draw_pass = encoder.beginRenderPass(&post_render_pass_info); + draw_pass.setPipeline(app.post_pipeline); + draw_pass.setVertexBuffer(0, app.post_vertex_buffer, 0, @sizeOf(Quad) * quad.len); + draw_pass.setBindGroup(0, app.post_bind_group, &.{0}); + draw_pass.draw(quad.len, 1, 0, 0); + draw_pass.end(); + draw_pass.release(); + } + + var command = encoder.finish(null); + encoder.release(); + + app.queue.submit(&.{command}); + command.release(); + core.swap_chain.?.present(); + back_buffer_view.release(); +} + +fn cleanup(app: *App) void { + app.vertex_buffer.release(); + app.uniform_buffer.release(); + app.bind_group.release(); + + app.post_vertex_buffer.release(); + app.post_uniform_buffer.release(); + app.post_bind_group.release(); + + app.draw_texture_view.release(); + app.depth_texture_view.release(); + app.normal_texture_view.release(); +} + +fn create_render_textures(app: *App, core: *mach.Core) void { + const draw_texture_desc = gpu.Texture.Descriptor.init(.{ + .size = .{ .width = core.getWindowSize().width / pixel_size, .height = core.getWindowSize().height / pixel_size }, + .format = .bgra8_unorm, + .usage = .{ .texture_binding = true, .copy_dst = true, .render_attachment = true }, + }); + const draw_texture = core.device.createTexture(&draw_texture_desc); + app.draw_texture_view = draw_texture.createView(null); + + const depth_texture_desc = gpu.Texture.Descriptor.init(.{ + .size = .{ .width = core.getWindowSize().width / pixel_size, .height = core.getWindowSize().height / pixel_size }, + .format = .depth32_float, + .usage = .{ .texture_binding = true, .copy_dst = true, .render_attachment = true }, + }); + const depth_texture = core.device.createTexture(&depth_texture_desc); + app.depth_texture_view = depth_texture.createView(null); + + const normal_texture_desc = gpu.Texture.Descriptor.init(.{ + .size = .{ .width = core.getWindowSize().width / pixel_size, .height = core.getWindowSize().height / pixel_size }, + .format = .bgra8_unorm, + .usage = .{ .texture_binding = true, .copy_dst = true, .render_attachment = true }, + }); + const normal_texture = core.device.createTexture(&normal_texture_desc); + app.normal_texture_view = normal_texture.createView(null); +} + +fn create_draw_pipeline(app: *App, core: *mach.Core) void { + const vs_module = core.device.createShaderModuleWGSL("vert.wgsl", @embedFile("vert.wgsl")); + const vertex_attributes = [_]gpu.VertexAttribute{ + .{ .format = .float32x3, .offset = @offsetOf(Vertex, "pos"), .shader_location = 0 }, + .{ .format = .float32x3, .offset = @offsetOf(Vertex, "normal"), .shader_location = 1 }, + .{ .format = .float32x2, .offset = @offsetOf(Vertex, "uv"), .shader_location = 2 }, + }; + const vertex_buffer_layout = gpu.VertexBufferLayout.init(.{ + .array_stride = @sizeOf(Vertex), + .step_mode = .vertex, + .attributes = &vertex_attributes, + }); + const vertex = gpu.VertexState.init(.{ + .module = vs_module, + .entry_point = "main", + .buffers = &.{vertex_buffer_layout}, + }); + + const fs_module = core.device.createShaderModuleWGSL("frag.wgsl", @embedFile("frag.wgsl")); + const blend = gpu.BlendState{}; + const color_target = gpu.ColorTargetState{ + .format = core.swap_chain_format, + .blend = &blend, + .write_mask = gpu.ColorWriteMaskFlags.all, + }; + const fragment = gpu.FragmentState.init(.{ + .module = fs_module, + .entry_point = "main", + .targets = &.{color_target}, + }); + + const bgle = gpu.BindGroupLayout.Entry.buffer(0, .{ .vertex = true }, .uniform, true, 0); + const bgl = core.device.createBindGroupLayout( + &gpu.BindGroupLayout.Descriptor.init(.{ + .entries = &.{bgle}, + }), + ); + + const bind_group_layouts = [_]*gpu.BindGroupLayout{bgl}; + const pipeline_layout = core.device.createPipelineLayout( + &gpu.PipelineLayout.Descriptor.init(.{ + .bind_group_layouts = &bind_group_layouts, + }), + ); + + const vertex_buffer = core.device.createBuffer(&.{ + .usage = .{ .vertex = true }, + .size = @sizeOf(Vertex) * vertices.len, + .mapped_at_creation = true, + }); + var vertex_mapped = vertex_buffer.getMappedRange(Vertex, 0, vertices.len); + std.mem.copy(Vertex, vertex_mapped.?, vertices[0..]); + vertex_buffer.unmap(); + + const uniform_buffer = core.device.createBuffer(&.{ + .usage = .{ .copy_dst = true, .uniform = true }, + .size = @sizeOf(UniformBufferObject), + .mapped_at_creation = false, + }); + const bind_group = core.device.createBindGroup( + &gpu.BindGroup.Descriptor.init(.{ + .layout = bgl, + .entries = &.{ + gpu.BindGroup.Entry.buffer(0, uniform_buffer, 0, @sizeOf(UniformBufferObject)), + }, + }), + ); + + const pipeline_descriptor = gpu.RenderPipeline.Descriptor{ + .fragment = &fragment, + .layout = pipeline_layout, + .vertex = vertex, + .primitive = .{ + .cull_mode = .back, + }, + .depth_stencil = &gpu.DepthStencilState{ + .format = .depth32_float, + .depth_write_enabled = true, + .depth_compare = .less, + }, + }; + + { + // "same" pipeline, different fragment shader to create a texture with normal information + const normal_fs_module = core.device.createShaderModuleWGSL("normal_frag.wgsl", @embedFile("normal_frag.wgsl")); + const normal_fragment = gpu.FragmentState.init(.{ + .module = normal_fs_module, + .entry_point = "main", + .targets = &.{color_target}, + }); + const normal_pipeline_descriptor = gpu.RenderPipeline.Descriptor{ + .fragment = &normal_fragment, + .layout = pipeline_layout, + .vertex = vertex, + .primitive = .{ + .cull_mode = .back, + }, + }; + app.normal_pipeline = core.device.createRenderPipeline(&normal_pipeline_descriptor); + + normal_fs_module.release(); + } + + app.pipeline = core.device.createRenderPipeline(&pipeline_descriptor); + app.queue = core.device.getQueue(); + app.vertex_buffer = vertex_buffer; + app.uniform_buffer = uniform_buffer; + app.bind_group = bind_group; + + vs_module.release(); + fs_module.release(); + pipeline_layout.release(); + bgl.release(); +} + +fn create_post_pipeline(app: *App, core: *mach.Core) void { + const vs_module = core.device.createShaderModuleWGSL("pixel_vert.wgsl", @embedFile("pixel_vert.wgsl")); + const vertex_attributes = [_]gpu.VertexAttribute{ + .{ .format = .float32x3, .offset = @offsetOf(Quad, "pos"), .shader_location = 0 }, + .{ .format = .float32x2, .offset = @offsetOf(Quad, "uv"), .shader_location = 1 }, + }; + const vertex_buffer_layout = gpu.VertexBufferLayout.init(.{ + .array_stride = @sizeOf(Quad), + .step_mode = .vertex, + .attributes = &vertex_attributes, + }); + const vertex = gpu.VertexState.init(.{ + .module = vs_module, + .entry_point = "main", + .buffers = &.{vertex_buffer_layout}, + }); + + const fs_module = core.device.createShaderModuleWGSL("pixel_frag.wgsl", @embedFile("pixel_frag.wgsl")); + const blend = gpu.BlendState{}; + const color_target = gpu.ColorTargetState{ + .format = core.swap_chain_format, + .blend = &blend, + .write_mask = gpu.ColorWriteMaskFlags.all, + }; + const fragment = gpu.FragmentState.init(.{ + .module = fs_module, + .entry_point = "main", + .targets = &.{color_target}, + }); + + const bgl = core.device.createBindGroupLayout( + &gpu.BindGroupLayout.Descriptor.init(.{ + .entries = &.{ + gpu.BindGroupLayout.Entry.texture(0, .{ .fragment = true }, .float, .dimension_2d, false), + gpu.BindGroupLayout.Entry.sampler(1, .{ .fragment = true }, .filtering), + gpu.BindGroupLayout.Entry.texture(2, .{ .fragment = true }, .depth, .dimension_2d, false), + gpu.BindGroupLayout.Entry.sampler(3, .{ .fragment = true }, .filtering), + gpu.BindGroupLayout.Entry.texture(4, .{ .fragment = true }, .float, .dimension_2d, false), + gpu.BindGroupLayout.Entry.sampler(5, .{ .fragment = true }, .filtering), + gpu.BindGroupLayout.Entry.buffer(6, .{ .fragment = true }, .uniform, true, 0), + }, + }), + ); + + const bind_group_layouts = [_]*gpu.BindGroupLayout{bgl}; + const pipeline_layout = core.device.createPipelineLayout(&gpu.PipelineLayout.Descriptor.init(.{ + .bind_group_layouts = &bind_group_layouts, + })); + + const vertex_buffer = core.device.createBuffer(&.{ + .usage = .{ .vertex = true }, + .size = @sizeOf(Quad) * quad.len, + .mapped_at_creation = true, + }); + var vertex_mapped = vertex_buffer.getMappedRange(Quad, 0, quad.len); + std.mem.copy(Quad, vertex_mapped.?, quad[0..]); + vertex_buffer.unmap(); + + const draw_sampler = core.device.createSampler(null); + const depth_sampler = core.device.createSampler(null); + const normal_sampler = core.device.createSampler(null); + const uniform_buffer = core.device.createBuffer(&.{ + .usage = .{ .copy_dst = true, .uniform = true }, + .size = @sizeOf(PostUniformBufferObject), + .mapped_at_creation = false, + }); + const bind_group = core.device.createBindGroup( + &gpu.BindGroup.Descriptor.init(.{ + .layout = bgl, + .entries = &[_]gpu.BindGroup.Entry{ + gpu.BindGroup.Entry.textureView(0, app.draw_texture_view), + gpu.BindGroup.Entry.sampler(1, draw_sampler), + gpu.BindGroup.Entry.textureView(2, app.depth_texture_view), + gpu.BindGroup.Entry.sampler(3, depth_sampler), + gpu.BindGroup.Entry.textureView(4, app.normal_texture_view), + gpu.BindGroup.Entry.sampler(5, normal_sampler), + gpu.BindGroup.Entry.buffer(6, uniform_buffer, 0, @sizeOf(PostUniformBufferObject)), + }, + }), + ); + + const pipeline_descriptor = gpu.RenderPipeline.Descriptor{ + .fragment = &fragment, + .layout = pipeline_layout, + .vertex = vertex, + .primitive = .{ + .cull_mode = .back, + }, + }; + + app.post_pipeline = core.device.createRenderPipeline(&pipeline_descriptor); + app.post_vertex_buffer = vertex_buffer; + app.post_uniform_buffer = uniform_buffer; + app.post_bind_group = bind_group; + + vs_module.release(); + fs_module.release(); + pipeline_layout.release(); + bgl.release(); +} diff --git a/examples/pixel-post-process/normal_frag.wgsl b/examples/pixel-post-process/normal_frag.wgsl new file mode 100644 index 00000000..28f7407c --- /dev/null +++ b/examples/pixel-post-process/normal_frag.wgsl @@ -0,0 +1,6 @@ +@fragment fn main( + @location(0) normal: vec3, + @location(1) uv: vec2, +) -> @location(0) vec4 { + return vec4(normal / 2 + 0.5, 1.0); +} diff --git a/examples/pixel-post-process/pixel_frag.wgsl b/examples/pixel-post-process/pixel_frag.wgsl new file mode 100644 index 00000000..e2d23d8f --- /dev/null +++ b/examples/pixel-post-process/pixel_frag.wgsl @@ -0,0 +1,72 @@ +@group(0) @binding(0) +var draw_texture: texture_2d; +@group(0) @binding(1) +var draw_texture_sampler: sampler; + +@group(0) @binding(2) +var depth_texture: texture_depth_2d; +@group(0) @binding(3) +var depth_texture_sampler: sampler; + +@group(0) @binding(4) +var normal_texture: texture_2d; +@group(0) @binding(5) +var normal_texture_sampler: sampler; + +struct View { + @location(0) width: u32, + @location(1) height: u32, + @location(2) pixel_size: u32, +} +@group(0) @binding(6) +var view: View; + +fn sample_depth(uv: vec2, x: f32, y: f32) -> f32 { + return textureSample( + depth_texture, + depth_texture_sampler, + uv + vec2(x * f32(view.pixel_size) / f32(view.width), y * f32(view.pixel_size) / f32(view.height)) + ); +} + +fn sample_normal(uv: vec2, x: f32, y: f32) -> vec3 { + return textureSample( + normal_texture, + normal_texture_sampler, + uv + vec2(x * f32(view.pixel_size) / f32(view.width), y * f32(view.pixel_size) / f32(view.height)) + ).xyz; +} + +fn normal_indicator(uv: vec2, x: f32, y: f32) -> f32 { + var depth_diff = sample_depth(uv, 0, 0) - sample_depth(uv, x, y); + if (depth_diff > 0) { + // only sample normals from closest pixel + return 0; + } + return distance(sample_normal(uv, 0, 0), sample_normal(uv, x, y)); +} + +@fragment fn main( + @builtin(position) position: vec4, + @location(0) uv: vec2 +) -> @location(0) vec4 { + var depth = sample_depth(uv, 0, 0); + var depth_diff: f32 = 0; + depth_diff += abs(depth - sample_depth(uv, -1, 0)); + depth_diff += abs(depth - sample_depth(uv, 1, 0)); + depth_diff += abs(depth - sample_depth(uv, 0, -1)); + depth_diff += abs(depth - sample_depth(uv, 0, 1)); + + var normal_diff: f32 = 0; + normal_diff += normal_indicator(uv, -1, 0); + normal_diff += normal_indicator(uv, 1, 0); + normal_diff += normal_indicator(uv, 0, -1); + normal_diff += normal_indicator(uv, 0, 1); + + var color = textureSample(draw_texture, draw_texture_sampler, uv); + if (depth_diff > 0.007) { // magic number from testing + return color * 0.7; + } + // add instead of multiply so really dark pixels get brighter + return color + (vec4(1) * step(0.1, normal_diff) * 0.7); +} diff --git a/examples/pixel-post-process/pixel_vert.wgsl b/examples/pixel-post-process/pixel_vert.wgsl new file mode 100644 index 00000000..734f629e --- /dev/null +++ b/examples/pixel-post-process/pixel_vert.wgsl @@ -0,0 +1,14 @@ +struct VertexOut { + @builtin(position) position_clip: vec4, + @location(0) uv: vec2 +} + +@vertex fn main( + @location(0) position: vec3, + @location(1) uv: vec2 +) -> VertexOut { + var output : VertexOut; + output.position_clip = vec4(position.xy, 0.0, 1.0); + output.uv = uv; + return output; +} diff --git a/examples/pixel-post-process/quad_mesh.zig b/examples/pixel-post-process/quad_mesh.zig new file mode 100644 index 00000000..f3828303 --- /dev/null +++ b/examples/pixel-post-process/quad_mesh.zig @@ -0,0 +1,13 @@ +pub const Quad = struct { + pos: @Vector(3, f32), + uv: @Vector(2, f32), +}; + +pub const quad = [_]Quad{ + .{ .pos = .{ -1.0, 1.0, 0.0 }, .uv = .{ 0, 1 } }, + .{ .pos = .{ -1.0, -1.0, 0.0 }, .uv = .{ 0, 0 } }, + .{ .pos = .{ 1.0, 1.0, 0.0 }, .uv = .{ 1, 1 } }, + .{ .pos = .{ 1.0, 1.0, 0.0 }, .uv = .{ 1, 1 } }, + .{ .pos = .{ -1.0, -1.0, 0.0 }, .uv = .{ 0, 0 } }, + .{ .pos = .{ 1.0, -1.0, 0.0 }, .uv = .{ 1, 0 } }, +}; diff --git a/examples/pixel-post-process/vert.wgsl b/examples/pixel-post-process/vert.wgsl new file mode 100644 index 00000000..01c1e107 --- /dev/null +++ b/examples/pixel-post-process/vert.wgsl @@ -0,0 +1,20 @@ +@group(0) @binding(0) var ubo: mat4x4; + +struct VertexOut { + @builtin(position) position_clip: vec4, + @location(0) normal: vec3, + @location(1) uv: vec2, +} + +@vertex fn main( + @location(0) position: vec3, + @location(1) normal: vec3, + @location(2) uv: vec2 +) -> VertexOut { + var output: VertexOut; + output.position_clip = vec4(position, 1) * ubo; + output.normal = (vec4(normal, 0) * ubo).xyz; + output.uv = uv; + return output; +} +