以编程方式设置金属纹理的 UV 坐标使纹理变形

Question

在我的项目中，我正在以编程方式创建顶点，这意味着我正在填充 遵循我在应用程序中创建的数据结构。

struct Vertex{
var position: SIMD3<Float>
var color: SIMD4<Float>
var textCoors: SIMD2<Float>
}

我的物体很简单，它们是由两个三角形组成的平面。

我正在使用以下代码创建纹理坐标；

pI 是平面指数。我的物体由一定数量的平面组成。

l 是平面角位置的索引。

如果我的平面是正方形或矩形，它效果很好，它可以无缝地放置纹理。

但是如果我的四边形角坐标不对称。

（正方形和长方形是四边形的特例） 纹理正在变形。

我找不到好的解决方案，我有一些想法，比如用很多东西制作可能的飞机 小方块，但感觉很糟糕应该有更好的解决方案。

func textureRip(pI: Int, l: Int, vertex: [[SIMD3<Float>]]) -> SIMD2<Float> {
        
        var textCoor0 = SIMD2<Float>()
        
        // We have this ratio because metalview coordinate system 2x2 unit size
        // from -1 to 1 for both x and y. Texture coordinate sistem is 1 unit wide and
        // unit height. (0 to 1). So metal view twice as much bigger.
        let ratio:Float = 2
        
        // We are adding 1 to metal view values because its values begins
        // from -1 so we are shifting its coordinate system to texture coordinate
        // system along wiht ratio.
        let x0  =  (vertex[pI][0].x + 1) / ratio
        let x   =  (vertex[pI][1].x + 1) / ratio
        
        // We are using "1 -" because texture coordinate sistem origin is
        // at the top left corner and metal view coordinate system at center.
        // in that case texture look upside down so we are turning it using "1-".
        let y0  = 1 - (vertex[pI][0].y + 1) / ratio
        let y   = 1 - (vertex[pI][2].y + 1) / ratio
        
        
        if l == 0 {
            
            textCoor0 = SIMD2<Float>(x0, y0)
            
        } else if l == 1 {
            
            textCoor0 = SIMD2<Float>(x, y0)
            
        } else if l == 2 {
            
            textCoor0 = SIMD2<Float>(x, y)
            
        } else {
            
            textCoor0 = SIMD2<Float>(x0, y)
            
        }
        
        
        return textCoor0
    }

Answer 1

好吧，我的错误通常都是这样。

我没有使用四边形的四个角，而是使用它的两个角数据，就好像它总是正方形或矩形一样。

我修改了 func，但它没有优化，正如你所看到的，我只是在尝试使用 Metal，看看我能用它做什么。

func textureRip(pI: Int, l: Int, vertex: [[SIMD3<Float>]]) -> SIMD2<Float> {
        
        var textCoor = SIMD2<Float>()
        
        // We have this ratio because metalview coordinate system 2x2 unit size
        // from -1 to 1 for both x and y. Texture coordinate sistem is 1 unit wide and
        // unit height. (0 to 1). So metal view twice as much bigger.
        let ratio:Float = 2
        
        // We are adding 1 to metal view values because its values begins
        // from -1 so we are shifting its coordinate system to texture coordinate
        // system along wiht ratio.
        let x1  =  (vertex[pI][0].x + 1) / ratio
        let x2  =  (vertex[pI][1].x + 1) / ratio
        
        let x3  =  (vertex[pI][2].x + 1) / ratio
        let x4  =  (vertex[pI][3].x + 1) / ratio
        
         
        
        // We are using "1 -" because texture coordinate sistem origin is
        // at the top left corner and metal view coordinate system at center.
        // in that case texture look upside down so we are turning it using "1-".
        let y1  = 1 - (vertex[pI][0].y + 1) / ratio
        let y2  = 1 - (vertex[pI][1].y + 1) / ratio
        
        let y3  = 1 - (vertex[pI][2].y + 1) / ratio
        let y4  = 1 - (vertex[pI][3].y + 1) / ratio
        
        
        
        if l == 0 {
            
            textCoor = SIMD2<Float>(x1, y1)
            
        } else if l == 1 {
            
            textCoor = SIMD2<Float>(x2, y2)
            
        } else if l == 2 {
            
            textCoor = SIMD2<Float>(x3 , y3)
            
        } else {
            
            textCoor = SIMD2<Float>(x4, y4)
            
        }
        
        
        return textCoor
    }

可以看出，我的测试图像看起来纹理很好。 每个四边形实际上都是独立的物体，可以独立移动。