Why does the alpha channel flicker?

[junglie85]

I'm trying to figure out why the alpha channel is flickering on the wizard texture (yellow background is a 1x1 white texture coloured yellow)?

It was absolutely fine when I was rendering in draw call order. But I want to try and group by texture/bind group, so I assign a z-index when the draw call is made and calculate a z position based on z-index / total-z-indices in the shader. Given that all other objects are rendering correctly, I'm assuming the issue lies with the depth setup.

Depth texture/view:

let depth_texture = device.create_texture(&TextureDescriptor {
    label: Some("froggy.texture.depth"),
    size: Extent3d {
        width: config.width,
        height: config.height,
        depth_or_array_layers: 1,
    },
    mip_level_count: 1,
    sample_count: 1,
    dimension: TextureDimension::D2,
    format: DEPTH_STENCIL_FORMAT,
    usage: TextureUsages::RENDER_ATTACHMENT,
});

depth_texture.create_view(&TextureViewDescriptor::default())

Depth stencil state:

Some(DepthStencilState {
    format: TextureFormat::Depth32Float,
    depth_write_enabled: true,
    depth_compare: CompareFunction::GreaterEqual,
    stencil: StencilState::default(),
    bias: DepthBiasState::default(),
})

Depth stencil attachment:

Some(RenderPassDepthStencilAttachment {
    view: &depth_texture_view,
    depth_ops: Some(Operations {
        load: LoadOp::Clear(0.0),
        store: true,
    }),
    stencil_ops: None,
})

Beyond this, I don't know where to look for the possible cause. Can anyone help point me at the problem?

[kpreid]

When I had a flickering render, it turned out to be missing assignments in the vertex shader. Can you post your shader code?

[junglie85]

Thanks. What do you mean by missing assignments?

This is for my sprite shader. I have a similar one for drawing geometry.

fn translation_matrix(position: vec2<f32>) -> mat4x4<f32> {
    return mat4x4<f32>(
        vec4<f32>(1.0, 0.0, 0.0, 0.0),
        vec4<f32>(0.0, 1.0, 0.0, 0.0),
        vec4<f32>(0.0, 0.0, 1.0, 0.0),
        vec4<f32>(position.x, position.y, 0.0, 1.0),
    );
}

fn rotation_matrix(angle: f32, origin: vec2<f32>) -> mat4x4<f32> {
    let add_origin = translation_matrix(origin);
    let remove_origin = translation_matrix(-origin);
    let raw_rotation = mat4x4<f32>(
        vec4<f32>(cos(angle), -sin(angle), 0.0, 0.0),
        vec4<f32>(sin(angle), cos(angle), 0.0, 0.0),
        vec4<f32>(0.0, 0.0, 1.0, 0.0),
        vec4<f32>(0.0, 0.0, 0.0, 1.0),
    );

    return add_origin * raw_rotation * remove_origin;
}

fn scale_matrix(scale: vec2<f32>) -> mat4x4<f32> {
    return mat4x4<f32>(
        vec4<f32>(scale.x, 0.0, 0.0, 0.0),
        vec4<f32>(0.0, scale.y, 0.0, 0.0),
        vec4<f32>(0.0, 0.0, 1.0, 0.0),
        vec4<f32>(0.0, 0.0, 0.0, 1.0),
    );
}

fn transformation_matrix(origin: vec2<f32>, position: vec2<f32>, angle: f32, scale: vec2<f32>) -> mat4x4<f32> {
    return translation_matrix(position - origin) * rotation_matrix(angle, origin) * scale_matrix(scale);
}

// Vertex

struct Camera {
    view: mat4x4<f32>,
    projection: mat4x4<f32>,
};

struct Globals {
    camera: Camera,
    pixel_size: u32,
    pixels_per_unit: u32,
    total_primitives: u32,
    _pad1: u32,
};

struct SpriteDescriptor {
    position: vec2<f32>,
    scale: vec2<f32>,
    origin: vec2<f32>,
    rotation: f32,
    z_index: u32,
}

@group(0) @binding(0)
var<uniform> globals: Globals;
@group(1) @binding(0)
var<uniform> descriptors: array<SpriteDescriptor, 1024>; // 256 * 4

struct VsIn {
    @location(0) coords: vec2<f32>,
    @location(1) tex_coords: vec2<f32>,
    @location(2) color: vec4<f32>,
    @builtin(vertex_index) vertex_index: u32,
};

struct VsOut {
    @builtin(position) position: vec4<f32>,
    @location(0) color: vec4<f32>,
    @location(1) tex_coords: vec2<f32>,
};

@vertex
fn vs_main(in: VsIn) -> VsOut {
    let descriptor = descriptors[in.vertex_index];

    let pixel_size = f32(globals.pixel_size);
    let pixels_per_unit = f32(globals.pixels_per_unit);

    let origin = descriptor.origin * pixel_size * pixels_per_unit;
    let position = descriptor.position * pixel_size * pixels_per_unit;
    let scale = descriptor.scale * pixel_size * pixels_per_unit;
    
    let model = transformation_matrix(origin, position, radians(descriptor.rotation), scale);
    let camera = globals.camera;
    let z_index = f32(descriptor.z_index) / f32(globals.total_primitives);
    let position = camera.projection * camera.view * model * vec4<f32>(in.coords, z_index, 1.0);

    return VsOut(position, in.color, in.tex_coords);
}

// Fragment

struct FsIn {
    @location(0) color: vec4<f32>,
    @location(1) tex_coords: vec2<f32>,
};


struct FsOut {
    @location(0) color: vec4<f32>,
};

@group(2) @binding(0)
var texture_sampler: sampler;
@group(2) @binding(1)
var texture: texture_2d<f32>;

@fragment
fn fs_main(in: FsIn) -> FsOut {
    let color = textureSample(texture, texture_sampler, in.tex_coords) * in.color;

    return FsOut(color);
}

[junglie85]

I've tracked the error down by reimplementing my solution over more granular steps. The issue seems to be when I use a loop in the render pass to draw a range for a given bind group (all my sprite data is contained in a single set of vbo, ibo and ubo):

let (range1, group1) = &sprite_render_groups[0];
pass.set_bind_group(2, *group1, &[]);
pass.draw_indexed(range1.clone(), 0, 0..1);

let (range2, group2) = &sprite_render_groups[1];
pass.set_bind_group(2, *group2, &[]);
pass.draw_indexed(range2.clone(), 0, 0..1);

This is obviously unrolled, but the full loop has the same problem. The other couple of additions to the code are a hash map to store a texture_id to an owned (texture_view, bind_group) and a hash map of texture_id to (&sprite, z_index). This get's turned into a vec of (range, &bind_group) with the latter being looked up from the textures hash map. I only have 3 sprites - surely this cannot be causing such a significant delay?

Why would this cause flickering, or is it symptomatic of some other issue, like my main loop taking too long for the vsync period (which would be sad with only 3 sprites)?

[cwfitzgerald]

Heh I think I've found your problem.

Your rendering order is non-determistic because the iteration order of a hash map is non-determistic (every hashmap is seeded with a random number, so iteration is different every time).

When the sprite is rendered first, it writes the depth value for all of its pixels, including the transparent ones. Then the yellow background is drawn, which sees that the sprite is already in front of it, and doesn't draw anything for the entire square the sprite is in.

If you have binary transparentcy (either 0 alpha or full alpha), you can do an alpha test in the shader to allow arbitrary drawing order:

if (my_pixel.a <= 0.5) {
    discard;
}

If you don't have binary transparentcy, you must draw all sprites from back to front, as alpha blending isn't a communitive operation.

[junglie85]

Ah, that makes total sense, and why there are passes just for transparency! Completely slipped my mind, so thank you. I was about to come up with a solution that would have appeared correct until some point in the future when this same problem would have occurred.

I think I'll stick to drawing back to front, so that I can have partial transparency. I'll have to go back to my shape drawing code too, as that'll have the same problem.

How expensive is it to keep setting pipelines and bind groups in a render pass?

Ideally, I'd like to do something like the following:

pass.set_pipeline(shape_pipeline);
pass.set_bind_group(all_shapes_bind_group);
pass.set_vertex_buffer(shape_vbo);
pass.set_index_buffer(shape_ibo);
pass.draw_indexed(all_shapes);

pass.set_pipeline(sprite_pipeline);
pass.set_bind_group(all_sprites_bind_group);
pass.set_vertex_buffer(sprite_vbo);
pass.set_index_buffer(sprite_ibo);

for (specific_sprite_bind_group, all_sprites) {
    pass.set_bind_group(specific_sprite_bind_group);
    pass.draw_indexed(all_sprites);
}

But am I actually going to have to do something that's a bit more interleaved, like:

pass.set_pipeline(shape_pipeline);
pass.set_bind_group(all_shapes_bind_group);
pass.set_vertex_buffer(shape_vbo);
pass.set_index_buffer(shape_ibo);
pass.draw_indexed(shape_a);

pass.set_pipeline(sprite_pipeline);
pass.set_bind_group(all_sprites_bind_group);
pass.set_bind_group(specific_sprite_bind_group);
pass.set_vertex_buffer(sprite_vbo);
pass.set_index_buffer(sprite_ibo);
pass.draw_indexed(sprite_a);

pass.set_pipeline(shape_pipeline);
pass.set_bind_group(all_shapes_bind_group);
pass.set_vertex_buffer(shape_vbo);
pass.set_index_buffer(shape_ibo);
pass.draw_indexed(shape_b);

pass.set_pipeline(sprite_pipeline);
pass.set_bind_group(all_sprites_bind_group);
pass.set_bind_group(specific_sprite_bind_group);
pass.set_vertex_buffer(sprite_vbo);
pass.set_index_buffer(sprite_ibo);
pass.draw_indexed(sprite_b);

[junglie85]

@cwfitzgerald if you want to add your comment as an answer, I'll happily accept it.