How to pass data from the vertex to the fragment shader in Metal

A step by step tutorial on implementing a MTKView in a UIView that passes data from the vertex function to the fragment function in a metal shader.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 10/04/2023 at 12:23
Last Updated on 10/04/2023 at 14:40
<p>Three flowers that represent Swift, Metal and XCode with the text "Pass Data from the Vertex to the Fragment Function in a Metal Shader" beneath it.</p>

A step by step tutorial on implementing a MTKView in a UIView that passes data from the vertex function to the fragment function in a metal shader.

SubscribeCheck out our Apple Metal Resources Guide

We recommend that you clone our Open Source Swift Starter Project, checking out the main branch and carrying out the steps below. The changes can be found on the tutorial/metal/pass-data-within-shader branch.

git clone git@github.com:delasign/swift-starter-project.git
View RepositoryHow to create a SwiftLint enabled Swift XCode Project

Step One: Setup the MTKView

<p>A screenshot of an iPhone showing a black background with a red triangle that was produced with metal.</p>

Follow the tutorial below to setup a MTKView within a UIView that shows a triangle.

How to use Metal with a UIView in Swift

Step Two: Update the Metal Shader

<p>A screenshot of Xcode showing the metal shader code provided below. The code uses comments to detail the changes that have to be carried out to allow the shader to pass data between the vertex and the fragment functions within a metal shader.</p>

Update the metal shader to:

  • Include a struct (VertexOut) that defines the data that will be passed from the vertex function to the fragment function. This struct must include a float4 position [[position]]; for the vertex function to have a valid return type.
  • Update the return type of the vertex function to VertexOut.
  • Create and return the VertexOut within the vertex function.
  • Add the vertex out as an argument for the fragment function using code similar to VertexOut vertexOut [[stage_in]].
  • Update the fragment function to use the data from the vertexOut.

Step Three: Test

<p>A screenshot of an iPhone showing how the triangle is now half white and half white, demonstrating that the data is correctly passed between the vertex function and the fragment function.</p>

Run the code on a device and confirm that you see a triangle similar to the one above.

Looking to learn more about things you can do with Swift, Metal and XCode ?

Search our blog to find educational content on learning how to use Swift, Metal and XCode.

Search our Blog

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe