Effects. How to reference a second texture

For developers using the Construct 2 Javascript SDK

Post » Sat Dec 26, 2015 7:54 pm

Hey everybody,

This has been bothering me for a week now. Does anyone know if you can reference another texture besides samplerfront and samplerback?

I want to make a dirty lens bloom and a color lookup filter. Both require a second texture.

I've looked around the javascript files that you can access and didn't find anything that was in communication with the fragshader.
If there is no way to do this then I think this is a major missing feature. But I could have missed it. Given the level of shader development with c2 I could see the majority would care none at all though.
Image
B
32
S
11
G
2
Posts: 563
Reputation: 5,106

Post » Sat Dec 26, 2015 8:09 pm

@ruskul

'This has been bothering me for a week now. Does anyone know if you can reference another texture besides samplerfront and samplerback?

I want to make a dirty lens bloom and a color lookup filter. Both require a second texture.'
--------------------------------------------------------------------

Use a 'color lookup filter' as your 'samplerback' or 'samplerfront'.

Or introduce a color gradient as a vec4.
B
21
S
6
G
8
Posts: 1,215
Reputation: 7,881

Post » Sat Dec 26, 2015 8:48 pm

"samplerfront" and "samplerback" are the only two that C2 sets up for you.

You could use a sprite as a second texture. Put it at the top and give it your effect then samplerfront would be your lookup and samplerback would be everything drawn so far.

In cases where you want to do everything webgl allows you to do with a shader you'll have to write your own plugin. specifically in the drawgl function. You can look at the creature2d plugin I started for an example of using custom webgl outside of what C2's renderer provides. Basically you use the endBatch() function then do anything you want. Only be sure to set the webgl state back to the state it was before your custom code. It'll probably need some trial and error and you'll need to dig around the source a bit but the end result could be cool.
B
89
S
30
G
95
Posts: 5,157
Reputation: 63,450

Post » Sat Dec 26, 2015 8:54 pm

@chrisbrobs - I don't understand, how would those work in replacement of a second texture? By color lookup filter I meant that you generate an rgb color space of your own choosing... either using photoshop or other programs, You save it as a texture then you then reference the texture using the rgb values from sampler front as coordinates for the color space you created. Does this make sense?

Basically, I want to introduce a second texture in the asset pipeline that I can access via the shader. To be honest I could use two or three... lol. It just dawned on me. I need to check the bump lighting effect... but I thought even it required the use of two sprites lined up where the effect was applied to the second and it read samplerback to get the color values or vica verca.
Image
B
32
S
11
G
2
Posts: 563
Reputation: 5,106

Post » Sat Dec 26, 2015 8:59 pm

@R0J0hound - that makes sense. I'll have to check that out. I might have to mess with the way you said to do it... The problem that I can see though is that you couldn't apply it to a layer or layout, which is suboptimal, but hey it may work. It just seems like Construct 2 should have a place to put textures, that you could feed to your shaders.
Image
B
32
S
11
G
2
Posts: 563
Reputation: 5,106

Post » Sat Dec 26, 2015 9:06 pm

To make it work on the entire layout you could put the sprite on a top layer that doesn't scroll or scale and make the sprite cover the screen. To effect just a layer could be a bit trickier, worst case the sprite would be on that layer and you'd need to do the math so it covers the screen.
B
89
S
30
G
95
Posts: 5,157
Reputation: 63,450

Post » Sat Dec 26, 2015 9:40 pm

@ruskul

When you say 'color lookup filter', is it the same as the 'ramp' texture that cocos 2d uses.
B
21
S
6
G
8
Posts: 1,215
Reputation: 7,881

Post » Sun Dec 27, 2015 1:28 am

@chrisbrobs hm - I'm not sure. Imagine laying out an rgb color space onto a 2d texture. it could represent 255*255*255 colors or 2*2*2. It really doesn't matter. Obviously the color space and the texture size go hand in hand.

In the original image you then use the rgb value to essentially get texture coordinates for the look up table/ texture. Red = x, green = y, x+= blue * 255. In this case the lookup table is a very wide image where blocks of red and green have been laid out with increasing blue value. Does that make sense? The lookup table can then be altered anyway you like. You could make it super small and force a limited palette, you could use photshop to alter the levels and so on. The advantage is that you can have mathematically complex color conversions, arbitrary filters, etc, all at a low cost. The downside is that you have to create the lookup tables ahead of time.

The end result is that you can get an incredible amount of diversity of assets without creating that many assets. It also makes it possible in 3d games to have a general lighting scheme and then use lookup filters to drastically alter the mood of the scene. It has some great uses. Essentially you could even use it as a shade, tint, etc tool. Or hsv. But it works more efficiently than actually mathematically calculating/converting from rgb -> hsv -> change values ->rgb. This is most pronounced when doing lab space color corrections.

If none of this makes sense, check out this link. It is for Unity's color lookup, but the same principle can be applied to c2!

http://docs.unity3d.com/Manual/script-C ... ookup.html

As is mentioned and worth noting again is the fact that you can use photoshop to generate the color transforms. Basically you could take a scene from the game and apply filters/levels/etc until you like the way it looks. You then do the same thing to the lookup texture. and poof! quality color correction :) and at a very low cost.
Image
B
32
S
11
G
2
Posts: 563
Reputation: 5,106

Post » Mon Dec 28, 2015 5:05 pm

@ruskul

I posted an example in the effects forum, Its not 100% finished, but it's no good stuck on my hard drive!.
B
21
S
6
G
8
Posts: 1,215
Reputation: 7,881

Post » Mon Dec 28, 2015 5:16 pm

@chrisbrobs - thanks, I'll check it out when I get a chance!
Image
B
32
S
11
G
2
Posts: 563
Reputation: 5,106

Next

Return to Javascript SDK

Who is online

Users browsing this forum: No registered users and 0 guests