Normal and bump mapping are techniques used in 3D graphics to fake additional surface detail on an object without adding any additional polygons. Whilst bump mapping uses simple greyscale images (where light areas appear raised) normal mapping, used by SceneKit, requires RGB images where the red, green and blue channels define the displacement along the x, y and z axes respectively. 

Core Image includes tools that are ideal candidates to create bump maps: gradients, stripes, noise and my own Voronoi noise are examples. However, they need an additional step to convert them to normal maps for use in SceneKit. Interestingly, Model I/O includes a class that will do this, but we can take a more direct route with a custom Core Image kernel. 

The demonstration project for this blog post is SceneKitProceduralNormalMapping.

Creating a Source Bump Map


The source bump map is created using a CIGaussianGradient filter which is chained to a CIAffineTile:


    let radialFilter = CIFilter(name: "CIGaussianGradient", withInputParameters: [
        kCIInputCenterKey: CIVector(x: 50, y: 50),
        kCIInputRadiusKey : 45,
        "inputColor0": CIColor(red: 1, green: 1, blue: 1),
        "inputColor1": CIColor(red: 0, green: 0, blue: 0)
        ])

    let ciCirclesImage = radialFilter?
        .outputImage?
        .imageByCroppingToRect(CGRect(x:0, y: 0, width: 100, height: 100))
        .imageByApplyingFilter("CIAffineTile", withInputParameters: nil)
        .imageByCroppingToRect(CGRect(x:0, y: 0, width: 500, height: 500))

Creating a Normal Map Filter

The kernel to convert the bump map to a normal map is fairly simple: for each pixel, the kernel compares the luminance of the pixels to its immediate left and right and, for the red output pixel, returns the difference of those two values added to one and divided by two. The same is done for the pixels immediately above and below for the green channel The blue and alpha channels of the output pixel are both set to 1.0:


        float lumaAtOffset(sampler source, vec2 origin, vec2 offset)
        {
            vec3 pixel = sample(source, samplerTransform(source, origin + offset)).rgb;
            float luma = dot(pixel, vec3(0.2126, 0.7152, 0.0722));
            return luma;
        }
            
        kernel vec4 normalMap(sampler image) \n" +
       
            vec2 d = destCoord();" +
            
            float northLuma = lumaAtOffset(image, d, vec2(0.0, -1.0));
            float southLuma = lumaAtOffset(image, d, vec2(0.0, 1.0));
            float westLuma = lumaAtOffset(image, d, vec2(-1.0, 0.0));
            float eastLuma = lumaAtOffset(image, d, vec2(1.0, 0.0));
            
            float horizontalSlope = ((westLuma - eastLuma) + 1.0) * 0.5;
            float verticalSlope = ((northLuma - southLuma) + 1.0) * 0.5;
            
            return vec4(horizontalSlope, verticalSlope, 1.0, 1.0);
        }

Wrapping this up in a Core Image filter and bumping up the contrast returns a normal map:




Implementing the Normal Map

A SceneKit material's normal content can be populated with a CGImage instance, so we can update the code above to chain the tiled radial gradients to the new filter and, should we want to, a further color controls filter to tweak the contrast:


    let ciCirclesImage = radialFilter?
        .outputImage?
        .imageByCroppingToRect(CGRect(x:0, y: 0, width: 100, height: 100))
        .imageByApplyingFilter("CIAffineTile", withInputParameters: nil)
        .imageByCroppingToRect(CGRect(x:0, y: 0, width: 500, height: 500))
        .imageByApplyingFilter("NormalMap", withInputParameters: nil)
        .imageByApplyingFilter("CIColorControls", withInputParameters: ["inputContrast": 2.5])
    
    let context = CIContext()

    let cgNormalMap = context.createCGImage(ciCirclesImage!,
                                            fromRect: ciCirclesImage!.extent)

Then, simply define a material with the normal map:


    let material = SCNMaterial()
    material.normal.contents = cgNormalMap

Core Image for Swift

All the code to accompany this post os available from my GitHub repository. However, if you'd like to learn more about how to wrap the Core Image Kernel Language code in a Core Image filter or explore the awesome power of custom kernels, may I recommend my book, Core Image for Swift.
Core Image for Swift is available from both Apple's iBooks Store or, as a PDF, from Gumroad. IMHO, the iBooks version is better, especially as it contains video assets which the PDF version doesn't.




0

Add a comment

Primordial Particle System in SideFX Houdini
5
"Sparse Vermiform" Rendering of Fluids with Pressure Based Color
3
Particle Advection by Gray Scott Reaction Diffusion Revisited
Particle Advection by Reaction Diffusion in SideFX Houdini
1
Revisiting Mitosis in SideFX Houdini
4
Faux Grain / Fluid Interaction in Houdini
1
Parametric Fibonacci Spheres in Houdini
Houdini Grain Solver with Custom VEX Forces
Animating Rayleigh-Taylor Instability in SideFX Houdini
1
Faking Toroidal Eddies in Side FX Houdini
Mixing Fluids in Houdini
Animating Gravitational Tides with Houdini FLIP Fluids
1
Houdini FLIP Fluid & Radial Gravity
1
Reaction Diffusion in SideFX Houdini
2
Animating Planet Engulfment in Houdini
1
Simulating Accretion with Houdini's Grains Solver
Chaotic Magnetic Pendulum with Custom Radial Forces in Houdini
More Chaos in Houdini: Simulating a Double Pendulum
Creating a Geometric Structure from Mitosis
2
Simulating Mitosis in Houdini
4
Stripy Viscous Fluid Impacts in Houdini
1
Using Houdini VOPs to Deform Geometry
1
Creating a Swarm Chemistry Digital Asset in Houdini
Swarm Chemistry in SideFX Houdini
1
Randomly Transforming Scattered Cones in Houdini
1
Metaball Morphogenesis in Houdini
Melting Geometry in Houdini
2
Simulating Belousov-Zhabotinsky Reaction in Houdini
Chaos in Houdini! Modeling Strange Attractors with Particles
Experimenting with Impacts in SideFX Houdini
Chaos in Swift! Visualising the Lorenz Attractor with Metal
Swift 3.0 for Core Image Developers
4
A Core Image Transverse Chromatic Aberration Filter in Swift
1
Random Numbers in Core Image Kernel Language
Core Image for Swift Version 1.3
Core Image for Swift Version 1.3
Nodality for AudioKit: Node Based Synth for iPad
Histogram Equalisation with Metal Performance Shaders
A Histogram Display Component in Swift for iOS
Simulating Depth-of-Field with Variable Bokeh in Core Image
Simulating Bokeh with Metal Performance Shaders
1
Creating a Lens Flare Filter in Core Image
Loading, Filtering & Saving Videos in Swift
3
vImage Histogram Functions Part II: Specification
Histogram Functions in Accelerate vImage
1
New Core Image Procedural Noise Generators for Filterpedia
Recreating Kai's Power Tools Goo in Swift
11
Creating Procedural Normal Maps for SceneKit
New Custom Core Image Filters
1
A Look at Perspective Transform & Correction with Core Image
8
Creating a Custom Variable Blur Filter in Core Image
3
Core Image for Swift v1.2 Released!
3
Creating a Selective HSL Adjustment Filter in Core Image
Creating a Bulging Eyes Purikura Effect with Core Image
1
Sweetcorn: A Node Based Core Image Kernel Builder
1
Core Image for Swift: Advanced Image Processing for iOS
2
Properly Typed Selectors in Xcode 7.3 beta 4
7
Core Image for Swift Available for Pre-Order!
10
Playing with Interpolation Functions in Swift
1
Metal Kernel Functions as Core Image Filter Engines
New Custom Core Image Filters Added to Filterpedia
5
Computational Fluid Dynamics in CoreImage with CIKernel
3
Creating a Slide Show App with Core Image Transitions
Filterpedia: Core Image Filter Explorer
5
CartoonEyes: Compositing Cartoon Eyes over Face from Front Camera in Swift
3
Apple Pencil Controlled Christmas Tree Bowling with SceneKit
1
BristlePaint: Embossed Painting with Individual Bristles using SpriteKit Normal Mapping
1
Scribe: A Handwriting Recognition Component for iOS
2
MercurialPaint: Globular Embossed Painting with Metal & Core Image
MercurialText: Embossed Type using SceneKit and CIShadedMaterial
1
FurrySketch: Hirsute Drawing with an Apple Pencil
PencilSynth - An Apple Pencil Controlled Synthesiser
PencilController - Using Apple Pencil as a 3D Controller for Image Editing
5
A Look at Agents, Goals & Behaviours in GameplayKit
PencilScale - Using an Apple Pencil with an iPad Pro as an Electronic Scale
2
A First Look at Metal Performance on the iPad Pro
Smooth Drawing for iOS in Swift with Hermite Spline Interpolation
3
Introducing Image Processing in Metal
Swift Hierarchical Selector Component based on UIPickerView & UICollectionView
The Plum-O-Meter: Weighing Plums Using 3D Touch in Swift
27
Book Review: Swift Documentation Markup by Erica Sadun
1
3D Touch in Swift: A Retrospective
3D ReTouch: An Experimental Retouching App Using 3D Touch
1
ForceZoom: Popup Image Detail View using 3D Touch Peek
Globular: Colourful Metaballs Controlled by 3D Touch
2
ForceSketch: A 3D Touch Drawing App using CIImageAccumulator
DeepPressGestureRecognizer - A 3D Touch Custom Gesture Recogniser in Swift
2
Rotatable: A Swift Protocol Extension to Rotate any UIView
ChromaTouch: a 3D Touch Colour Picker in Swift
3
3D Touch in Swift: Implementing Peek & Pop
1
A First Look at Metal Performance on the iPhone 6s
Applying Gaussian Blur to UIViews with Swift Protocol Extensions
7
Advanced Touch Handling in iOS9: Coalescing and Prediction
3
A Swift Node Based User Interface Component for iOS
2
Using an iPhone as a 3D Mouse with Multipeer Connectivity in Swift
6
A Swift Nixie Tube Display Component
CoreMotion Controlled 3D Sketching on an iPhone with Swift
2
iOS Live Camera Controlled Particles in Swift & Metal
6
Metal Performance Shaders & Fallback Copy Allocators
Event Dispatching in Swift with Protocol Extensions
1
Hybrid Marking Menu / Radial Slider Swift Component for iOS
About Me
About Me
Labels
Labels
Blog Archive
Loading