Full Color Sampler Tutorial: https://newcolor.studio/color-sampler-spark-ar-studio/

Download Color Sampler Spark AR v87 Template: https://newcolor.studio/product/color-picker-spark-ar-studio-template/

Hello everybody. Today, I'm going to show you how to make a color sampler in Spark AR Studio.


So that where you click it samples the color and you can use that color to change the material to fuse texture. Let's get started. I have the patch down here already made. So, it doesn't get too hairy.


So you can pause and. Create that patch, but there's a few objects we need to create. And I thought I'd take you through that process to make it more clear. Alright, so we'll add a rectangle.


There it is. This rectangle I'm going to use as the drag object. So, I'll add our 2D chemistry.


Pad our material here.


This isn't a totally necessary but it's useful to sort of visualize. That where you're dragging and touching his changing the color. Now, we need our device information. So we'll direct it to device onto the screen here.


This is just a pattern made for dragging. Planes on rectangles on canvases. So we'll plug our screen size which is an XY value into this unpack here. That'll give us our screen dimensions. And what's going on here and walk you through it here is a. We're taking the screen dimensions and we're normalizing them and normalization process usually looks like taking a range of values and making them fall in between a zero and one range is a normal normalization function.


So this from range can do that for us. The minimum is zero and when we use the screen pan, it's using screen coordinates so zeros up here in the top left corner and,


The way that the, The texture works the texture sampler, like I know dumping out here is it uses x y two two coordinates, but if they're called u v and that's the way we talk about textures where you say u v because x y relates to position and u v is used to talk about texture but it's essentially the same thing x y.


So, Anyway, once we unpack the screen pan, we're mapping this. Our touch value. And normalizing it because we need to normalize it so that it could it changes into a UV coordinate. The UV coordinates for the screen itself. Point 5.5 is directly in the center and zero zeros up here and one ones right here.


So this is kind of a conversion formula. Now our texture we still need this. So we'll go to our camera. Texture extraction that creates a texture here. We'll drag it onto the screen. Plug it in. Okay. I think we're almost there. Now, we need to finally add our material here.


Go to the texture.

Download Color Sampler Spark AR v87 Template: https://newcolor.studio/product/color-picker-spark-ar-studio-template/


All right. I think we are. Very close. Let's give it a try. All right. So, it looks like it's working.


You can make a little more obvious by adding a plane here. Remove this up out of the way. At that same material. So even if you didn't have this 2D drag canvas patch that I made you can still use the pan but gesture screen pan and it'll take your touch coordinate and sample the texture at that location.


I hope this is helpful. I hope I explained everything to the best of my ability here. It took me a while to figure out what the texture transformed does and the texture sampler texture transform is when you say transform one you're basically multiplying by one. So you get exactly what you're looking at.


It's the full camera texture. The texture sampler says, okay, I'll take that texture and, Sample at this UV coordinate and now the UV coordinator is what tripped me out because we have a bunch of you know different ways to measure what's going on here, but the UV texture UV coordinate 0.5.5 is the middle zero zero is up there one ones right there.

Download Color Sampler Spark AR v87 Template: https://newcolor.studio/product/color-picker-spark-ar-studio-template/