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 ❤️

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

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?

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.

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.

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… 😊

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…

(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)?

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.

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.

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.

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 😄

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.

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

@Tom Larkworthy @Kartik Agaram @Robin @Tony Cheal @Blad Tellez Internet friends, epiphanies were had. I present the goal of this whole goofy adventure: High performance, 3d, arbitrary text glyph rendering, animation, and editing. This is the backend that is going to start powering my code analysis project, and with it, comes the unlocking of rendering many tens of code repositories character-for-character in 3D space, instead of just a handful of 30-50 files. All of this is running on an M1 Air, so it’s a graphics horse but nothing “professional”. Getting this performance at this level means pretty much anyone will be able to render larger amounts of text at once. Thank you, many times over, for taking time to help last night. I have so far to go, but this is the biggest project advance in a long while. Enjoy: floating spinner letters at 60fps!

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

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