PixelKit

ตรวจสอบ asyncGraphics
แรงบันดาลใจจาก Pixelkit & RenderKit

Pixelkit

กราฟิกสดสำหรับ iOS, MacOS และ TVOS
วิ่งบน RenderKit ขับเคลื่อนด้วยโลหะ

Pixelkit ผสมผสาน Shaders ที่กำหนดเอง, Shaders ประสิทธิภาพของโลหะ, ตัวกรองภาพหลักและการมองเห็นเพื่อสร้างเครื่องมือสำหรับการเรนเดอร์แบบเรียลไทม์

ตัวอย่าง: เอฟเฟกต์กล้อง - หน้าจอสีเขียว
ข้อมูล: พิกัดพื้นที่ - ผู้ประกอบการผสม - เอฟเฟกต์ความสะดวกสบาย funcs - โหมดบิตสูง

กล้องถ่ายรูป	depthcamerapix	imagepix	Videopix	Screencapturepix	streaminpix	Slopepix

สี	วงกลม	rectanglepix	Polygonpix	อาร์คปิกซ์	linepix	การไล่ระดับสี	stackpix

เสียงดัง	ข้อความ	Metalpix	Twirlpix	ข้อเสนอแนะ	delaypix	Sharpenpix	streamoutpix

ระดับสปิล	Blurpix	edgepix	thresholdpix	quantizepix	Transformpix	Kaleidoscopepix

channelmixpix	chromakeypix	cornerpinpix	colorshiftpix	ฟลิปปิกซ์	rangepix	starpix

Sepiapix	ConvertPix	ลดลง	หลี่	ฟรีซี	ฟลอเรปิล	AirPlayPix	บันทึก

Blendpix	Crosspix	lookuppix	Disclacepix	remappix	การสั่งซื้อใหม่	การแก้ปัญหา	croppix

Blendspix	Lumalevelspix	Lumablurpix	lumatransformpix	Timemachinepix	arraypix

---

ติดตั้ง

แพ็คเกจที่รวดเร็ว

 . package ( url : " https://github.com/heestand-xyz/PixelKit " , from : " 3.0.0 " ) 

การตั้งค่า

Swiftui

import SwiftUI
import PixelKit

struct ContentView : View {
    
    @ StateObject var circlePix = CirclePIX ( )
    @ StateObject var blurPix = BlurPIX ( )
    
    var body : some View {
        PixelView ( pix : blurPix )
            . onAppear {
                blurPix . input = circlePix
                blurPix . radius = 0.25
            }
    }
}

Uikit

import UIKit
import PixelKit

class ViewController : UIViewController {

    override func viewDidLoad ( ) {
        super . viewDidLoad ( )

        let circlePix = CirclePIX ( )

        let blurPix = BlurPIX ( )
        blurPix . input = circlePix
        blurPix . radius = 0.25

        let finalPix : PIX = blurPix
        finalPix . view . frame = view . bounds
        view . addSubview ( finalPix . view )
    }
} 

ปณิธาน

ใน Pixelkit Pixs ทั้งหมดมีความละเอียด Pixs บางตัวได้กำหนดความละเอียด (เริ่มต้นเป็น .auto ) และ PIX บางตัวได้รับการแก้ปัญหา

ความละเอียด .auto จะเติมเต็มมุมมองและรับความละเอียดที่ถูกต้องตามขนาดมุมมอง หากมุมมองคือ 100x100 คะแนนความละเอียดจะเป็น 200x200 พิกเซลบน MacOS และ 300x300 พิกเซลบน iPhone

นำเข้าแพ็คเกจความละเอียดเพื่อทำงานกับความละเอียด:

import Resolution

คุณสามารถคูณและแบ่งความละเอียดด้วย CGFloat หรือ Int

มีความละเอียดที่กำหนดไว้ล่วงหน้าเช่น ._1080p & ._4K

ภาพที่แสดงผล

 . renderedImage // UIImage or NSImage
. renderedTexture // MTLTexture

ตัวอย่าง: เอฟเฟกต์กล้อง

import SwiftUI
import PixelKit

class ViewModel : ObservableObject {
    
    let camera : CameraPIX
    let levels : LevelsPIX
    let colorShift : ColorShiftPIX
    let blur : BlurPIX
    let circle : CirclePIX
    
    let finalPix : PIX
    
    init ( ) {
        
        camera = CameraPIX ( )
        camera . cameraResolution = . _1080p

        levels = LevelsPIX ( )
        levels . input = camera
        levels . brightness = 1.5
        levels . gamma = 0.5

        colorShift = ColorShiftPIX ( )
        colorShift . input = levels
        colorShift . saturation = 0.5

        blur = BlurPIX ( )
        blur . input = colorShift
        blur . radius = 0.25

        circle = CirclePIX ( at : . square ( 1080 ) )
        circle . radius = 0.45
        circle . backgroundColor = . clear

        finalPix = blur & ( camera * circle )
    }
}

struct ContentView : View {
    
    @ StateObject var viewModel = ViewModel ( )
    
    var body : some View {
        PixelView ( pix : viewModel . finalPix )
    }
}

สิ่งนี้สามารถทำได้ด้วย Funcs ความสะดวกสบาย:

 let pix = CameraPIX ( ) . pixBrightness ( 1.5 ) . pixGamma ( 0.5 ) . pixSaturation ( 0.5 ) . pixBlur ( 0.25 )

Remeber เพื่อเพิ่ม NSCameraUsageDescription ลงใน info.plist ของคุณ

ตัวอย่าง: หน้าจอสีเขียว

import RenderKit import PixelKit

 let cityImage = ImagePIX ( )
cityImage . image = UIImage ( named : " city " )

let supermanVideo = VideoPIX ( )
supermanVideo . load ( fileNamed : " superman " , withExtension : " mov " )

let supermanKeyed = ChromaKeyPIX ( )
supermanKeyed . input = supermanVideo
supermanKeyed . keyColor = . green

let blendPix = BlendPIX ( )
blendPix . blendingMode = . over
blendPix . inputA = cityImage
blendPix . inputB = supermanKeyed

let finalPix : PIX = blendPix
finalPix . view . frame = view . bounds
view . addSubview ( finalPix . view )

นอกจากนี้ยังสามารถทำได้ด้วยผู้ให้บริการผสมผสานและเอฟเฟกต์ความสะดวกสบาย funcs:

 let pix = cityImage & supermanVideo . pixChromaKey ( . green )

ตัวอย่าง: กล้องความลึก

import RenderKit import PixelKit

 let cameraPix = CameraPIX ( )
cameraPix . camera = . front

let depthCameraPix = DepthCameraPIX . setup ( with : cameraPix )

let levelsPix = LevelsPIX ( )
levelsPix . input = depthCameraPix
levelsPix . inverted = true

let lumaBlurPix = cameraPix . pixLumaBlur ( pix : levelsPix , radius : 0.1 )

let finalPix : PIX = lumaBlurPix
finalPix . view . frame = view . bounds
view . addSubview ( finalPix . view )

DepthCameraPIX ถูกเพิ่มเข้ามาใน Pixelkit v0.8.4 และต้องใช้ iPhone X หรือใหม่กว่า

หมายเหตุที่จะใช้ setup(with:filter:) วิธีการของ DepthCameraPIX
มันจะดูแลการปฐมนิเทศสีและเปิดใช้งานความลึกบน CameraPIX

เพื่อเข้าถึงค่าความลึก ouside ของขอบเขต 0.0 และ 1.0
เปิดใช้งานโหมด 16 bit เช่นนี้: PixelKit.main.render.bits = ._16

ตัวอย่าง: กล้องหลายตัว

 let cameraPix = CameraPIX ( )
cameraPix . camera = . back

let multiCameraPix = MultiCameraPIX . setup ( with : cameraPix , camera : . front )

let movedMultiCameraPix = multiCameraPix . pixScale ( by : 0.25 ) . pixTranslate ( x : 0.375 * ( 9 / 16 ) , y : 0.375 )

let finalPix : PIX = camearPix & movedMultiCameraPix
finalPix . view . frame = view . bounds
view . addSubview ( finalPix . view )

หมายเหตุ MultiCameraPIX ต้องใช้ iOS 13

พิกัดพื้นที่

พื้นที่พิกัดพิกัด Pixelkit นั้นถูกกำหนดให้เป็นแกนแนวตั้ง (ความสูง 1.0) ที่มีจุดกำเนิด (0.0, 0.0) อยู่ตรงกลาง
โปรดทราบว่าเมื่อเทียบกับ Uikit พื้นเมืองและ Swiftui มองว่าแกนแนวตั้งถูกพลิกและต้นกำเนิดถูกเคลื่อนย้ายสิ่งนี้มีความมั่นใจมากขึ้นเมื่อทำงานกับกราฟิกใน Pixelkit การหมุนเต็มกำหนดโดย 1.0

ศูนย์: CGPoint (X: 0, Y: 0)
ด้านล่างซ้าย: CGPoint (x: -0.5 * aspectratio, y: -0.5)
ด้านบนขวา: CGPoint (x: 0.5 * aspectratio, y: 0.5)

เคล็ดลับ: Resolution มีคุณสมบัติ .aspect :
let aspectRatio: CGFloat = Resolution._1080p.aspect

ผู้ประกอบการผสมผสาน

วิธีที่รวดเร็วและสะดวกในการผสมผสาน Pixs
เหล่านี้เป็นตัวดำเนิน BlendingMode ที่รองรับ:

&	!&	+	-	*	**	!**	%	~	°
.เกิน	.ภายใต้	.เพิ่ม	.subtract	.คูณ	.พลัง	. แกมม่า	.ความแตกต่าง	.เฉลี่ย	โคไซน์

<>	><	++	--	<->	>-<	+-+
.	.สูงสุด	.Addwithalpha	.subtractwithalpha	ข้างใน	ข้างนอก	ผู้ให้บริการพิเศษ

 let blendPix = ( CameraPIX ( ) !** NoisePIX ( at : . fullHD ( . portrait ) ) ) * CirclePIX ( at : . fullHD ( . portrait ) )

โหมดการเติมของตัวดำเนินการส่วนกลางส่วนกลางเริ่มต้นคือ .fit เปลี่ยนเป็นแบบนี้:
PIX.blendOperators.globalPlacement = .fill

เอฟเฟกต์ความสะดวกสบาย funcs

• .pixscaleresolution (ถึง: ._1080p * 0.5) -> การแก้ไข
• .pixscaleresolution (โดย: 0.5) -> ResolutionPix
• .PixBrightness (0.5) -> LevelSpix
• .pixDarkness (0.5) -> LevelSpix
• .pixContrast (0.5) -> LevelSpix
• .pixGamma (0.5) -> LevelSpix
• .pixInvert () -> LevelSpix
• .pixopacity (0.5) -> LevelSpix
• .pixblur (0.5) -> Blurpix
• .pixedge () -> edgepix
• .pixthreshold (ที่: 0.5) -> thresholdpix
• .pixquantize (โดย: 0.5) -> quantizepix
• .pixposition (ที่: CGPoint (x: 0.5, y: 0.5)) -> transformpix
• .pixrotatate (โดย: 0.5) -> transformpix
• .pixrotatate (byradians: .pi) -> transformpix
• .pixrotatate (bydegrees: 180) -> transformpix
• .pixscale (โดย: 0.5) -> transformpix
• .pixkaleidoscope () -> kaleidoscopepix
• .pixtwirl (0.5) -> Twirlpix
• .pixswap (.Red, .Blue) -> channelMixPix
• .pixchromakey (.Green) -> chromakeypix
• .pixhue (0.5) -> colorshiftpix
• .pixsaturation (0.5) -> colorshiftpix
• .pixcrop (cgrect (x: 0.25, y 0.25, ความกว้าง: 0.5, ความสูง: 0.5)) -> croppix
• .pixflipx () -> flipfloppix
• .pixflipy () -> flipfloppix
• .pixflopleft () -> flipfloppix
• .pixflopright () -> flipfloppix
• .PixRange (Inlow: 0.0, inhigh: 0.5, Outlow: 0.5, outhigh: 1.0) -> rangepix
• .pixRange (inlow: .clear, inhigh: .gray, Outlow: .gray, outhigh: .white) -> rangepix
• .pixsharpen () -> sharpenpix
• .pixslope () -> slopepix
• .pixVignetting (รัศมี: 0.5, สิ่งที่ใส่เข้าไป: 0.25, แกมม่า: 0.5) -> lumalevelspix
• .pixLookup (PIX: PIXB, AXIS: .x) -> lookuppix
• .pixlumablur (PIX: PIXB, RADIUS: 0.5) -> LUMABLURPIX
• .pixlumalevels (Pix: Pixb, ความสว่าง: 2.0) -> lumalevelspix
• .pixdisplace (PIX: PIXB, ระยะทาง: 0.5) -> DISPLACEPIX
• .pixRemap (PIX: PIXB) -> RemAppix

โปรดทราบว่า funcs เหล่านี้จะสร้าง pixs ใหม่
ระวังการใช้หน่วยความจำ GPU มากเกินไป funcs บางตัวสร้าง pixs หลายตัว

โหมดบิตสูง

เอฟเฟกต์บางอย่างเช่น Disclacepix และ Slopepix จะได้รับประโยชน์จากความลึกที่สูงขึ้น
ค่าเริ่มต้นคือ 8 บิต เปลี่ยนเป็นแบบนี้: PixelKit.main.render.bits = ._16

เปิดใช้งานโหมดบิตสูงก่อนที่คุณจะสร้างพิกซ์ใด ๆ

หมายเหตุทรัพยากรยังไม่รองรับบิตที่สูงขึ้น
ขณะนี้มีการชดเชยแกมม่าบางส่วนด้วยทรัพยากร

โลหะ

 let metalPix = MetalPIX ( at : . _1080p , code :
    """
    pix = float4(u, v, 0.0, 1.0);
    """
) 

 let metalEffectPix = MetalEffectPIX ( code :
    """
    float gamma = 0.25;
    pix = pow(input, 1.0 / gamma);
    """
)
metalEffectPix . input = CameraPIX ( ) 

 let metalMergerEffectPix = MetalMergerEffectPIX ( code :
    """
    pix = pow(inputA, 1.0 / inputB);
    """
)
metalMergerEffectPix . inputA = CameraPIX ( )
metalMergerEffectPix . inputB = ImagePIX ( " img_name " ) 

 let metalMultiEffectPix = MetalMultiEffectPIX ( code :
    """
    float4 inPixA = inTexs.sample(s, uv, 0);
    float4 inPixB = inTexs.sample(s, uv, 1);
    float4 inPixC = inTexs.sample(s, uv, 2);
    pix = inPixA + inPixB + inPixC;
    """
)
metalMultiEffectPix . inputs = [ ImagePIX ( " img_a " ) , ImagePIX ( " img_b " ) , ImagePIX ( " img_c " ) ]

เครื่องแบบ:

 var lumUniform = MetalUniform ( name : " lum " )
let metalPix = MetalPIX ( at : . _1080p , code :
    """
    pix = float4(in.lum, in.lum, in.lum, 1.0);
    """ ,
    uniforms : [ lumUniform ]
)
lumUniform . value = 0.5

หมายเหตุ:

• หากต้องการเข้าถึงกล้องบน MacOS ให้ตรวจสอบกล้องในแอพ Sandbox ในการตั้งค่าโครงการ XCode ของคุณภายใต้ความสามารถ

---

แรงบันดาลใจจาก TouchDesigner ที่สร้างโดย Anton Heestand XYZ