swift – iOS: Metallic listed triangle not rendering the proper coloration

I am studying Metallic and have a bizarre rendering conduct that I can’t clarify. So I am attempting to render a grid of squares. I am utilizing listed vertices, a sq. would wish 2 triangles so I’ve 6 indices for every. Every sq. additionally has a stable coloration, so within the fragment operate, I exploit `vertex_id / 6` to get the colour. The unindexed model works positive, however for some motive, when the grid will get larger than ~60x~60, it can’t render in any respect. The listed model can render, however the coloration is incorrect. Right here is my code, I checked the calculation like 10 instances however could not discover the error.

class RendererV2: NSObject, MTKViewDelegate {

  non-public let vertices: [Float]
  non-public let indices: [Int32]
  non-public let colours: [Float]

  non-public var pipelineState: MTLRenderPipelineState?
  non-public var vertexBuffer: MTLBuffer?
  non-public var indexBuffer: MTLBuffer?
  non-public var colorBuffer: MTLBuffer?

  non-public let system: MTLDevice
  non-public let commandQueue: MTLCommandQueue

  init(system: MTLDevice, commandQueue: MTLCommandQueue) {
    self.system = system
    self.commandQueue = commandQueue

    let width: Float = 10
    let top: Float = 10
    let pixelWidth = 2 / width
    let pixelHeight = 2 / top
    let intWidth = Int32(width)
    let intHeight = Int32(top)
    var vertices: [Float] = []
    var indices: [Int32] = []
    var colours: [Float] = []
    for y in 0...intHeight {
      for x in 0...intWidth {
        let xValue = -1 + (Float(x) * pixelWidth)
        let yValue = 1 - (Float(y) * pixelHeight)
        vertices.append(contentsOf: [xValue, yValue]) // add new vextex

        guard x < intWidth, y < intHeight else { proceed }

        indices.append(contentsOf: [
          y * (intWidth + 1) + x, // first triangle
          y * (intWidth + 1) + x + 1, // first triangle
          (y + 1) * (intWidth + 1) + x, // first triangle
          (y + 1) * (intWidth + 1) + x + 1, // second triangle
          y * (intWidth + 1) + x + 1, // second triangle
          (y + 1) * (intWidth + 1) + x // second triangle
        ])

        let worth = max(0, min(1, Float(x) / width)) // extra clear on the left and extra opaque white on the proper
        colours.append(contentsOf: [value, value, value, value])
      }
    }
    self.vertices = vertices
    self.indices = indices
    self.colours = colours
  }

  func setup() {
    buildBuffers()
    buildState()
  }

  non-public func render(view: MTKView) {
    guard let discriptor = view.currentRenderPassDescriptor,
          let indexBuffer = indexBuffer,
          let pipelineState = pipelineState,
          let commandBuffer = commandQueue.makeCommandBuffer(),
          let commandEncoder = commandBuffer.makeRenderCommandEncoder(
            descriptor: discriptor
          ),
          let drawable = view.currentDrawable else {
      return
    }

    commandEncoder.setRenderPipelineState(pipelineState)
    commandEncoder.setVertexBuffer(vertexBuffer, offset: 0, index: 0)
    commandEncoder.setVertexBuffer(colorBuffer, offset: 0, index: 1)
    commandEncoder.drawIndexedPrimitives(
      kind: .triangle,
      indexCount: indices.rely,
      indexType: .uint32,
      indexBuffer: indexBuffer,
      indexBufferOffset: 0
    )

    commandEncoder.endEncoding()
    commandBuffer.current(drawable)
    commandBuffer.commit()
  }

  non-public func buildBuffers() {
    vertexBuffer = system.makeBuffer(
      bytes: vertices,
      size: vertices.rely * MemoryLayout<Float>.dimension
    )
    indexBuffer = system.makeBuffer(
      bytes: indices,
      size: indices.rely * MemoryLayout<Int32>.dimension
    )
    colorBuffer = system.makeBuffer(
      bytes: colours,
      size: colours.rely * MemoryLayout<Float>.dimension
    )
  }

  non-public func buildState() {
    let lib = system.makeDefaultLibrary()
    let vertexFunction = lib?.makeFunction(identify: "create_vertext")
    let fragFunction = lib?.makeFunction(identify: "fragment_color")

    let pipelineDescriptor = MTLRenderPipelineDescriptor()
    pipelineDescriptor.vertexFunction = vertexFunction
    pipelineDescriptor.fragmentFunction = fragFunction
    pipelineDescriptor.colorAttachments[0].pixelFormat = .bgra8Unorm

    pipelineState = strive? system.makeRenderPipelineState(descriptor: pipelineDescriptor)
  }

  func mtkView(_ view: MTKView, drawableSizeWillChange dimension: CGSize) {}

  func draw(in view: MTKView) {
    render(view: view)
  }
}

And right here is my metallic file.

struct VertexOut {
  float4 place [[ position ]];
  float4 coloration;
};

vertex VertexOut create_vertext(const system float2* vertices [[ buffer(0) ]],
                                const system float4* colours [[ buffer(1) ]],
                                uint v_id [[ vertex_id ]]) {
  VertexOut out;
  out.place = float4(vertices[v_id], 0, 1);
  out.coloration = colours[v_id / 6];
  return out;
}

fragment float4 fragment_color(VertexOut v [[ stage_in ]]) {
  return v.coloration;
}

The outcome:

Any assist can be a lot appreciated. Thanks