Channels

# administrivia

# announcements

# devlog-together

# in-germany

# in-israel

# introduce-yourself

# linking-together

# of-end-user-programming

# of-functional-programming

# of-graphics

# of-logic-programming

# of-music

# present-company

# reading-together

# thinking-together

# two-minute-week

Thread

#thinking-together

Ivan Lugo

1 month ago

Hey all! I’m looking for a bit of help solving (what I think is) a really simple problem, but I just can’t seem to find someone - or the right article - to help me figure it out. It’s a simple graphics vector problem, and my inexperience in the space is doing me no favors in abstracting the problem to do the right maths. Does anyone here happen to know a good place to ask technical questions in that space, or, would anyone happen to know of friendly soul(s) with time to walk through the issue? StackOverflow and the dregs from days of search engine digging is chock full of answers that revolve around but don’t tackle exactly what I need, and the one solution I *have* found doesn’t seem to apply to my current state of code.
I consider help like this of the highest form of validation and “raising up”, and would happily compensate said helper or producer of article in any reasonably requested way ❤️

t

Tony Cheal

1 month ago

Here is probably quite good. There are mathematicians here, and plenty of graphics experts…. Is it easy to explain?

Ivan Lugo

1 month ago

I think it is, yeah. It really seems so darn trivial, but I just… can’t get it! Let me type it out, and if it’s helpful, I can upload some of the sketches I have trying to break it down. So, here’s the gist:

`Keywords: Texture / glyph atlas, macOS, Swift, Metal, iOS, vector space transforms`

Given: I’ve got a set of “vertices” (x, y) in normalized space, from (-1, 1) on the domain and range. Just a simple cartesian space. I’ve also got a set of “texture coordinates” (u, v), which instead map to (0, 1) on the domain and range, with (0, 1) on the range an x-axis flip. This is apparently really common, and it’s the way the Metal shading language defines its coordinate spaces.
I also know how to convert from vertex-space to uv-space:
```
u = (x + 1) / 2
v = -(y - 1) / 2
```

Also given: I have a texture in UV space where I want to define arbitrary rectangles. These rectangles are glyph-stamps in the [(0,1), (0,1)] bounding box range. These are easily computed given the full size of the texture I am creating rectangles from.
The problem: I have a single set of vertices that define a quad. Top left / right, bottom left / right. These are always centered around the origin. Meaning, I can have a square that fills the vector space with these coordinates:```
(-1, 1)
(-1, -1)
( 1, 1)
( 1, -1)
```

Assume we will “resize” those in some way by symmetrically bringing in the sides as needed - again, all around the origin.
Given that I have those precomputed coordinates above which map to UV space, how do I take those arbitrary vertices in vertex space and map them to the ‘rectangular sections’ of uv-space?t

Tony Cheal

1 month ago

Not sure I followed that completely. Surely all the mappings from x,y space to u,v space will be given by your formulae or their inverses. Ie x=2u-1;y=-2v+1.
Bit unclear about your use of the words ‘domain’ and ‘range’ in this context.

Ivan Lugo

1 month ago

Given the yellow vertices, I need to “transform” them to the matching UVs such that it ‘fills their space’, and the rasterizer can interpolate between the values.

t

Tony Cheal

1 month ago

No. Sorry you've lost me. Now I'm unclear why points on your diagram are marked as apparent products of u and v, and why the other points have only v on them.
You said earlier there was a square centred on the coordinate centre doing something. If this is some transform of one of the coordinate systems about the centre point I'd expect that scaling factor to appear in front of the u and v (or its reciprocal) in the relevant formulae.
Otherwise I'm baffled, and since it’s gone midnight here I'm hoping to see a lovely solution to your problem when someone picks up the story from another time zone while I'm asleep… 😊

Ivan Lugo

1 month ago

You’re wonderful for your thinking and time anyway, and no worries friend! It’s rough when I can’t even *explain* the problem well, lol. That probably means if I dig in the question better, I’ll get closer to the answer implicitly…

r

Robin

1 month ago

(I think present-company. is probably the channel for this. From the member handbook "If you’d like help with your homework, this is the place to ask." Not that this is necessarily homework. But anyway.)
Is the question how to define a transformation that sends four coordinates v1,v2,v3,v4 to the four coordinates (0.25,0.25), (0.25, 0.75), (0.75, 0.25), (0.75, 0.75)?

Ivan Lugo

1 month ago

I’ll happily remove this and pop it over there. I didn’t realize that was a line in there - my apologies for the break.
I think that’s my question, yeah… The target coordinates will vary, but that’s the idea. And the reason being that the same vertices (v1-4) will always pipe through the graphics pipeline, but the vertices for each constant that defines the instance being drawn will be unique. I want to take an input vertex which is at one of those coordinates, and say, “This coordinate is at *_* u,v position within the bounds given by the constants that define this instance)“.
I think I haven’t define the problem correctly, because the more I write it out, the more I think something is missing.. I’m just not sure.

r

Robin

1 month ago

I'll describe how you can map vectors v1...v4 to vectors w1...w4 assuming they label the edges of rectangles in the order top-left, bottom-left, top-right, bottom-right. The mapping can be expressed as the composite of three simpler maps:
(1) Translate the original rectangle to the origin. This is achieved by the mapping sending an arbitrary vector x to x-v1.
(2) Scale the resulting rectangle so it is the same size as the rectangle w1...w4. In the horizontal direction you have to scale by |w3-w1|/|v3-v1|. In the vertical direction it is |w2-w1|/|v2-v1|.
(3) Translate the resulting rectangle from the origin to w1. This is the mapping sending an arbitrary vector x to x+w1. Composing these three maps will map v1...v4 to w1...w4.
I hope this helps. I don't know graphics programming, but if you have any other math questions, or need some more detail, I'm glad to help.

Ivan Lugo

1 month ago

This is quite helpful Robin, I’m going to save this snippet because I’m going to be scaling nodes soon.. and this is exactly the math I think I’ll need. I sincerely appreciate it.

Kartik Agaram

1 month ago

I'm personally quite happy to see this thread in this channel. I'm happy to give long-time members the benefit of the doubt that they're working on some sort of FoC project rather than extrinsically motivated "home work". It's not like there's a lot of thinking together going on here anyway 😄

Ivan Lugo

1 month ago

I love to read it Kartik, haha. This is something absolutely plan to share with FoC - as soon as I have it working. I’ve been making leaps all this week, and I’ve been reaching out more now I’m getting closer to a wrap up of this next step.

Tom Larkworthy

1 month ago

u want a simple matrix that maps between the two vector spaces (which you can invert if you need to go the other way). A simple 2x2 matrix can;t do translations, which is what homogeneous coordinates solves. Instead of a point (x,y) you make them (x,y,1) and multiply by a 3x3 matrix which has 0s in certain elements. That extra 1 on the end is leverage by the transformation matrix to move the origin. See https://web.cse.ohio-state.edu/~shen.94/681/Site/Slides_files/transformation_review.pdf

I would say you don't want to break the transform down into translating then rotating etc. It's all covered by vector-matrix multiplication, and it's far more composable and effecient (and idiomatic graphics programming) to stick to the matrix representation of transforms.

here is a very concrete example in practice that matches your problem https://math.stackexchange.com/questions/296794/finding-the-transform-matrix-from-4-projected-points-with-javascript

Ivan Lugo

1 month ago

Kartik Agaram

1 month ago

Post it to **#share-your-work** or **#devlog-together** 🙂

Duncan Cragg

1 month ago

Ooh. I've been using this:
https://github.com/kocsis1david/font-demo
for my 3D font rendering in Vulkan.
Just thought I'd drop that in. Probably not relevant but similar kinda stuff

View count: 2

Join thread in Slack