How to render to a specific rectangle on the surface texture?

[tversteeg]

I want to achieve the following with rendering 2 passes:

1. Render everything to a texture A (with green background).
2. Render A onto the surface texture (with blue background) in a specific rectangle.

The first pass succeeds, and I have a texture that's rendered:
.
Now I assume I need to create a viewport to render texture A onto the surface with render_pass_2.set_viewport(..), which does seem to render only the part inside the viewport, but it doesn't scale the image or changes the coordinates at all. The result is exactly the same as calling render_pass_2.set_scissor_rect(..) with the same arguments.

Am I misunderstanding how RenderPass::set_viewport works, or is this a bug? If I am misunderstanding it, should I scale and translate the image to fit the viewport myself?

Shader for rendering the second pass

---

// Vertex shader

@group(0) @binding(0)
var input_tex: texture_2d<f32>;

struct VertexOutput {
    @builtin(position) clip_position: vec4<f32>,
    @location(0) uv: vec2<f32>,
}

@vertex
fn vs_main(@builtin(vertex_index) in_vertex_index: u32) -> VertexOutput {
    // Generate a triangle to fill the screen.
    // The approach is based on: https://stackoverflow.com/a/59739538/4593433.
    var vertices = array(
        vec2<f32>(-1.0, -1.0),
        vec2<f32>(3.0, -1.0),
        vec2<f32>(-1.0, 3.0)
    );

    var out: VertexOutput;
    out.uv = vertices[in_vertex_index];
    out.clip_position = vec4<f32>(out.uv, 0.0, 1.0);
    return out;
}

// Fragment shader

@fragment
fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
    let color = textureLoad(input_tex, vec2<i32>(in.clip_position.xy), 0).rgb;

    return vec4<f32>(color, 1.0);
}

[kpreid]

In your fragment shader you used:

    let color = textureLoad(input_tex, vec2<i32>(in.clip_position.xy), 0).rgb;

You're taking pixel/texel coordinates of the render target (@builtin(position) under the name in.clip_position) and using them as texel coordinates of the input_tex. So, no scaling can ever happen — this is always a 1:1 mapping of texels. Notice that you haven't used in.uv at all!

You should replace your textureLoad call with textureSample(input_tex, sampler, in.uv), with sampler being a sampler you've created with appropriate filtering settings for your desired result (probably linear filtering). Technically, you could do the arithmetic yourself and keep using textureLoad, but there's no reason to do that because the GPU's built-in functionality is there for you.

As to translation, you should be getting translation, because position is defined to be relative to the viewport, so maybe there's a bug there. But in any case, it doesn't matter for your application, because you should be consulting in.uv instead.

[tversteeg]

Thank you so much! Adding a texture sampler did the trick, and now the viewport also works correctly:

Updated Shader

---

// Vertex shader

@group(0) @binding(0)
var input_tex: texture_2d<f32>;
@group(0) @binding(1)
var input_sampler: sampler;

struct VertexOutput {
    @builtin(position) clip_position: vec4<f32>,
    @location(0) uv: vec2<f32>,
}

@vertex
fn vs_main(@builtin(vertex_index) in_vertex_index: u32) -> VertexOutput {
    // Generate a triangle to fill the screen.
    // The approach is based on: https://stackoverflow.com/a/59739538/4593433.
    var vertices = array(
        vec2<f32>(-1.0, -1.0),
        vec2<f32>(3.0, -1.0),
        vec2<f32>(-1.0, 3.0)
    );

    var out: VertexOutput;
    out.uv = vertices[in_vertex_index];
    out.clip_position = vec4<f32>(out.uv, 0.0, 1.0);
    return out;
}

// Fragment shader

@fragment
fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
    let uv = fma(in.uv, vec2<f32>(0.5), vec2<f32>(0.5));
    let color = textureSample(t_diffuse, s_diffuse, uv).rgb;

    return vec4<f32>(color, 1.0);
}