# Using a triangle as environment map

**URL:** <https://forums.kodeco.com/t/using-a-triangle-as-environment-map/201049>\
**Category:** Metal by Tutorials\
**Created:** [December 28, 2023, 9:15pm UTC](https://forums.kodeco.com/t/using-a-triangle-as-environment-map/201049 "2023-12-28T21:15:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mk2019](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/mk2019/32/108824_2.png) [@mk2019](https://forums.kodeco.com/u/mk2019)\
**Post date:** [December 28, 2023, 9:15pm UTC](https://forums.kodeco.com/t/using-a-triangle-as-environment-map/201049/1 "2023-12-28T21:15:11Z")

</div>

Hi all,  
I’m trying out this thing where I use a triangle instead of a cube as an environment map in the background. But I cannot get it to work, the triangle is not visible where it should be.

In the code where there is a 👋 it should be 1,1 for the z and w in the float4() – but then I don’t see the triangle…?  
I set w=4 just as an example to see the triangle as smaller and in front of everything to see that it is there and working.

So my question is why w:1 does not show the triangle as it should be in clip space at the far end behind the spinning torus?

With this technique, the idea is that I don’t have to worry about any object being clipped i 3D-space, since the env-map is always behind everything.

 ![FullScreenTriangle](https://files.chunter.kodeco.com/original/3X/9/b/9b8f998dc89cc73d064c5bd9f0f63bb3fed1d6c8.jpeg)

Link: [Dropbox - EnvMap1.mov - Simplify your life](https://www.dropbox.com/scl/fi/knwm7j3b6sq0kx0of30aw/EnvMap1.mov?rlkey=oqy33pmwhdpxdz2yaxbszjxk5&dl=0)

Here is my shader code:

```auto
#include <metal_stdlib>
using namespace metal;

struct FullscreenVertexOut 
{
    float4 position [[position]];
    float4 clipPosition;
};

vertex FullscreenVertexOut EnvironmentMappingNode_VertexMain(uint index [[vertex_id]])
{
    // triangle vertices ◸
    const float2 positions[] = {
        { -1, 1 }, // left-top
        { -1, -3 }, // left-bottom
        { 3, 1 } // right-top
    };
    FullscreenVertexOut out;
    out.position = float4(positions[index], 1, 4); // 👋
    out.clipPosition = out.position;
    return out;
}

fragment float4 EnvironmentMappingNode_FragmentMain(FullscreenVertexOut in [[stage_in]],
                                                    constant float4x4 &inverseViewProjectionMatrix [[buffer(0)]],
                                                    texturecube<float, access::sample> cubeEnvTex [[texture(0)]],
                                                    sampler cubeSampler [[sampler(0)]])
{
    const float4 worldPosition = (inverseViewProjectionMatrix * in.clipPosition);
    const float3 worldDirection = normalize(worldPosition.xyz);
    return (cubeEnvTex.sample(cubeSampler, worldDirection) * 1.0);
}

```

---

<div class="post-metadata">

**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\
**Post date:** [January 2, 2024, 11:11pm UTC](https://forums.kodeco.com/t/using-a-triangle-as-environment-map/201049/2 "2024-01-02T23:11:20Z")

</div>

Hi @mk2019 - sorry for the late answer - I’ve been on break.

It’s really hard to diagnose problems like this without the full code. Your triangle appears to rendering correctly, but I don’t know what the other code is doing.

I would suggest you investigate the in and out vertex positions for your objects using the Geometry resources in the GPU debugger.

 ![Screenshot 2024-01-03 at 9.10.35 am](https://files.chunter.kodeco.com/original/3X/1/7/17c77e5dc63d875c0a6f8a8b0d50ae60cada980a.png)

---

<div class="post-metadata">

**Author:** ![mk2019](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/mk2019/32/108824_2.png) [@mk2019](https://forums.kodeco.com/u/mk2019)\
**Post date:** [January 4, 2024, 12:02am UTC](https://forums.kodeco.com/t/using-a-triangle-as-environment-map/201049/3 "2024-01-04T00:02:00Z")

</div>

Hi @caroline

The camera:  
fovDegrees = 65  
near = 0.1  
far = 100

There is nothing much other than the standard setup on the Swift side, and this is the update/draw function:

```auto
override func updateAndDraw(with renderEncoder: MTLRenderCommandEncoder, sceneUniform: DCMTLUniform) -> DCMTLUniform
    {
        let cameraMatrix = sceneUniform.viewMatrix
        let viewMatrix = cameraMatrix//.inverse

        var viewDirectionMatrix = viewMatrix
        viewDirectionMatrix.columns.3 = SIMD4<Float>(0, 0, 0, 1)

        var clipToViewDirectionTransform = (sceneUniform.projectionMatrix * viewDirectionMatrix).inverse

        //

        renderEncoder.setFrontFacing(.counterClockwise)
        renderEncoder.setCullMode(.none)

        renderEncoder.setRenderPipelineState(mRenderPipelineState)

            renderEncoder.setFragmentBytes(&clipToViewDirectionTransform, length: MemoryLayout<float4x4>.size, index: 0)
            renderEncoder.setFragmentTexture(mEnvironmentTexture, index: 0)
            renderEncoder.setFragmentSamplerState(mSamplerState, index: 0)

            renderEncoder.drawPrimitives(type: .triangle, vertexStart: 0, vertexCount: 3)

        return sceneUniform
    }

```

I found out that if I set the:

```auto
out.position = float4(positions[index], 0.98, 1);

```

then I see the torus half cut into the environment triangle  
 ![Screenshot 2024-01-04 at 00.20.11](https://files.chunter.kodeco.com/original/3X/5/c/5c34326e43daf68d3a05ce4e2cd3b16b8c677454.gif)

and if I set the value to 0.99 then I fully see the torus in front of the background.  
Same for 0.99999997, but 0.99999998 to 1.0 makes the background disappear.

In the debugger, this is what 0.99999997 looks like:

 ![Screenshot 2024-01-04 at 00.49.12](https://files.chunter.kodeco.com/original/3X/7/c/7c09fb86380902a167ca3758fd70c1a7994c6d29.png)

and 0.99999998

 ![Screenshot 2024-01-04 at 00.50.47](https://files.chunter.kodeco.com/original/3X/0/e/0e956e91a5afbe4fe71a3c3c7e5657a8229f1482.png)

They both look the same in numbers and say 1.000 instead of the value set, but look to be in the “far” position.

The torus is close to the camera:

 ![Screenshot 2024-01-04 at 00.59.39](https://files.chunter.kodeco.com/original/3X/2/e/2e698865a9c1e5a0dfbd7ee39ac42f121d21a56c.png)

Seems like some very sensitive z-axis position happening here…

---

<div class="post-metadata">

**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\
**Post date:** [January 4, 2024, 5:26am UTC](https://forums.kodeco.com/t/using-a-triangle-as-environment-map/201049/4 "2024-01-04T05:26:37Z")

</div>

Thank you for providing more detail. It’s still very hard for me to see what’s going on and test out possible answers. You aren’t able to upload a small zip file?

Have you experimented with different depth stencil states?

Remember that NDC (Normalised device coordinates) for Metal are -1 to 1 in the x and y axes and 0 to 1 in the z axis.

This means that if something is positioned at z = 0.98 and the w is 1, it will be very close to the far position. If something is positioned at z = 98 and the w is 100, it will be at the same position. (Divide by w happens after the vertex function.)

---

<div class="post-metadata">

**Author:** ![mk2019](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/mk2019/32/108824_2.png) [@mk2019](https://forums.kodeco.com/u/mk2019)\
**Post date:** [January 4, 2024, 9:11pm UTC](https://forums.kodeco.com/t/using-a-triangle-as-environment-map/201049/5 "2024-01-04T21:11:52Z")

</div>

Ahh I found the issue.

I was using  
`descriptor.depthCompareFunction = .less`

but if I change it to  
`descriptor.depthCompareFunction = .lessEqual`

then it works as expected where both z & w are 1.

The dangers of changing something at some point and thinking – what could go wrong 😝🤥

---

<div class="post-metadata">

**Author:** ![tured1966](https://s3.amazonaws.com/cdn.raywenderlich.com/community/forum-assets/noun-game-ghost-878668.png) [@tured1966](https://forums.kodeco.com/u/tured1966)\
**Post date:** [January 22, 2024, 9:24am UTC](https://forums.kodeco.com/t/using-a-triangle-as-environment-map/201049/6 "2024-01-22T09:24:14Z")

</div>

Thank you for sharing this.