学习ios Metal(3)—宽度可调的线条的绘制

2024-01-05 01:48

本文主要是介绍学习ios Metal(3)—宽度可调的线条的绘制,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

        metal的基础知识入门,首推Metal By Example系列:http://metalbyexample.com/。博主的相关文章,主要给出工程实际遇到的典型问题及其解决方案。

        

        本节源码:https://github.com/sjy234sjy234/Learn-Metal/tree/master/MetalLine。

        根据苹果官方的说法,metal是一个底层的图形API,因此它与opengles不同,没有提供任何上层封装的常用功能的实现。其中绘制有宽度的线条,在opengles是内置支持的,但是metal内置并不支持。如上一节所说,MTLPrimitiveType中包含MTLPrimitiveTypeLine类型,但是调用drawPrimitives进行线条绘制时,只能得到固定宽度为1pixel的线条,不能进行宽度调整:https://github.com/sjy234sjy234/Learn-Metal/tree/master/MetalLinePrimitive。下面给出一种利用矩形模拟有宽度的线条的方法进行宽度可调的线条的绘制。

        首先介绍一下原理,会涉及到一点点的几何数学。假设在二维平面上,需要绘制宽度为W的线段P1P2,其中P1(x1, y1)、P2(x2, y2)坐标已知,宽度W已知。如图所示,只需要绘制两个实心的三角形PaPbPc和PaPcPd即可。

                    

        代码中实现计算Pa, Pb, Pc, Pd这4个点时,采用了向量的方式:

    float thickness=0float4 position1=vertices[lineIndex1].position;float4 position2=vertices[lineIndex2].position;.02;float4 v = position2 - position1;float2 p0 = float2(position1.x,position1.y);float2 v0 = float2(v.x,v.y);float2 v1 = thickness * normalize(v0) * float2x2(float2(0,-1),float2(1,0));float2 pa = p0 + v1;float2 pb = p0 - v1;float2 pc = p0 - v1 + v0;float2 pd = p0 + v1 + v0;

         参见博主给出的源码,每一条线段可以看成一个绘制的实例,每个绘制实例由2个三角形构成,下面是对于每个实例,根据vertex_main中传入的vid(0~5)来确定具体要传递给fragment_main的是Pa, Pb, Pc, Pd中的哪一个点。即每条宽线段是由2个三角形、4个点和6个index(vid)来解释的,需要对实例的绘制有所理解。

    Vertex outVertex;switch(vid){case 0:outVertex.position = float4(pa.x,pa.y,position1.z,position1.w);break;case 1:outVertex.position = float4(pb.x,pb.y,position1.z,position1.w);break;case 2:outVertex.position = float4(pc.x,pc.y,position2.z,position2.w);break;case 3:outVertex.position = float4(pa.x,pa.y,position1.z,position1.w);break;case 4:outVertex.position = float4(pc.x,pc.y,position2.z,position2.w);break;case 5:outVertex.position = float4(pd.x,pd.y,position2.z,position2.w);break;}outVertex.color={1.0,0.0,0.0,1.0};return outVertex;

        PS:关于实例绘制的基础请参考:http://metalbyexample.com/的第11章。demo中给出的是直接在ndc坐标系中绘制的直线,具体到绘制三维模型的线框图的实现时,既要考虑遮挡关系,又要考虑正反面,博主会在后续给出三维模型的线框图的渲染实现。

这篇关于学习ios Metal(3)—宽度可调的线条的绘制的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/571274

相关文章

使用Python绘制3D堆叠条形图全解析

《使用Python绘制3D堆叠条形图全解析》在数据可视化的工具箱里,3D图表总能带来眼前一亮的效果,本文就来和大家聊聊如何使用Python实现绘制3D堆叠条形图,感兴趣的小伙伴可以了解下... 目录为什么选择 3D 堆叠条形图代码实现:从数据到 3D 世界的搭建核心代码逐行解析细节优化应用场景:3D 堆叠图

Go学习记录之runtime包深入解析

《Go学习记录之runtime包深入解析》Go语言runtime包管理运行时环境,涵盖goroutine调度、内存分配、垃圾回收、类型信息等核心功能,:本文主要介绍Go学习记录之runtime包的... 目录前言:一、runtime包内容学习1、作用:① Goroutine和并发控制:② 垃圾回收:③ 栈和

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,:本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1:Kotlin 如何解决 Java 的 NullPointerExceptio

QT6中绘制UI的两种方法详解与示例代码

《QT6中绘制UI的两种方法详解与示例代码》Qt6提供了两种主要的UI绘制技术:​​QML(QtMeta-ObjectLanguage)​​和​​C++Widgets​​,这两种技术各有优势,适用于不... 目录一、QML 技术详解1.1 QML 简介1.2 QML 的核心概念1.3 QML 示例:简单按钮

重新对Java的类加载器的学习方式

《重新对Java的类加载器的学习方式》:本文主要介绍重新对Java的类加载器的学习方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、介绍1.1、简介1.2、符号引用和直接引用1、符号引用2、直接引用3、符号转直接的过程2、加载流程3、类加载的分类3.1、显示

Android与iOS设备MAC地址生成原理及Java实现详解

《Android与iOS设备MAC地址生成原理及Java实现详解》在无线网络通信中,MAC(MediaAccessControl)地址是设备的唯一网络标识符,本文主要介绍了Android与iOS设备M... 目录引言1. MAC地址基础1.1 MAC地址的组成1.2 MAC地址的分类2. android与I

Python使用Matplotlib绘制3D曲面图详解

《Python使用Matplotlib绘制3D曲面图详解》:本文主要介绍Python使用Matplotlib绘制3D曲面图,在Python中,使用Matplotlib库绘制3D曲面图可以通过mpl... 目录准备工作绘制简单的 3D 曲面图绘制 3D 曲面图添加线框和透明度控制图形视角Matplotlib

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx