How to Create Chromatic Aberration Effect

[VonsRevenges (Von)]

This method is not optimized, I am only giving you the main idea so, so you know how it is possible, so you do it on your own

---

Introduction

Visual effects can greatly enhance the atmosphere of a game. Chromatic aberration is one such effect that can give your game a unique, stylistic edge by adding a subtle distortion of colors, often seen in vintage photography or to create a disorienting effect. In this tutorial, I’ll guide you through the steps to create a chromatic aberration effect, adding a professional touch to your game’s visuals.

Before we start, make sure you have a basic understanding of Roblox Studio and scripting

Please note that the use of continuous updates and frequent object management operations can impact game performance, particularly on lower-end devices.

Step 1: Set Up Your Environment

1. Insert a Screengui.
   
2. Insert 3 Viewportframes.
   
3. Name them Red, Green and Blue
   
4. Insert WorldModel in each frame:
   
   WorldModel basically provides some physics features to the viewportframe
   Read more about it here

Step 2: Adjust the Viewportframes Transparency and Colors

Settings for Red Viewportframe:

Settings for Green Viewportframe:

Settings for Blue Viewportframe:

Now time to start scripting!

Step 3: Scripting the Chromatic Aberration Effect

1. Insert a local script inside the Screengui
   
2. Create a table for viewportframes
   
3. Cloning function:
   We first loop through the children of the workspace. If the object is not a terrain or a camera, we loop through the table of the ViewportFrames, finding the WorldModel inside each one. If a WorldModel exists and the object is not already inside the WorldModel (to prevent duplication), we clone the object, check if the cloned part exists, and then finally parent it to the WorldModel.
   
   
4. Cleaning Function:
   We first loop through the viewportFrames. For each viewport, we find the WorldModel inside it. If a WorldModel exists, we then loop through its children. For each child, we destroy it
   
   
5. SetCamera Function:
   The setCamera function updates the CurrentCamera property of each ViewportFrame in the viewportFrames table to match the CurrentCamera of the workspace. After defining the function, it is immediately called to apply the changes.
   
6. Updating Function:
   This function ensures that the cloneObjects and cleanUpObjects functions run continuously and match with the game’s rendering process. By using RenderStepped, the update occurs every frame, providing a consistent and smooth experience. The task.wait() adds a small delay to potentially balance the load, preventing the cleanUpObjects function from executing immediately after cloneObjects.
   

The End

Final Code:

Result:

How Would You Rate This Tutorial?

• 5 - Excellent: The tutorial was clear, comprehensive, and very helpful.
• 4 - Good: The tutorial was helpful and well-explained, with minor areas for improvement.
• 3 - Average: The tutorial was okay but could use improvements.
• 2 - Poor: The tutorial had some useful information but was lacking in key areas.
• 1 - Very Poor: The tutorial was unclear or unhelpful.

[awry_y (Harper_Clark)]

Your way seems to be extremely unoptimized, to be honest. As well as providing the code as an image? Not really convenient.

I would suggest using this module to help fix performance.

[VonsRevenges (Von)]

@awry_y

Your way seems to be extremely unoptimized,

I’m aiming to keep things simple and accessible while ensuring that readers understand the concepts.

@awry_y

As well as providing the code as an image? Not really convenient.

Including the code as an image is intentional; it helps to encourage learning rather than just copying

[awry_y (Harper_Clark)]

@VonsRevenges

I’m aiming to keep things simple and accessible while ensuring that readers understand the concepts.

Keeping things simple should also include properly optimizing things. Plus, that module is already simpler to use than your implementation and optimized. If you don’t consider optimization than this tutorial is simply useless.

@VonsRevenges

Including the code as an image is intentional; it helps to encourage learning rather than just copying

It just makes the tutorial annoying.

[MikeartsRBLX (V_rdyx)]

great tutorial, this is something that will come useful in the future for my game. straight to the bookmark

[VonsRevenges (Von)]

I understand the importance of optimization and will definitely take that into account for future tutorials. My goal with this one was to balance simplicity with educational value, but I appreciate your perspective. If you have any suggestions for optimizing the approach or improving the tutorial, I’d be grateful!

[https_KingPie]

@awry_y

Keeping things simple should also include properly optimizing things. Plus, that module is already simpler to use than your implementation and optimized. If you don’t consider optimization than this tutorial is simply useless.

It’s a tutorial - not necessarily a drag and drop resource (it’s not in #resources:community-resources for a reason). As long as OP is displaying functional proof of concept of how to create a Chromatic Aberration effect (which they are), I’m not sure where the critique is coming from. The method is clear and replicable. If people want to take it in different directions (including more optimized directions) they are able to do that - OP is just here to point them in the direction of it.

[awry_y (Harper_Clark)]

Adding a module in s tutorial doesn’t make it into a resource. I keep saying to optimise because the current implementation seems to lag the game so much that it would not work for low end devices and therefore using what I said, that is the module, would first, make things easier as it’s already easy to use and second, make things optimised.

This tutorial would be useless for low end devices. I know people can just disable it but it would still render it useless.

Op could also make an alternative section with optimised code.

[TheAccount757879]

This looks great .I remember trying to accomplish something similar some time ago and I ended up making this: An effect similar to stereoscopic 3d effect/chromatic aberration/anaglyph I am posting this just because I noticed that you are using viewport frames and I know that they have some problems when it comes to lighting. Feel free to take elements from this if they might be useful for your approach though.

[VonsRevenges (Von)]

Thank you, I will try that and i will also look into optimizing the system better