Integrated Functions

On this page, you will explore the functions that the Upside Engine passes as parameters to your shading function, enabling you to create interesting effects.

---

Shader Functions

r, g, b, a texture(source: ImageLabel, position: Vector2)

• source The image from which the specified pixel is read.

• position It's the position of the pixel to read.

• returns Returns the RGBA values of a pixel at a specified position and returns them as numbers.

x, y rotate(centre: Vector2, position: Vector2, degrees: number)

• centre The position that will be used as the center when rotating the other pixels.

• position The position of the pixel to be rotated.

• degrees The number of degrees you want to rotate that pixel.

• returns Returns the rotated position of the pixel as numbers.

Example

Let's apply the image from a camera to our water texture. Initially, the camera image will appear in the top left corner, but we can adjust its position to a more suitable location. To do this, we will modify its position by subtracting an offset, which is a Vector2 that allows us to move the camera image across the texture.

local replicatedStorage = game:GetService("ReplicatedStorage")
local packages = replicatedStorage:WaitForChild("packages")

local upsideEngine = require(packages:WaitForChild("UpsideEngine"))
local source = Instance.new("ImageLabel")
source.Image = "rbxassetid://cameraId"

@native
local function shadingFunction(params: upsideEngine.ShadingParams)
    local offset = Vector2.new(60, 80)
    local position = Vector2.new(params.x, params.y)
    local r, g, b, a = params.texture(source, position - offset)

    params.red += r
    params.green += g
    params.blue += b
    params.opacity += a
end

return shadingFunction

As you can see, the camera image appears in the water:

But it has a bluish tint. This happens because we are blending the water's pixel colors with the camera's. If we want to display the pure camera pixels, we can do the following:

local replicatedStorage = game:GetService("ReplicatedStorage")
local packages = replicatedStorage:WaitForChild("packages")

local upsideEngine = require(packages:WaitForChild("UpsideEngine"))
local source = Instance.new("ImageLabel")
source.Image = "rbxassetid://cameraId"

@native
local function shadingFunction(params: upsideEngine.ShadingParams)
    local offset = Vector2.new(60, 80)
    local position = Vector2.new(params.x, params.y)
    local r, g, b, a = params.texture(source, position - offset)

    if a == 0 then
        return
    end    

    params.red = r
    params.green = g
    params.blue = b
    params.opacity = a
end

return shadingFunction

As you can see, now the camera looks normal:

Perfect, now let's use the rotate function. With this function, we'll rotate the water image around itself. Since the image resolution is 128x128, we'll use the position 64, 64 as the center. Additionally, we'll use clock to make our image rotate continuously, multiplying it by the desired rotational speed.

local replicatedStorage = game:GetService("ReplicatedStorage")
local packages = replicatedStorage:WaitForChild("packages")
local upsideEngine = require(packages:WaitForChild("UpsideEngine"))

@native
local function shadingFunction(params: upsideEngine.ShadingParams)
    local clock = os.clock()    
    local speed = 25

    local centre = Vector2.new(64, 64)
    local position = Vector2.new(params.x, params.y)

    local rx, ry = params.rotate(centre, position, clock * speed)
    params.x = rx
    params.y = ry
end

return shadingFunction

final result: