RbxShader Tutorial

[seanjosep39 (Sean)]

RbxShader Tutorial

If you weren’t guided here by one of my links and just happened to stumble upon this post, this is a tutorial on how to make shader programs for RbxShader.

---

I. Installation

Go to the GitHub repository of the project, select the latest release and download the attached .rbxm file!

After that, insert the file into ReplicatedStorage, where you should see the module called RbxShader pop up!

---

II. Creating a Shader Program

At it’s very core, a shader program will have to look something like this:

--[=[
	Title Of My Shader
	Couple of things I want to say...
]=]

--!native
-- ^^^ this line makes the script run natively, making execution faster!

-- /* NOTE: You might want to do this as this module contains GLSL
--  math functions that can help abstract a lot of calculations
-- and ensure compatibility with porting shaders from Shadertoy. */
local g = require(game.ReplicatedStorage:FindFirstChild('RbxShader', true).GraphicsMathLab)

-- /* Write necessary task-specific functions here... */

return {
	-- /* This one is optional */
	CONFIGURATION = {
		InterlaceFactor = 2
	};
	-- // Image buffer
	mainImage = function (
		fragColor : Vector3 ,
		fragCoords : Vector2 ,
		iTime : number ,
		iTimeDelta : number ,
		iResolution : Vector2
	)
		-- /* pixel value calculations here... */
		
		-- /* we finalize the color of the pixel by returning 4 values
		-- that represent the RGBA channels, the function called
		-- "g.v3_rgb" disects a `Vector3 into a tuple that represent the
		-- the RGB values of the pixel.
		--
		-- The reason why we calculate colors using Vector3's is
		-- because it provides a lot more methods for manipulation
		-- than Color3's. */
		return g.v3_rgb(fragColor)
	end,
}

I won’t go into teaching you how to make shaders, as there are already tons of resources out there online that can teach you how to do so better than how I could,

Just like kishimisu!

---

III. Running The Shader Program

1. Create a LocalScript.

2. Require the module.

3. To create an environment for the shader to run on, call RbxShader.new() and fill in the following parameters required, which are:
   Host : LocalScript - give a LocalScript that will serve as the host of the shader.
   Screen : GuiBase - give a UI object where the shader will be displayed.
   CanvasSize : Vector2 - create a Vector2 representing the size of the canvas in pixels.
   Configurations : {} - optional, but here is where you dictate the interlacing factor, and how many times the canvas will be split up for parallelization (must be a multiple of four)
   Shader : ModuleScript - obviously the shader itself
   ShaderID : LocalScript - give a string that will serve as the identifier of the whole program’s process

4. After you’ve done that, you can run the shader by simply calling Shader.run( Parent : LocalScript ) , and filling the parent parameter with the same parent from the .new(), click play and voilà! The shader is running!

It would look something like this:

--[=[
	========== Host ==========
	A sample script on how you
	would run a shader.
]=]

--!native
-- ^^^ this line makes the script run natively, making execution faster!

-- // Dependencies
local RbxShader = require(game.ReplicatedStorage:FindFirstChild('RbxShader', true))

-- // Configurations
local CONFIGURATIONS = {
	InterlaceFactor = 1 ,
	ScreenDivision = 4
}

local CANVAS_SIZE = Vector2.new(180, 120)
local SHADER = script.GravitySucks

local SCREEN = Instance.new('ScreenGui')
SCREEN.Parent = Client.PlayerGui
SCREEN.IgnoreGuiInset = true
SCREEN.ResetOnSpawn = false

RbxShader.new( script , SCREEN , CANVAS_SIZE , CONFIGURATIONS , SHADER , SHADER.Name )
RbxShader.run( script )

---

And we’re done! If you’ve ever come across with a problem that normally shouldn’t happen, you can notify me by making a reply on the orignal post. Happy shading!