@woosh/meep-engine 3.55.0 → 3.57.0

package/src/shade/playground/foliage_wind/FoliageRigOverlay.js

@@ -0,0 +1,491 @@
+import { assert } from "../../../core/assert.js";
+import { BufferResourceDescriptor } from "../../device/graph/BufferResourceDescriptor.js";
+import { ColorTargetState } from "../../descriptor/pipeline/render/ColorTargetState.js";
+import { RenderPipelineDescriptor } from "../../descriptor/pipeline/render/RenderPipelineDescriptor.js";
+import { TextureViewDescriptor } from "../../descriptor/texture/TextureViewDescriptor.js";
+import { ANIMATION_DATABASE_SPEC } from "../../renderer/animation/ANIMATION_DATABASE_SPEC.js";
+import { GPU_DATABASE_NULL } from "../../renderer/buffer/table/GPU_DATABASE_NULL.js";
+import { CAMERA_UNIFORM_STRUCT } from "../../renderer/camera/CAMERA_UNIFORM_STRUCT.js";
+import { DEFAULT_DEPTH_TEXTURE_VIEW } from "../../renderer/depth/DEFAULT_DEPTH_TEXTURE_VIEW.js";
+import { FramePhase } from "../../renderer/extension/FramePhase.js";
+import { RenderExtension } from "../../renderer/extension/RenderExtension.js";
+import { SceneColor } from "../../renderer/extension/SceneColor.js";
+import { ViewTextures } from "../../renderer/extension/ViewTextures.js";
+import { chunk_scene_database_access } from "../../renderer/scene/chunk_scene_database_access.js";
+import { NODE3D_SCENE_ID } from "../../renderer/scene/NODE3D_STRUCT.js";
+import { chunk_lut_turbo } from "../../renderer/shader/chunk/color/lut/chunk_lut_turbo.js";
+import { chunk_mat4_extract_position } from "../../renderer/shader/chunk/geometry/mat4/chunk_mat4_extract_position.js";
+import { CodeChunk } from "../../renderer/shader/compiler/CodeChunk.js";
+import { ComputeShader } from "../../renderer/shader/ComputeShader.js";
+import { graph_compute_pass } from "../../renderer/shader/graph/compute/graph_compute_pass.js";
+import { ShaderResourceSetDescriptor } from "../../renderer/shader/resource/ShaderResourceSetDescriptor.js";
+import { ShaderDescriptor } from "../../renderer/shader/ShaderDescriptor.js";
+import { atomic_u32, f32, u32, vec4f } from "../../renderer/shader/type/WEBGPU_WGSL_PRIMITIVE_TYPES.js";
+import { WebGPUArray } from "../../renderer/shader/type/WebGPUArray.js";
+import { WebGPUStruct } from "../../renderer/shader/type/WebGPUStruct.js";
+
+const JOINT_TABLE = ANIMATION_DATABASE_SPEC.get('animation_foliage_joints');
+
+const GATHER_WORKGROUP_SIZE = 64;
+
+const PG_PREFIX = JOINT_TABLE.page_iterator_symbol_prefix(GATHER_WORKGROUP_SIZE, false);
+
+/**
+ * Vertices per bone: a quad along the bone, then a quad for the joint at its tip.
+ */
+const VERTICES_PER_BONE = 12;
+
+/**
+ * One drawn bone, from the joint's parent to the joint, in world space.
+ */
+const BONE_SEGMENT = WebGPUStruct.from({
+    /**
+     * xyz: the parent's world position. w: 1 when the joint has a parent to draw a bone from.
+     */
+    head: vec4f,
+    /**
+     * xyz: the joint's world position. w: its deflection as a fraction of `max_angle`, or -1 for an
+     * immobile anchor.
+     */
+    tail: vec4f,
+}, "FoliageRigOverlayBone");
+
+const gather_resources = new ShaderResourceSetDescriptor();
+
+gather_resources.createGroup()
+    .addStorageBuffer('scene_database', WebGPUArray.from(u32), false)
+    .addStorageBuffer('animation_database', WebGPUArray.from(u32), false)
+    .addStorageBuffer('bones', WebGPUArray.from(BONE_SEGMENT), true)
+    .addStorageBuffer('draw_args', WebGPUArray.from(atomic_u32), true);
+
+/**
+ * Walks `animation_foliage_joints` the way the wind pass does and appends one bone per live joint,
+ * reading the `global` the hierarchy pass published this frame — so what is drawn is the pose the
+ * mesh is skinned by, not the rest pose. The bone count lands in the indirect draw's instance count.
+ */
+const shader_gather = ComputeShader.from({
+    label: "playground/foliage rig overlay / gather",
+    resources: gather_resources,
+    body: CodeChunk.from(
+        //language=WGSL
+        `
+@compute @workgroup_size(${GATHER_WORKGROUP_SIZE}, 1, 1)
+fn main(
+    @builtin(workgroup_id) wg_id: vec3<u32>,
+    @builtin(local_invocation_index) local_id: u32,
+) {
+    if wg_id.x == 0u && local_id == 0u {
+        // the rest of the args are cleared with the buffer
+        atomicStore(&draw_args[0], ${VERTICES_PER_BONE}u);
+    }
+
+    if !${PG_PREFIX}_setup(&animation_database, wg_id.x, local_id) {
+        return;
+    }
+
+    let slot_in_page = ${PG_PREFIX}_slot_in_page(local_id);
+
+    if slot_in_page >= ${PG_PREFIX}_ELEMENTS_PER_PAGE {
+        return;
+    }
+    if !${PG_PREFIX}_is_occupied(slot_in_page) {
+        return;
+    }
+
+    let joint = ${PG_PREFIX}_read(&animation_database, slot_in_page);
+
+    if joint.node == ${GPU_DATABASE_NULL}u {
+        return;
+    }
+
+    let node = scene_read_node(&scene_database, joint.node);
+    let tail = mat4_extract_position(node.global);
+
+    var head = vec4f(tail, 0.0);
+
+    if node.parent != ${NODE3D_SCENE_ID}u {
+        head = vec4f(mat4_extract_position(scene_read_node(&scene_database, node.parent).global), 1.0);
+    }
+
+    let deflection = select(
+        -1.0,
+        length(joint.angular_displacement) / joint.max_angle,
+        joint.compliance > 0.0
+    );
+
+    let index = atomicAdd(&draw_args[1], 1u);
+
+    bones[index] = FoliageRigOverlayBone(head, vec4f(tail, deflection));
+}
+`, [
+            JOINT_TABLE.chunk_iterate(GATHER_WORKGROUP_SIZE, false),
+            chunk_scene_database_access,
+            chunk_mat4_extract_position,
+            BONE_SEGMENT.declaration_chunk,
+        ]
+    ),
+});
+
+const DRAW_SETTINGS = WebGPUStruct.from({
+    /**
+     * Half the width of a bone, in pixels of the target.
+     */
+    half_width: f32,
+    /**
+     * Radius of a joint, in pixels of the target.
+     */
+    joint_radius: f32,
+    /**
+     * How opaque a bone is where the scene is in front of it.
+     */
+    hidden_opacity: f32,
+    /**
+     * Size of the target drawn into, in pixels — after the upscale, so not the depth's.
+     */
+    target_width: f32,
+    target_height: f32,
+}, "FoliageRigOverlaySettings");
+
+const draw_resources = new ShaderResourceSetDescriptor();
+
+draw_resources.setImmediate('settings', DRAW_SETTINGS);
+
+draw_resources.createGroup()
+    .addUniform('camera', CAMERA_UNIFORM_STRUCT)
+    .addStorageBuffer('bones', WebGPUArray.from(BONE_SEGMENT), false)
+    .addTexture('scene_depth', 'depth');
+
+const draw_descriptor = ShaderDescriptor.from({
+    label: "playground/foliage rig overlay / draw",
+    resources: draw_resources,
+    body: CodeChunk.from(
+        //language=WGSL
+        `
+struct FoliageRigOverlayVertex {
+    @builtin(position) clip: vec4f,
+    @location(0) color: vec3f,
+    // across the bone in [-1, 1], or the offset from the joint's centre in radii
+    @location(1) local: vec2f,
+    @location(2) @interpolate(flat) is_joint: u32,
+}
+
+const QUAD_CORNERS = array<vec2f, 6>(
+    vec2f(0.0, -1.0), vec2f(1.0, -1.0), vec2f(1.0, 1.0),
+    vec2f(0.0, -1.0), vec2f(1.0, 1.0), vec2f(0.0, 1.0),
+);
+
+// clip w below which an end is behind the eye; a bone crossing it is cut there
+const NEAR_W: f32 = 1e-3;
+
+fn bone_color(deflection: f32) -> vec3f {
+    if deflection < 0.0 {
+        // an anchor the wind does not move
+        return vec3f(0.75);
+    }
+
+    // blue at rest, red at the joint's deflection limit
+    return turbo(0.1 + 0.9 * saturate(deflection));
+}
+
+@vertex
+fn vs_main(@builtin(vertex_index) vi: u32, @builtin(instance_index) ii: u32) -> FoliageRigOverlayVertex {
+    let bone = bones[ii];
+    let pixel_to_ndc = 2.0 / vec2f(settings.target_width, settings.target_height);
+
+    var out: FoliageRigOverlayVertex;
+
+    out.color = bone_color(bone.tail.w);
+
+    var tail = camera.view_projection_matrix * vec4f(bone.tail.xyz, 1.0);
+
+    if vi >= 6u {
+        // the joint: a square around the tip, cut to a disc in the fragment stage
+        let corner = QUAD_CORNERS[vi - 6u] * vec2f(2.0, 1.0) - vec2f(1.0, 0.0);
+
+        out.is_joint = 1u;
+        out.local = corner;
+        out.color = mix(out.color, vec3f(1.0), 0.45);
+
+        if tail.w < NEAR_W {
+            out.clip = vec4f(0.0, 0.0, -1.0, 1.0);
+            return out;
+        }
+
+        out.clip = vec4f(tail.xy + corner * settings.joint_radius * pixel_to_ndc * tail.w, tail.zw);
+
+        return out;
+    }
+
+    out.is_joint = 0u;
+
+    var head = camera.view_projection_matrix * vec4f(bone.head.xyz, 1.0);
+
+    if bone.head.w == 0.0 || (head.w < NEAR_W && tail.w < NEAR_W) {
+        // no bone to draw: every vertex on one point is a triangle with no area
+        out.clip = vec4f(0.0, 0.0, -1.0, 1.0);
+        return out;
+    }
+
+    if head.w < NEAR_W {
+        head = mix(tail, head, (tail.w - NEAR_W) / (tail.w - head.w));
+    } else if tail.w < NEAR_W {
+        tail = mix(head, tail, (head.w - NEAR_W) / (head.w - tail.w));
+    }
+
+    let corner = QUAD_CORNERS[vi];
+
+    let head_px = head.xy / head.w / pixel_to_ndc;
+    let tail_px = tail.xy / tail.w / pixel_to_ndc;
+    let along = tail_px - head_px;
+    let length_px = length(along);
+    let direction = select(vec2f(1.0, 0.0), along / length_px, length_px > 1e-4);
+    let across = vec2f(-direction.y, direction.x);
+
+    let end = select(head, tail, corner.x > 0.5);
+
+    out.local = vec2f(corner.y, 0.0);
+    out.clip = vec4f(end.xy + across * corner.y * settings.half_width * pixel_to_ndc * end.w, end.zw);
+
+    return out;
+}
+
+@fragment
+fn fs_main(in: FoliageRigOverlayVertex) -> @location(0) vec4f {
+    var edge: f32;
+    var half_width: f32;
+
+    if in.is_joint != 0u {
+        edge = length(in.local);
+        half_width = settings.joint_radius;
+    } else {
+        edge = abs(in.local.x);
+        half_width = settings.half_width;
+    }
+
+    // a pixel of falloff at the rim
+    let coverage = saturate((1.0 - edge) * half_width);
+
+    if coverage <= 0.0 {
+        discard;
+    }
+
+    // the depth is at the internal resolution, the target past the upscale
+    let depth_size = textureDimensions(scene_depth);
+    let uv = in.clip.xy / vec2f(settings.target_width, settings.target_height);
+    let scene_z = textureLoad(scene_depth, min(vec2u(uv * vec2f(depth_size)), depth_size - 1u), 0);
+
+    // reverse-Z: the scene is in front where its depth is the greater
+    let opacity = select(1.0, settings.hidden_opacity, scene_z > in.clip.z);
+
+    return vec4f(in.color, coverage * opacity);
+}
+`, [
+            CAMERA_UNIFORM_STRUCT.declaration_chunk,
+            BONE_SEGMENT.declaration_chunk,
+            chunk_lut_turbo,
+        ]
+    ),
+});
+
+const BLEND = {
+    color: {
+        srcFactor: "src-alpha",
+        dstFactor: "one-minus-src-alpha",
+        operation: "add",
+    },
+    alpha: {
+        srcFactor: "one",
+        dstFactor: "one-minus-src-alpha",
+        operation: "add",
+    },
+};
+
+const COLOR_VIEW = TextureViewDescriptor.from({
+    mipLevelCount: 1,
+    baseMipLevel: 0
+});
+
+/**
+ * @param {GPUTextureFormat} color_format
+ * @returns {RenderPipelineDescriptor}
+ */
+function create_draw_pipeline(color_format) {
+    const code = draw_descriptor.source;
+
+    return RenderPipelineDescriptor.from({
+        label: "playground/foliage rig overlay / draw",
+        layout: draw_resources.generatePipelineLayout(GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT),
+        vertex: { module: { code }, entryPoint: "vs_main" },
+        fragment: {
+            module: { code },
+            entryPoint: "fs_main",
+            targets: [ColorTargetState.from({ format: color_format, blend: BLEND })],
+        },
+        primitive: { topology: "triangle-list", cullMode: "none" },
+    });
+}
+
+/**
+ * The playground's view of the foliage wind rigs: every bone from its parent to its joint, coloured
+ * blue at rest through red at the joint's deflection limit, grey for an anchor the wind does not
+ * move. Drawn over everything, faded where the bark and leaves are in front of it.
+ *
+ * Past tone mapping and TAA, so the colours are the ones written and a bone a pixel or two wide is
+ * not smeared by the history.
+ *
+ * The bones are the GPU's: the wind pass deflects them and the hierarchy pass composes them on the
+ * device, and the CPU never holds the pose. So the overlay reads `transforms` where the skinning
+ * reads it, gathering the live joints into an indirect draw rather than drawing a pose the CPU would
+ * have to guess at.
+ */
+export class FoliageRigOverlay extends RenderExtension {
+    name = 'playground/foliage rig overlay';
+    phase = FramePhase.BeforePresent;
+    relative_order = 1000;
+
+    /**
+     * @type {boolean}
+     */
+    enabled = false;
+
+    /**
+     * Width of a bone, in CSS pixels.
+     * @type {number}
+     */
+    line_width = 2;
+
+    /**
+     * Diameter of a joint, in CSS pixels.
+     * @type {number}
+     */
+    joint_size = 6;
+
+    /**
+     * @type {import("../../../core/geom/Vector2.js").Vector2}
+     */
+    #css_size;
+
+    /**
+     * @type {RenderPipelineDescriptor|null}
+     */
+    #pipeline = null;
+
+    /**
+     * @type {string}
+     */
+    #pipeline_format = "";
+
+    /**
+     * @param {import("../../../core/geom/Vector2.js").Vector2} css_size size of the viewport in CSS
+     * pixels, so the widths hold at any device pixel ratio and render scale
+     */
+    constructor(css_size) {
+        super();
+
+        assert.defined(css_size, 'css_size');
+
+        this.#css_size = css_size;
+    }
+
+    /**
+     * @param {import("../../renderer/extension/FrameContext.js").FrameContext} frame
+     */
+    record(frame) {
+        if (!this.enabled) {
+            return;
+        }
+
+        const scene = frame.view.scene;
+        const database = scene.animation_manager.database;
+        const joints = database.get('animation_foliage_joints');
+
+        const group_count = joints.dispatch_group_count(GATHER_WORKGROUP_SIZE);
+
+        if (group_count === 0) {
+            return;
+        }
+
+        const graph = frame.graph;
+
+        const gathered = graph_compute_pass({
+            graph,
+            shader: shader_gather,
+            bindings: {
+                scene_database: scene.scene_database_buffer,
+                animation_database: database.buffer,
+                // every slot the walk can visit is below the capacity
+                bones: BufferResourceDescriptor.from(
+                    joints.element_capacity * BONE_SEGMENT.size,
+                    GPUBufferUsage.STORAGE
+                ),
+                draw_args: BufferResourceDescriptor.from(
+                    4 * Uint32Array.BYTES_PER_ELEMENT,
+                    GPUBufferUsage.STORAGE | GPUBufferUsage.INDIRECT,
+                    0,
+                    4 * Uint32Array.BYTES_PER_ELEMENT
+                ),
+            },
+            group_count: [group_count, 1, 1],
+        });
+
+        const scale = frame.resolution[1] / Math.max(1, this.#css_size.y);
+
+        const settings = {
+            half_width: 0.5 * this.line_width * scale,
+            joint_radius: 0.5 * this.joint_size * scale,
+            hidden_opacity: 0.35,
+            target_width: frame.resolution[0],
+            target_height: frame.resolution[1],
+        };
+
+        const camera = frame.view.camera.gpu_buffer;
+
+        const scene_color = frame.get(SceneColor);
+        const view_textures = frame.get(ViewTextures);
+
+        const data = {};
+
+        const pass = graph.add("playground/foliage rig overlay / draw", data, (data, resources, context) => {
+            const encoder = context.encoder;
+            const color_texture = resources.get(data.color);
+
+            const render_pass = encoder.constructRenderPass({
+                pipeline: this.#obtain_pipeline(color_texture.descriptor.format),
+                bindings: draw_resources.generateBindings({
+                    camera,
+                    bones: resources.get(data.bones),
+                    scene_depth: resources.get(data.depth).obtainView(DEFAULT_DEPTH_TEXTURE_VIEW),
+                }, encoder),
+                immediate: encoder.writeImmediate(draw_resources, { settings }),
+                colorAttachments: [{
+                    view: color_texture.obtainView(COLOR_VIEW),
+                    loadOp: "load",
+                    storeOp: "store",
+                }],
+            });
+
+            render_pass.drawIndirect(resources.get(data.draw_args), 0);
+            render_pass.end();
+        });
+
+        data.bones = pass.read(gathered.bones);
+        data.draw_args = pass.read(gathered.draw_args);
+        data.depth = pass.read(view_textures.depth);
+        data.color = pass.write(pass.read(scene_color.color));
+
+        scene_color.color = data.color;
+    }
+
+    /**
+     * @param {GPUTextureFormat} format
+     * @returns {RenderPipelineDescriptor}
+     */
+    #obtain_pipeline(format) {
+        if (this.#pipeline === null || this.#pipeline_format !== format) {
+            this.#pipeline = create_draw_pipeline(format);
+            this.#pipeline_format = format;
+        }
+
+        return this.#pipeline;
+    }
+}

package/src/shade/playground/foliage_wind/foliage_world.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"foliage_world.d.ts","sourceRoot":"","sources":["../../../../../src/shade/playground/foliage_wind/foliage_world.js"],"names":[],"mappings":"AAoDA;;;;;;GAMG;AACH,2DAJW,MAAM,iBACN,MAAM,GACJ,OAAO,4CAA4C,EAAE,eAAe,CA4DhF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,iDAfW,OAAO,6CAA6C,EAAE,cAAc,SACpE,OAAO,+BAA+B,EAAE,KAAK;IAER,IAAI,GAAzC,UAAU,GAAC,OAAO;IACO,MAAM,GAA/B,MAAM;IACmB,IAAI,GAA7B,MAAM;IACmB,GAAG,GAA5B,MAAM;IACoB,UAAU,GAApC,OAAO;IACkB,SAAS,GAAlC,MAAM;IACmB,UAAU,GAAnC,MAAM;IACmB,YAAY,GAArC,MAAM;IACmB,UAAU,GAAnC,MAAM;IACmB,UAAU,GAAnC,MAAM;IACoB,cAAc,GAAxC,OAAO;;;;;;;;;;;;;;;;;cAoJS,MAAM;kBAAY,OAAO,oDAAoD,EAAE,cAAc;mBAAa,OAAO,mDAAmD,EAAE,YAAY;gBAAU,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAoK7L,QAAQ,GAAzB,MAAM;QACW,cAAc,GAA/B,MAAM;QACW,MAAM,GAAvB,MAAM;QACW,QAAQ,GAAzB,MAAM;;eAsCN,MAAM;;;;;;;;;;;;;;;;;;GAwGpB;AArjBD;;;GAGG;AACH,yCAFU,MAAM,EAAE,CAYhB;8BA3C4B,sCAAsC;uCAD7B,+CAA+C;oCAmBlD,+DAA+D;qCAC9D,gEAAgE;oCACjE,+DAA+D"}
+{"version":3,"file":"foliage_world.d.ts","sourceRoot":"","sources":["../../../../../src/shade/playground/foliage_wind/foliage_world.js"],"names":[],"mappings":"AAoDA;;;;;;GAMG;AACH,2DAJW,MAAM,iBACN,MAAM,GACJ,OAAO,4CAA4C,EAAE,eAAe,CA4DhF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,iDAfW,OAAO,6CAA6C,EAAE,cAAc,SACpE,OAAO,+BAA+B,EAAE,KAAK;IAER,IAAI,GAAzC,UAAU,GAAC,OAAO;IACO,MAAM,GAA/B,MAAM;IACmB,IAAI,GAA7B,MAAM;IACmB,GAAG,GAA5B,MAAM;IACoB,UAAU,GAApC,OAAO;IACkB,SAAS,GAAlC,MAAM;IACmB,UAAU,GAAnC,MAAM;IACmB,YAAY,GAArC,MAAM;IACmB,UAAU,GAAnC,MAAM;IACmB,UAAU,GAAnC,MAAM;IACoB,cAAc,GAAxC,OAAO;;;;;;;;;;;;;;;;;cAoJS,MAAM;kBAAY,OAAO,oDAAoD,EAAE,cAAc;mBAAa,OAAO,mDAAmD,EAAE,YAAY;gBAAU,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAkK7L,QAAQ,GAAzB,MAAM;QACW,cAAc,GAA/B,MAAM;QACW,MAAM,GAAvB,MAAM;QACW,QAAQ,GAAzB,MAAM;;eAsCN,MAAM;;;;;;;;;;;;;;;;;;GAwGpB;AAnjBD;;;GAGG;AACH,yCAFU,MAAM,EAAE,CAYhB;8BA3C4B,sCAAsC;uCAD7B,+CAA+C;oCAmBlD,+DAA+D;qCAC9D,gEAAgE;oCACjE,+DAA+D"}