Interpolating colors on an EditableMesh

Help and Feedback Scripting Support
#1

Hey guys so I’ve been messing around with an editable mesh ocean system for the past few hours. It’s my first time using editable meshes and I just got around to coloring the mesh. What I want is basically depth coloring. So when the waves get higher or lower, the color should smoothly interpolate between the brightest and darkest colors (which I pre-determine).

I can’t seem to get it to interpolate smoothly. I have it somewhat working but it’s not what I’m intending. I want perfect smoothness, not these rough visible edges between colors. I’m also just very confused on how colors work on editable meshes anyway. Like why does it need a table of colors? Am I using it wrong?

I’m new to editable meshes and not very good at math or interpolation so any help is greatly appreciated!

Here is what it currently looks like:

Here’s the code handling the colors so far:

local peakColors = {
	editableMesh:AddColor(Color3.fromRGB(61, 171, 255), 0),
	editableMesh:AddColor(Color3.fromRGB(61, 171, 255), 0),
	editableMesh:AddColor(Color3.fromRGB(61, 171, 255), 0)
}

local baseColors = {
	editableMesh:AddColor(Color3.fromRGB(50, 141, 207), 0),
	editableMesh:AddColor(Color3.fromRGB(50, 141, 207), 0),
	editableMesh:AddColor(Color3.fromRGB(50, 141, 207), 0)
}

local deepColors = {
	editableMesh:AddColor(Color3.fromRGB(31, 86, 126), 0),
	editableMesh:AddColor(Color3.fromRGB(31, 86, 126), 0),
	editableMesh:AddColor(Color3.fromRGB(31, 86, 126), 0)
}

--//RunService
runService.Heartbeat:Connect(function(dt: number)
	for y = 1, GRID do
		for x = 1, GRID do
			local vertId = vertices[y][x]
			local vertPos = editableMesh:GetPosition(vertId)
			
			local newPos = Vector3.new(vertPos.X, 0, vertPos.Z)
			for _, wave in pairs(wave_settings) do
				local currentTime = os.clock() / wave.TIME_MOD
				local worldPos = GetWorldPos(mesh, vertPos)
				local dir = GetDirection(worldPos, wave.DIRECTION)
				newPos += Vector3.new(0, Gerstner(vertPos, wave.RESOLUTION, dir, wave.AMPLITUDE, wave.GRAVITY, currentTime), 0)
			end
			
			editableMesh:SetPosition(vertId, newPos)
			
			-- the code below attempts to interpolate the colors
			local facesToUpdate = editableMesh:GetFacesWithAttribute(vertId)
			
			for _, face in pairs(facesToUpdate) do
				local baseColor = editableMesh:GetColor(baseColors[1])
				local peakColor = editableMesh:GetColor(peakColors[1])
				local deepColor = editableMesh:GetColor(deepColors[1])
				
				local t = math.clamp((vertPos.Y + 7) / 13, 0, 1) -- Normalize Y to [0, 1] between -7 and 6
				local colorCalc = baseColor:Lerp(vertPos.Y > 0 and peakColor or deepColor, t)
				
				local newColor = editableMesh:AddColor(colorCalc, 0)
				local color = {newColor, newColor, newColor}
				editableMesh:SetFaceColors(face, color)
			end
		end
	end
end)