Masking Two Quads

📚 Official Books Metal by Tutorials
21

Give me 5 mins, I am attaching screenshots of what I want. From that, it will be clear to you.

22

Screen Shot 2021-08-02 at 4.33.15 pm

How about this one? Where the 400 x 400 image is stretched over the quad?

1 Like
23

Here’s the code for that. Just simple uvs in that case
oops wrong one
edit: try this one:

Shaders.zip (325.5 KB)

1 Like
24

Any solution how can I change vertex data for. second texture ?
For example: first texture should use different vertices and the second texture uses different vertices.

25

IMG_0035.PNG
IMG_0036.PNG
These are the two images.
Now I want to mask with specific color. For example: multiply upper image to red color and multiply bottom image to blue color
Note: The first image has different vertices and second image has different.

26

I really still don’t understand.

You can send any vertices in any buffers and render them using any texture uvs you want. You can mask with colors as I’ve shown in the samples.

You can send color attributes with vertices to indicate to the shader functions what color to blend with.

You can render a quad to a full screen texture and use that texture in a later render pass.

27

So I can send two vertex buffer with different vertices in shader?
So how will I detect that which vertex is for which shader.

28

Actually I am confused like how can I multiply two quad color. Because both are rendering differently.
Just like adding child node. So how to multiply two child nodes colors.

29

Actually the problem is, when I change vertex coordinates, the other texture coordinates also changes.
Also what you did to fit the image into the quad like in the last sample you sent.

30

I suspect I will never understand what you are doing :smiley: , so I’ll try and give you information that helps.

The draw call is the thing that decides how many vertices are drawn. eg:

encoder.drawPrimitives(type: .triangle, vertexStart: 0, vertexCount: 6)

You can send any number of vertex buffers and extract using [[vertex_id]]. You can also send no buffers at all, and calculate the position of the vertex in the vertex function.

This is an example of a vertex function where there are no buffers sent, but the position is taken from an array:

constant float3 vertices[6] = {
  float3(-1,  1,  0),    // triangle 1
  float3( 1, -1,  0),
  float3(-1, -1,  0),
  float3(-1,  1,  0),    // triangle 2
  float3( 1,  1,  0),
  float3( 1, -1,  0)};

vertex VertexOut vertex_quad(uint vertexID [[vertex_id]])
{
  float4 position = float4(vertices[vertexID], 1);
  VertexOut out {
    .position = position
  };
  return out;
}

You have total control over how many vertices you draw and how you tie it into whatever vertex buffers you choose to send.

31

I created UVs to match the quad. I actually got them slightly wrong, because the dog is rotated by 90º more than I intended.

Chapter 6, Textures should explain about UVs.