0

I am using a custom fragment shader to create a color gradient along the circular path of an SKShapeNode. Here is the result:

enter image description here

What can I do, in SpriteKit or in the custom shader, to eliminate the aliasing?

P.S. I'll want this to work on watchOS as well.

Fragment shader:

void main() {
    float normalizedPosition = v_path_distance / u_path_length;
    gl_FragColor = vec4(normalizedPosition, normalizedPosition, normalizedPosition, 1.0);
}

ViewController:

import UIKit
import SpriteKit

class ViewController: UIViewController {
    var skView: SKView {
        return view as! SKView
    }
    var scene: SKScene!

    override func viewDidLoad() {
        super.viewDidLoad()
        scene = SKScene(size: view.frame.size)
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        skView.presentScene(scene)

        // Create node
        let ringNode = SKShapeNode(circleOfRadius: scene.size.width / 4)
        ringNode.position = CGPoint(x: scene.frame.midX, y: scene.frame.midY)
        ringNode.lineWidth = 30

        // Apply shader
        ringNode.strokeShader = SKShader(fileNamed: "fragment.fsh")

        // Add node to scene
        scene.addChild(ringNode)
    }
}
pius
  • 119
  • 2
  • 2
  • 13
  • 1
    Your shader doesn't do any antialiasing. Shaders are happening at the GPU level so you are going to have to implement it yourself. Here is a forum that may help you along the way https://forums.developer.apple.com/thread/25443 – Knight0fDragon Nov 27 '18 at 15:53
  • 1
    You have to user SKCropNode with mask in order to get rid of sharp edges. Check out the solution in this [repo](https://github.com/davigr/GradientRingDemo). Cheers –  May 05 '19 at 00:27
  • Thanks guys. I no longer need this but your comments should be useful to someone looking at this later. – pius Jun 21 '19 at 04:53

0 Answers0