Meta Spark

Getting Started With SparkSL

Learn how to write simple shaders using SparkSL

By: Adam Ferriss
June 20, 2023
Meta Spark

Getting Started With SparkSL

Learn how to write simple shaders using SparkSL

By: Adam Ferriss
June 20, 2023

Scripting AR is a new video series where we invite Meta Spark experts from all over the world to demonstrate and discuss how they’re using JavaScript in their AR projects. As part of this series, we’ve asked each expert to contribute a short post highlighting just a few of the tips shared during their interview. Be sure to watch the full-length video below to learn more. Today’s contributor is Meta’s own Adam Ferriss (@adamferriss)

Hey everyone, I’m Adam, I’m an artist and creative coder on the Instagram team, and I’m excited to be sharing my interview today as part of the Scripting AR series. For this episode, we’re digging into how to write simple shaders using SparkSL, the shader language in Meta Spark Studio.

To help demonstrate what’s possible, we’re walking through a few examples you can find available on my GitHub repo, including SparkSL Colors, SparkSL Gradients & UVs, and SparkSL Basic Texturing. Watch the full episode now, and see my three tips below to help you get started using SparkSL on your own AR projects.

EPISODE 4

Writing Simple Shaders Using SparkSL

with Adam Ferriss

Something Went Wrong
We're having trouble playing this video.

Take the next step

Explore what’s possible with scripting in Meta Spark Studio

LEARN

See documentation and tutorials to learn more about scripting

Read more

CREATE

Download a sample template and start scripting your own effect today

Get template

There’s obviously a lot more you can do to customize shaders, but I wanted to highlight just a few of the tips and watchouts shared in this discussion that I thought were important, especially for those of you who may be new to SparkSL.

TIP ONE

Pay attention to the console

The JavaScript console in Meta Spark Studio will also show you error messages related to your shader. It can help you to quickly pinpoint the location of bugs in your code, or tell you when your shader isn’t compiling successfully.

Writing Simple Shaders Using SparkSL
Screenshot of what a console error looks like in Meta Spark Studio.

TIP TWO

When in doubt, output UVs

Sometimes it can be hard to tell if your shader is doing what you think it should be doing. In those circumstances, a good approach is to comment out nearly everything, and just output the UVs to the screen. Then, gradually add back in code until things are making sense.

Writing Simple Shaders Using SparkSL

TIP THREE

Keep documentation handy

The documentation for SparkSL has all the keywords and function definitions available in the language. Don’t worry about memorizing the whole thing, but keeping the page open in your browser can help you reference unfamiliar terms while you work.

Writing Simple Shaders Using SparkSL

I hope you find the interview and these tips helpful. If you’re interested in learning more about scripting, I highly recommend watching the first episode of Scripting AR which provides a great overview of the scripting capabilities in Meta Spark Studio, as well as how to use the library of documentation and tutorials available.

You can follow me on GitHub if you’d like to see more of what I’m working on. And if you haven’t already, I encourage you to join the Meta Spark Community where many other talented creators and developers regularly connect to talk about their AR projects!

Subscribe to the Meta Spark Blog