RbxShader Tutorial

RbxShader Tutorial

If you weren’t guided by one of my links here 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 this 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, this will serve as the “host” of the shader.

  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:
    Parent : LocalScript - fill this in by normally referencing the script itself
    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

  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

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

Also, you can stop the shader anytime by calling RbxShader.stop( Parent : LocalScript ) and filling in the parent parameter.


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! :heartpulse: