[Help] Shader Conversion from ShaderToy

Post reply
0 favourites
From the Asset Store
Help Santa Claus - HTML5/Mobile
$15 USD
Game with complete Source-Code (Construct 3 / .c3p) + HTML5 Exported.
R Games's avatar
R Games

  • This one: 

    const float rotate = .0;
const vec2 scale = vec2(1.,1.);
const vec2 offset = vec2(.0,.0);

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
 // square coordinates
 vec2 uv = (-iResolution.xy + 2. * fragCoord.xy) / iResolution.x;
 
 // rotate
 uv = cos(rotate) * uv + sin(rotate) * vec2(uv.y, -uv.x);

 // scale
 uv /= scale;
 
 // fix image aspect ratio
 vec3 res = iChannelResolution[0];
 uv.y *= res.x/res.y;
 
 // center image in canvas
 uv += .5;
 
 // offset
 uv -= offset;
 
 // sample
 vec4 col = texture(iChannel0, uv);

 fragColor = col;
}

    Tried using the ShaderToy conversion tool by Gigatron but still lots of errors and no idea to fix.

    One error i guess is "iChannelResolution[0];" tried to change for Samplefornt, uv, vTex and other stuff but nothing worked.

    Any idea?

  • Seems the error are this lines:

    // fix image aspect ratio

    // vec3 res = iChannelResolution[0];

    // uv.y *= res.x/res.y;

    Commented and shader works with no errors but obviously not works correctly. So wonder what i need to change there. Tried some stuff but noting worked.

    Here the shader conversion to C2:

    pastebin.com/CWn86K4a

  • It might be looking for the window resolution. You can try passing that in as parameters/uniform to the effect and setting them in events based on screen resolution. To see something similar, see the normalmap extended effect (uh didn't you create that!) which also passes in screen resolution (see forum post on it for more details and example.)

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • I tried to set to vec2 and add vTex or the resolution or "vec2 res = (samplerFront, uv);",etc... and then the shader works with no errors but not in the same way as in shadertoy does :S

    So i don't know, maybe to be used in C2 needs other stuff to get working¿? , maybe needs another lines of code i'm missing..

  • This is how the image looks

    And it should repeat the image like the tilebackground does.

    shadertoy.com/view/WsB3D3

    Basically i'm trying to achieve a TiledBackground via shader with the options of rotation, scale XY and Offset XY.

    So it can be added on a sprite that allows animations too,etc...

  • I don't think you can do such thing so simple as shadertoy does it. Every sprite image is same as spritesheet it is in. So if you offset, you start to see other images on that spritesheet. You can make it maybe with tiledbackground and add exstra effects to it. Or ask Ashley to make sprite feature, so its texture won't be inside spritesheet.

    open.gl/textures

    See wrapping, you can't change that.

  • Fixed using this:

    uv = fract(uv);

    Now i have a shader that on a sprite works as tiledbackground on i can use animation, rotate, scale in XY and set the OffsetXY :D

  • Nice, i once tried something similar and i had multiple problems, when tried to apply it on sprite.

  • matriax i would love to test your new shader effect!

  • Still there is a small issue, due i want the texture in the center of the image and then repeat over all.

    I mean, actually work great just by default i want that, but well i', gonna test .

    Also thinking to create a C2 page on Itchio with all my shaders, template and all related stuff.

  • I can't fix the center image thing.

    On shadertoy works this:

    uv += 0.5;

    But on C2 nope, also i'm using uv = vTex(Need the sprite area)

    Any math expresion for scale/offset to achieve this?

  • Can you share the latest shader code, to get more context on the problem? In C3 I would be scaling the area of the texture by 0.5, due to sprite sheets, but I though in C2, there was only one sprite/texture, so absolute values should work. With your changes to get this far, do you now have have a different scale for x,y that you need to apply to 0.5?

    Also, it would be great to have an itch.io page with your effects and templates. I would be happy to buy/donate to get access.

  • The actual code: 

    #ifdef GL_ES
precision mediump float;
#endif

#extension GL_OES_standard_derivatives : disable

uniform mediump sampler2D samplerBack;
uniform mediump sampler2D samplerFront;
varying mediump vec2 vTex;
uniform mediump vec2 destStart;
uniform mediump vec2 destEnd;
uniform mediump float seconds;
uniform mediump float date;
uniform mediump float pixelWidth;
uniform mediump float pixelHeight;
vec2 iResolution = vec2( 1./pixelWidth, 1./pixelHeight);

uniform float rotate; 
uniform float scaleX; 
uniform float scaleY; 
uniform float offsetX; 
uniform float offsetY; 

vec2 scale = vec2(scaleX,scaleY);
vec2 offset = vec2(offsetX,offsetY);


void main()
{
	// Sprite Area
	vec2 uv= vTex; 


	// rotate
 uv = cos(rotate) * uv + sin(rotate) * vec2(uv.y, -uv.x);

	// scale
 uv /= scale;
	

	// center image in canvas - Not works on C2
 uv += 0.5;
	
	// offset
 uv -= offset;
	
	// Fix the tile thing
 uv = fract(uv);
	 


	gl_FragColor = texture2D(samplerFront, uv);

}

    With this code( uv += 0.5;), i found that to get the center of the image the offset on C2 needs to be for this different scales:

    0.5 > 0 Offset

    0.4 > 0.25 Offset

    0.3 > 0.67 Offset

    0.2 > 0.5 Offset

    If you set that Scales 0.2-0.5 and you set on C2 that offset the image will be center.

    Trying to find the math expresion to fix the problem but no idea :(

  • Just because I ran into this problem today, what's the extend border properties set to in XML, it seems to make uv non local if they are both not set to 0, so harder to deal with.

  • Beyond the XML check, here's a funny thing to try:

    y = -4.65 + 49.38333*x - 143.5*x^2 + 126.6667*x^3

    Y is offset, X is scale.

    This is a curve fit to the four points you supplied :) It probably does not work, because it goes negative as you get smaller in X and get very large quickly as you get above 0.5 in X. The fact that you get smaller in offset again implies going over some kind of threshold or wrapping.

Post reply
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)