Problem: Draw with metal-cpp – Uncover

Steel is the inspiration for accelerated graphics and compute energy on Apple platforms — and in the event you’re accustomed to C++, now’s the right time to discover its unimaginable energy. For this problem, we’re inviting you to check out metal-cpp and render your individual triangle, sphere, or perhaps a mesh in Xcode.

We additionally welcome you to go to the Graphics & Video games Examine Corridor in the course of the day to collaborate on this problem! Ask questions, join with different builders, and share your creations.

Start the problem

Earlier than you start, you’ll wish to watch “Program Steel in C++ with metal-cpp” and obtain the LearnMetalCPP mission, which comprises a collection of C++ samples.

Program Steel in C++ with metal-cpp

Your C++ video games and apps can now faucet into the facility of Steel. We’ll present you the way metal-cpp helps you bridge your C++ code to Steel, discover how every manages object lifecycles, and reveal utilities that may assist these language cooperate in your app. We’ll additionally share finest practices for designing…

Obtain the LearnMetalCPP mission

Open the mission in Xcode, and select 00-window.cpp as your base code. To render your picture, you’ll must arrange just a few issues inside your mission.

First, create a MTL::RenderPipelineState object with a MTL::RenderPipelineDescriptor. To do that, you’ll must create a perform, like buildShaders(). Within the code snippet beneath, we’ve offered the shader code wanted to render a single triangle.

void Renderer::buildShaders()
{
    utilizing NS::StringEncoding::UTF8StringEncoding;

    const char* shaderSrc = R"(
        #embody <metal_stdlib>
        utilizing namespace steel;
        struct AAPLVertex
        {
            float3 place;
            half3  colour;
        };
    
        // Welcome to switch the mesh as you need
        fixed AAPLVertex triangles[] = {
            { float3{ -0.8f,  0.8f, 0.0f }, half3{  1.0, 0.3f, 0.2f } },
            { float3{  0.0f, -0.8f, 0.0f }, half3{  0.8f, 1.0, 0.0f } },
            { float3{ +0.8f,  0.8f, 0.0f }, half3{  0.8f, 0.0f, 1.0 } }
        };
    
        struct v2f
        {
            float4 place [[position]];
            half3 colour;
        };

        v2f vertex vertexMain( uint vertexId [[vertex_id]])
        {
            v2f o;
            o.place = float4( triangles[ vertexId ].place, 1.0 );
            o.colour = half3 ( triangles[ vertexId ].colour );
            return o;
        }

        half4 fragment fragmentMain( v2f in [[stage_in]] )
        {
            return half4( in.colour, 1.0 );
        }
    )";
    
    
}

Then, prolong the Renderer::draw( MTK::View* pView) perform by setting a MTL::RenderPipelineState and inserting draw calls.

void Renderer::draw(  MTK::View* pView  )
{
...
    
    
...
}

After that:

• Create the MTL::RenderPipelineDescriptor object and arrange some properties.
• Create the MTL::RenderPipelineState object.
• Tip: Watch out with object lifecycles.

Able to share your metal-cpp artwork with the group? Present us what you’ve made on Twitter with the hashtag #WWDC22Challenges, or share your work within the Graphics & Video games Examine Corridor. And if you would like to debate metal-cpp and different Graphics & Video games subjects, be a part of the workforce at occasions all all through the week at WWDC22.

Discover #WWDC22Challenges on social media

Learn the WWDC22 Challenges Phrases and Circumstances