CIFilter + SpriteKit broken behavior on iOS 16

Question

ThomasMojo OP

Created Sep ’22

Replies 5

Boosts 4

Views 3k

Participants 5

Hello there 👋

I've noticed a different behavior between iOS 15 and iOS 16 using CIFilter and SpriteKit. Here is a sample code where I want to display a text and apply a blurry effect on the same text in the back of it.

Here is the expected behavior (iOS 15):

And the broken behavior on iOS 16:

It looks like the text is rotated around the x-axis and way too deep.

Here is the sample code:

 import UIKit
import SpriteKit
 
class ViewController: UIViewController {
    var skView: SKView?
    var scene: SKScene?
 
    override func viewDidLoad() {
        super.viewDidLoad()
        skView = SKView(frame: view.frame)
        scene = SKScene(size: skView?.bounds.size ?? .zero)
        scene?.backgroundColor = UIColor.red
        view.addSubview(skView!)
        skView!.presentScene(scene)
 
        let neonNode = SKNode()
        let glowNode = SKEffectNode()
        glowNode.shouldEnableEffects = true
        glowNode.shouldRasterize = true
        let blurFilter = CIFilter(name: "CIGaussianBlur")
        blurFilter?.setValue(20, forKey: kCIInputRadiusKey)
        glowNode.filter = blurFilter
        glowNode.blendMode = .alpha
        let labelNode = SKLabelNode(text: "MOJO")
        labelNode.fontName = "HelveticaNeue-Medium"
        labelNode.fontSize = 60
        let labelNodeCopy = labelNode.copy() as! SKLabelNode
        glowNode.addChild(labelNode)
        neonNode.addChild(glowNode)
        neonNode.addChild(labelNodeCopy)
        neonNode.position = CGPoint(x: 200, y: 200)
        scene?.addChild(neonNode)
    }
}

Boost

Answer 1

isguyra OP

Sep ’22

I'm getting this as well. Any solution for this?

0

Answer 2

ThomasMojo OP

Sep ’22

Hey @isguyra, I didn't any workaround yet. It seems that all blur filter are bugging the same way. Hope to have a feedback from Apple team soon 🙏

0

Answer 3

nyquist OP

Oct ’22

Same issue here.

0

Answer 4

gargolev OP

Jan ’23

I have the similar issue with some differences:

one SKEffectNode contains multiple SKShapeNodes (circles) which are split into "abstract" groups
if i move the circles from the first group then everything is ok, glitch appears when I move the second group
if i move the second group before the first one then I see no glitches

0

Answer 5

frizlab OP

Dec ’23

I did reproduce the issue in iOS 16.0 (simulator); the bug looks fixed in iOS 16.1 as the bug could not be reproduced in a simulator w/ this version and above.
It’s probably related to the shaders having their y axis inverted on iOS 16.0 too…

0

	import UIKit
	import SpriteKit

	class ViewController: UIViewController {
	var skView: SKView?
	var scene: SKScene?

	override func viewDidLoad() {
	super.viewDidLoad()
	skView = SKView(frame: view.frame)
	scene = SKScene(size: skView?.bounds.size ?? .zero)
	scene?.backgroundColor = UIColor.red
	view.addSubview(skView!)
	skView!.presentScene(scene)

	let neonNode = SKNode()
	let glowNode = SKEffectNode()
	glowNode.shouldEnableEffects = true
	glowNode.shouldRasterize = true
	let blurFilter = CIFilter(name: "CIGaussianBlur")
	blurFilter?.setValue(20, forKey: kCIInputRadiusKey)
	glowNode.filter = blurFilter
	glowNode.blendMode = .alpha
	let labelNode = SKLabelNode(text: "MOJO")
	labelNode.fontName = "HelveticaNeue-Medium"
	labelNode.fontSize = 60
	let labelNodeCopy = labelNode.copy() as! SKLabelNode
	glowNode.addChild(labelNode)
	neonNode.addChild(glowNode)
	neonNode.addChild(labelNodeCopy)
	neonNode.position = CGPoint(x: 200, y: 200)
	scene?.addChild(neonNode)
	}
	}