<p>This might be helpful: <a href="https://www.lutanho.net/goodies/map2globe.html" rel="nofollow noreferrer">https://www.lutanho.net/goodies/map2globe.html</a>
The projection is done directly by the javascript in the html file, there are no external libraries used, so you could have a look at the code and see what it does.</p>
<blockquote>
<p>What specific things should I begin researching to learn</p>
</blockquote>
<p>3d math, rotation of vectors, projection on a plane, program 3d applicatons yourself and learn by doing.</p>

CC BY-SA 4.0
2024-12-05T13:14:55.637Z
Welcome to CG StackExchange and thank you for your answer. A word of advice: try not to use external links itself as an answer. If the link is dead (in the future), and the answer will be less meaningful for the future readers. Instead, try to explain your thoughts directly and use your external links as references or examples.
Enigmatisms
CC BY-SA 4.0
2024-12-03T04:42:46.643Z
2024-12-03T04:42:46.643Z
luta
<p>I'm trying to figure out a general way to project a rectangular texture into a spherical one centered on the azimuth (UN flag style).</p>
<p>As a reference, I have been able to achieve this effect exactly using the software TouchDesigner. I used a Projection node, which let me transform my image from an Equirectangular projection to a Fish Eye projection (as they call it), and let me specify both the FOV and the XYZ rotation of the projection. Being able to set the rotation is important as I want to be able to shift the tilt of the sphere's axis dynamically.
<a href="https://i.sstatic.net/Uywi9vED.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Uywi9vED.png" alt="screenshot of TouchDesigner node graph doing this kind of projection" /></a></p>
<p>The issue I have is that I can't use TouchDesigner for a particular application I'm working on, so I want to be able to replicate it with a more general solution that uses the same kind of math TouchDesigner is using under the hood. I need to be able to do the projection in real-time, rather than just transforming a single image and saving it, which makes me think an equation for transforming the UV coordinates used to sample the texture is the right way to do it.</p>
<p>My question then is in two parts-</p>
<ul>
<li>What specific things should I begin researching to learn how to do this math myself? There's a lot of info &amp; terminology out there that is related but not quite what I'm looking for. TouchDesigner is very opaque with how its nodes work &amp; sparse with documentation so it's not giving me many leads either.</li>
<li>Does doing this as a UV transformation seem like a viable way to reproduce this? Or is there another kind of approach I should be considering?</li>
</ul>

<projections><uv-mapping><coordinates>
Transforming UVs from rectangular to azimuthal spherical projection
charlieatron
# Transforming UVs from rectangular to azimuthal spherical projection

(Asked by: username_0 on 2024-10-10)

I'm trying to figure out a general way to project a rectangular texture into a spherical one centered on the azimuth (UN flag style).

As a reference, I have been able to achieve this effect exactly using the software TouchDesigner. I used a Projection node, which let me transform my image from an Equirectangular projection to a Fish Eye projection (as they call it), and let me specify both the FOV and the XYZ rotation of the projection. Being able to set the rotation is important as I want to be able to shift the tilt of the sphere's axis dynamically.
[![screenshot of TouchDesigner node graph doing this kind of projection](https://i.sstatic.net/Uywi9vED.png)](https://i.sstatic.net/Uywi9vED.png)

The issue I have is that I can't use TouchDesigner for a particular application I'm working on, so I want to be able to replicate it with a more general solution that uses the same kind of math TouchDesigner is using under the hood. I need to be able to do the projection in real-time, rather than just transforming a single image and saving it, which makes me think an equation for transforming the UV coordinates used to sample the texture is the right way to do it.

My question then is in two parts-

* What specific things should I begin researching to learn how to do this math myself? There's a lot of info & terminology out there that is related but not quite what I'm looking for. TouchDesigner is very opaque with how its nodes work & sparse with documentation so it's not giving me many leads either.
* Does doing this as a UV transformation seem like a viable way to reproduce this? Or is there another kind of approach I should be considering?

**Tags:** projections, uv-mapping, coordinates


---

## 1 answers

### Answer by username_1 on 2024-12-03. Score: 0

This might be helpful: <https://www.lutanho.net/goodies/map2globe.html>
The projection is done directly by the javascript in the html file, there are no external libraries used, so you could have a look at the code and see what it does.

> What specific things should I begin researching to learn

3d math, rotation of vectors, projection on a plane, program 3d applicatons yourself and learn by doing.

> **Comments:**
> **username_2**: Welcome to CG StackExchange and thank you for your answer. A word of advice: try not to use external links itself as an answer. If the link is dead (in the future), and the answer will be less meaningful for the future readers. Instead, try to explain your thoughts directly and use your external links as references or examples.  

---

