<p>Is this what you are looking for?</p>
<p><code>fragCoord</code> and <code>iResolution</code> are both of <code>vec2</code> type and the <strong>vector division is element-wise</strong>. So the first step get you:</p>
<pre class="lang-cpp prettyprint-override"><code>vec2 uv = fragCoord / iResolution.xy * 2. - 1.; // Normalize &amp; center
// uv.x = fragCoord.x / iResolution.x * 2. - 1.
</code></pre>
<p>In the second step, we multiply <code>uv.x</code> by <code>iResolution.x / iResolution.y</code> so basically:</p>
<pre class="lang-cpp prettyprint-override"><code>uv.x = (fragCoord.x / iResolution.x * 2. - 1.) * iResolution.x / iResolution.y
// this can be simplified to the following since iResolution.x is cancelled out.
uv.x = fragCoord.x / iResolution.y * 2. - iResolution.x / iResolution.y
</code></pre>
<p>You will find the <code>uv.x</code> is exactly the x field of:</p>
<pre class="lang-cpp prettyprint-override"><code>vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
// uv.x = (fragCoord.x * 2.0 - iResolution.x) / iResolution.y
// = fragCoord.x / iResolution.y * 2.0 - iResolution.x / iResolution.y;
</code></pre>
<p>which is the simplified version in the tutorial.</p>

CC BY-SA 4.0
2023-09-06T17:24:16.143Z
2023-09-06T17:24:16.143Z
Enigmatisms
<p>i'm currently following a tutorial on youtube to get started with computer graphics (shaders) and it contains the following GLSL code:</p>
<pre><code>void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy * 2. - 1.; // Normalize &amp; center
    uv.x *= iResolution.x / iResolution.y; // Account for aspect ratio

    float d = length(uv);
    fragColor = vec4(d, d, d, 1.0);
}
</code></pre>
<p>However, in the tutorial the two first lines are simplified into:</p>
<pre><code>    vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
</code></pre>
<p>I can't understand how this simplification is made.
I think I found the first part by merging both expressions in one:</p>
<pre><code>    vec2 uv = (fragCoord * 2.0 / iResolution.xy - 1.0) * vec2(iResolution.x / iResolution.y, 1.0);
</code></pre>
<p>If possible, <strong>could anyone provide me with the detailed steps of this simplification</strong> please ?</p>
<p>This is a picture of the expected result:<a href="https://i.sstatic.net/Oz7b4.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Oz7b4.png" alt="enter image description here" /></a></p>
<p>Thank you</p>

<shader><glsl><mathematics><optimisation><optimization>
Need help understanding this simplification/optimization for a very basic GLSL shader
Seth
# Need help understanding this simplification/optimization for a very basic GLSL shader

(Asked by: username_0 on 2023-09-06)

i'm currently following a tutorial on youtube to get started with computer graphics (shaders) and it contains the following GLSL code:

```
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy * 2. - 1.; // Normalize & center
    uv.x *= iResolution.x / iResolution.y; // Account for aspect ratio

    float d = length(uv);
    fragColor = vec4(d, d, d, 1.0);
}

```

However, in the tutorial the two first lines are simplified into:

```
    vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;

```

I can't understand how this simplification is made.
I think I found the first part by merging both expressions in one:

```
    vec2 uv = (fragCoord * 2.0 / iResolution.xy - 1.0) * vec2(iResolution.x / iResolution.y, 1.0);

```

If possible, **could anyone provide me with the detailed steps of this simplification** please ?

This is a picture of the expected result:[![enter image description here](https://i.sstatic.net/Oz7b4.png)](https://i.sstatic.net/Oz7b4.png)

Thank you

**Tags:** shader, glsl, mathematics, optimisation, optimization


---

## 1 answers

### Answer by username_1 on 2023-09-06. Score: 1 | Accepted answer

Is this what you are looking for?

`fragCoord` and `iResolution` are both of `vec2` type and the **vector division is element-wise**. So the first step get you:

```cpp
vec2 uv = fragCoord / iResolution.xy * 2. - 1.; // Normalize & center
// uv.x = fragCoord.x / iResolution.x * 2. - 1.

```

In the second step, we multiply `uv.x` by `iResolution.x / iResolution.y` so basically:

```cpp
uv.x = (fragCoord.x / iResolution.x * 2. - 1.) * iResolution.x / iResolution.y
// this can be simplified to the following since iResolution.x is cancelled out.
uv.x = fragCoord.x / iResolution.y * 2. - iResolution.x / iResolution.y

```

You will find the `uv.x` is exactly the x field of:

```cpp
vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
// uv.x = (fragCoord.x * 2.0 - iResolution.x) / iResolution.y
// = fragCoord.x / iResolution.y * 2.0 - iResolution.x / iResolution.y;

```

which is the simplified version in the tutorial.


---

