CGImage renders as 4 separate grayscale images

Using Swift
, ,
1

I'm trying to write a basic ray tracer in Swift. My function produces raw RGB data, from which a CGImage is created, which is then rendered in a SwiftUI view using the Image(CGImage, ...) constructor. However, the image renders as 4 separate side-by-side grayscale images.
I'm using RGBX (ignored alpha channel) format, when I tried switching to just RGB (3 channels), the image was rendered as 3 grayscale images, so I believe it is somehow related to the channels.
I'm using CGContext.makeImage to create the image, and my CGContext is created as such:

let colorSpace = CGColorSpaceCreateDeviceRGB()
CGContext(
    data: self.imageBuffer,
    width: self.width,
    height: self.height,
    bitsPerComponent: 8,
    bytesPerRow: BYTES_PER_PIXEL * width,
    space: colorSpace,
    bitmapInfo: CGImageAlphaInfo.noneSkipLast.rawValue
)

where self.imageBuffer is an UnsafeMutablePointer<UInt8>, allocated with width * height * BYTES_PER_PIXEL capacity, and BYTES_PER_PIXEL is 4.

I am wrapping the imageBuffer in self.imageData: Data using:

self.imageData = Data(bytesNoCopy: self.imageBuffer, count: width * height * BYTES_PER_PIXEL, deallocator: .free)

And I update pixels in the image with this:

let pixelBytes = [
    UInt8(min(Float(1), pixel.x) * 255),
    UInt8(min(Float(1), pixel.y) * 255),
    UInt8(min(Float(1), pixel.z) * 255),
    UInt8(0) // Alpha (unused, for padding)
]
let pixelDataRange = (x + width * y)..<(x + width * y + BYTES_PER_PIXEL)
self.imageData.replaceSubrange(pixelDataRange, with: pixelBytes)

Is there something I'm doing wrong? I've been working on this bug for a couple days now and cannot get the image to render properly.

2

This is not quite on-topic here.

Summary

I'd leave min(Float(1), pixel.x) to your judgement (e.g. could pixel.x be bigger than one? or negative?), but your subsequent math looks way off:

Normally it's: y * bytesPerRow + x * bpp, (using bpp for bytesPerPixel), which (assuming no padding) could be substituted to y * width * bpp + x * bpp, and further: bpp*(y*width + x), so:

let pixelRange = bpp*(y*width + x) ..< bpp*(y*width + x + 1)

(bpp is 4 in your case)