Color Sampler Spark AR Studio

Color Sampler: Spark AR Studio Tutorial

How to make a color sampler Spark AR Studio

Here is the completed patch running in the Spark AR Studio Patch Editor. I will breakdown what each component does to make it clear how the patch objects work together.


Color Sampler Spark AR Studio

Screen Size

We need screen size in order to translate the screen coordinates to a range compatible with the Texture Sampler, which is expecting a UV coordinate in the 0-1 range.

  • Screen coordinates contain two values (X, Y).
  • Minimum value is the upper left corner of the screen (0, 0).
  • Maximum value is the device screen size measured at the lower right corner of the screen (Screen Size X, Screen Size Y).

This is good! The minimum and maximum values that represent screen size are measured in the same space that Screen Pan measures in: screen coordinate space.

Screen Pan

Screen Pan gives us the 2D position of a dragging gesture. Since we are sampling our camera texture at the drag location—the 2D position of the screen pan—we will need to normalize the 2D position of Screen Pan by plugging it into a From Range object.

Normalize Values with From Range

  • Input value: Screen Pan 2D position
  • Minimum value: 0
  • Maximum value: Screen Size

From Range will map (scale) the Screen Pan 2D position to a range of [0-1]. This is the range we need to send to the Texture Sampler which is expecting a value in that range to sample the cameraTexture at the UV coordinate.

UV coordinates are measured in Cartesian coordinate space with (0, 0) representing the center of the cameraTexture.

Color Sampler: Spark AR Studio Tutorial 1

Camera Texture Extraction

  • Select your Camera in the left side Scene Panel so it’s highlighted.
  • On the right side of your screen, the Properties panel, you will see Texture Extraction.
  • Select the + to add the cameraTexture to your Assets.
  • Drag the cameraTexture0 into the Patch Editor to plug into the Texture Sampler.
Color Sampler: Spark AR Studio Tutorial 2

Texture Sampler

Almost done! Plug in your cameraTexture0 to the Texture Sampler. The Texture Sampler will sample the cameraTexture0 at a UV coordinate, which in this case is where we are panning.

Plug it into your material texture and BOOM—now we are color sampling where we drag on screen.

Optional Drag Object

I created a patch for accurately dragging 2D objects in Spark AR Studio on a Canvas object. More information on Math Patches for Spark AR Studio can be found here.

Drag 2D object on canvas Spark AR Studio
Drag 2D Object on Canvas Spark AR Studio

The 2D Canvas Drag Patch is included with download with this Color Sampler Spark AR Studio Example Project.


Color Sampler Spark AR Studio Tutorial

If this patch was helpful, please leave a comment and check out other project templates from Newcolor Studio.

You may also like...

Popular Posts

Leave a Reply

Your email address will not be published. Required fields are marked *