Why are saved photos appearing white? (also the sky is white)?

You can write your topic however you want, but you need to answer these questions:

  1. **What do you want to achieve? I want the photos to have a background and mainly, save properly

  2. **What is the issue? Saved photos are appearing as white.

  3. **What solutions have you tried so far? A lot.

local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")
local TweenService = game:GetService("TweenService")
local Debris = game:GetService("Debris")
local player = Players.LocalPlayer
local camera = workspace.CurrentCamera

-- Get the necessary GUI elements
local gui = player:WaitForChild("PlayerGui"):WaitForChild("Camera")
local photoFrame = gui:WaitForChild("PhotoFrame")
local viewport = photoFrame:WaitForChild("ViewportFrame")
local photoAlbum = gui:WaitForChild("PhotoAlbum")
local photoList = photoAlbum:WaitForChild("Photos")
local uiGridLayout = photoList:WaitForChild("UIGridLayout")  -- Using UIGridLayout instead of UIListLayout
local cameranoise = game.StarterPlayer.StarterCharacterScripts.click
-- Position PhotoAlbum in the center
photoAlbum.Size = UDim2.new(.8, 0, .8, 0)  -- Adjust the size as needed
photoAlbum.Position = UDim2.new(0.5, 0, 0.5, 0)  -- Center the frame on screen
photoAlbum.AnchorPoint = Vector2.new(0.5, 0.5)  -- Set the anchor point to the center
photoAlbum.BackgroundColor3 = Color3.fromRGB(30, 30, 30)  -- Background color
photoAlbum.BackgroundTransparency = 0.2
photoAlbum.BorderSizePixel = 0
photoAlbum.Visible = false  -- Initially hidden

-- Set UIGridLayout for grid arrangement
uiGridLayout.CellSize = UDim2.new(0, 130, 0, 130)  -- Size of each photo
uiGridLayout.FillDirection = Enum.FillDirection.Horizontal  -- Arrange items horizontally
uiGridLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center  -- Center the items horizontally
uiGridLayout.VerticalAlignment = Enum.VerticalAlignment.Top  -- Align the items at the top vertically

-- Function to update the canvas size for scrolling

local function updateCanvasSize()
	local photoCount = #photoList:GetChildren()  -- Get the number of photos
	local columnCount = math.floor(photoList.AbsoluteSize.X / uiGridLayout.CellSize.X.Offset)  -- How many columns can fit horizontally
	local rowCount = math.ceil(photoCount / columnCount)  -- Calculate rows based on the number of photos and columns

	-- Add some space at the bottom to prevent clipping of the last row
	local extraPadding = 10  -- Adjust the padding value as necessary

	-- Update canvas size based on rows, with added extra padding
	local newCanvasSize = UDim2.new(0, 0, 0, rowCount * uiGridLayout.CellSize.Y.Offset + extraPadding)  -- Adjust canvas height based on rows
	photoList.CanvasSize = newCanvasSize
end


local function addFakeSkybox(viewport, camPos)
	-- Skybox images (you'll need to set these to the correct sky textures)
	local skyboxImages = {
		Front = "rbxassetid://6444884337", -- Replace with actual skybox image IDs
		Back = "rbxassetid://6444884337",
		Left = "rbxassetid://6444884337",
		Right = "rbxassetid://6444884337",
		Up = "rbxassetid://6412503613",
		Down = "rbxassetid://6444884785"
	}

	-- Function to create a face of the skybox
	local function makeFace(imageId, position, rotation)
		local part = Instance.new("Part")
		part.Size = Vector3.new(500, 500, 1)
		part.Anchored = true
		part.CanCollide = false
		part.Transparency = 1
		part.CFrame = CFrame.new(camPos + position) * rotation
		part.Parent = viewport

		local surfaceGui = Instance.new("SurfaceGui")
		surfaceGui.Face = Enum.NormalId.Front
		surfaceGui.AlwaysOnTop = true
		surfaceGui.LightInfluence = 0
		surfaceGui.SizingMode = Enum.SurfaceGuiSizingMode.PixelsPerStud
		surfaceGui.PixelsPerStud = 50
		surfaceGui.Adornee = part
		surfaceGui.Parent = part

		local image = Instance.new("ImageLabel")
		image.Size = UDim2.fromScale(1, 1)
		image.Image = imageId
		image.BackgroundTransparency = 1
		image.BorderSizePixel = 0
		image.Parent = surfaceGui
	end

	local dist = 300 -- Distance from camera for the skybox faces

	-- Create skybox faces with different orientations
	makeFace(skyboxImages.Front, Vector3.new(0, 0, -dist), CFrame.Angles(0, math.pi, 0))
	makeFace(skyboxImages.Back, Vector3.new(0, 0, dist), CFrame.new())
	makeFace(skyboxImages.Left, Vector3.new(-dist, 0, 0), CFrame.Angles(0, math.pi / 2, 0))
	makeFace(skyboxImages.Right, Vector3.new(dist, 0, 0), CFrame.Angles(0, -math.pi / 2, 0))
	makeFace(skyboxImages.Up, Vector3.new(0, dist, 0), CFrame.Angles(math.pi / 2, 0, 0))
	makeFace(skyboxImages.Down, Vector3.new(0, -dist, 0), CFrame.Angles(-math.pi / 2, 0, 0))
end

local function takePhoto()
	print("Taking photo...")  
	photoFrame.Visible = true

	-- Create a new camera for the viewport
	local camClone = Instance.new("Camera")
	camClone.CFrame = CFrame.new(camera.CFrame.Position + Vector3.new(0, 0, -4))
	viewport.CurrentCamera = camClone
	-- Add PointLight to the camera so the scene is lit
	local light = Instance.new("PointLight")
	light.Brightness = 2
	light.Range = 50
	light.Parent = camClone



	-- Clear old clones in the viewport
	for _, child in ipairs(viewport:GetChildren()) do
		if child:IsA("BasePart") then
			child:Destroy()
		end
	end

	-- Add fake skybox to viewport
	addFakeSkybox(viewport, camClone.CFrame.Position)

	-- Clone visible BaseParts (excluding terrain)
	for _, obj in ipairs(workspace:GetDescendants()) do
		if obj:IsA("BasePart") and obj.Transparency < 1 and not obj:IsDescendantOf(workspace.Terrain) then
			local success, clone = pcall(function() return obj:Clone() end)
			if success then
				clone.Anchored = true
				clone.Parent = viewport
			else
				print("Failed to clone object: " .. obj.Name)
			end
		end
	end

	-- Simulate flash
	local flash = Instance.new("Frame")
	flash.Size = UDim2.fromScale(1, 1)
	flash.BackgroundColor3 = Color3.new(1, 1, 1)
	flash.BackgroundTransparency = 0
	flash.ZIndex = 10
	flash.Parent = gui
	TweenService:Create(flash, TweenInfo.new(0.3), {BackgroundTransparency = 1}):Play()
	Debris:AddItem(flash, 0.5)

	-- Save to album
	local photoClone = photoFrame:Clone()
	photoClone.Visible = true
	photoClone.Size = UDim2.new(0, 130, 0, 130)
	photoClone:ClearAllChildren()

	local newViewport = Instance.new("ViewportFrame")
	newViewport.Size = UDim2.fromScale(1, 1)
	newViewport.BackgroundTransparency = 1
	newViewport.CurrentCamera = camClone
	newViewport.Parent = photoClone
	camClone.Parent = newViewport
	-- Clone parts into new viewport
	for _, obj in ipairs(viewport:GetChildren()) do
		if obj:IsA("BasePart") then
			local partClone = obj:Clone()
			partClone.Anchored = true
			partClone.Parent = newViewport
		end
	end

	photoClone.Parent = photoList
	updateCanvasSize()
	wait(1)
	print("Photo taken and added to album.")
end
--load

local function loadSavedPhotos()
	local savedData = game.ReplicatedStorage:WaitForChild("GetSavedPhotos"):InvokeServer()

	-- Check if savedData is valid
	if not savedData or #savedData == 0 then
		print("No saved photos found.")
		return
	end

	print("Saved Data:", savedData)
	print("Loaded", #savedData, "saved photos.")

	for _, photo in ipairs(savedData) do
		print("Loaded photo data:", photo)

		local cfComponents = photo.cf
		local cf = CFrame.new(unpack(cfComponents))
		print("Loaded CFrame:", cf)

		-- Set up the photo frame
		local photoClone = photoFrame:Clone()
		photoClone.Visible = true
		photoClone.Size = UDim2.new(0, 130, 0, 130)
		photoClone:ClearAllChildren()

		-- Create the camera
		local camClone = Instance.new("Camera")
		local cfComponents = photo.cf
		local cf = CFrame.new(unpack(cfComponents))
		print("Loaded CFrame:", cf)

		camClone.CFrame = cf



		-- Create the viewport frame
		local newViewport = Instance.new("ViewportFrame")
		newViewport.Size = UDim2.fromScale(1, 1)
		newViewport.BackgroundTransparency = 1
		newViewport.CurrentCamera = camClone
		newViewport.Parent = photoClone
		camClone.Parent = newViewport


		-- Add PointLight to the camera so the scene is lit
		local light = Instance.new("PointLight")
		light.Brightness = 2
		light.Range = 50
		light.Parent = camClone

		-- Re-add fake skybox
		-- Re-add fake skybox
		addFakeSkybox(newViewport, cf.Position)
		newViewport.BackgroundColor3 = Color3.fromRGB(255, 0, 0)  -- Set red background temporarily
		-- Clone and add parts
		for _, obj in ipairs(viewport:GetChildren()) do
			if obj:IsA("BasePart") then
				local partClone = obj:Clone()
				partClone.Anchored = true
				partClone.Parent = newViewport
			end
		end


		-- Add photo to the list
		photoClone.Parent = photoList
	end

	updateCanvasSize()  -- Update the scrolling frame/UI
end


	
	loadSavedPhotos()










-- Toggle photo album visibility with P or ~ key
UserInputService.InputBegan:Connect(function(input, gpe)
	if gpe then return end

	if input.KeyCode == Enum.KeyCode.P then
		photoAlbum.Visible = not photoAlbum.Visible
		print("Toggled photo album visibility")  -- Debug print
	end
end)

-- Trigger taking a photo with the "E" key

UserInputService.InputBegan:Connect(function(input, gpe)
	if gpe then return end
	if input.KeyCode == Enum.KeyCode.E then
		takePhoto()
		-- Save to DataStore via RemoteEvent
		local camCFrame = camera.CFrame * CFrame.new(0, 0, -2)
		game.ReplicatedStorage:WaitForChild("SavePhotoEvent"):FireServer(camCFrame)
	end
end)

I have a data handler server script which im 99% is working fine

can you show the photos?
\\\\\