Porting Shader from ShaderToy - Texture() Method and Multiple Input Textures

Hi all,

I know nothing about graphics programming but have been trying to port this “glitch” shader from ShaderToy into Corona.  I think I’ve managed to do most of it properly, but I have run into two problems I can’t find a way around:

  1. The shader uses a texture() method that is not available in Corona’s implementation.  I’ve tied using texture2D() in place of it but no dice.  Any tips on how to get around this?
     
  2. The shader is using 2 texture inputs/channels but I’ve only ever seen Corona examples with a single input (I think).  Any direction on how/if this is possible would be appreciated.
     

ShaderToy: https://www.shadertoy.com/view/Md2GDw

My attempt at porting:

P\_COLOR vec4 FragmentKernel( P\_UV vec2 texCoord ){ P\_UV vec2 uv = texCoord.xy; P\_UV vec2 block = floor(texCoord.xy / vec2(16)); P\_UV vec2 uv\_noise = block / vec2(64); uv\_noise += floor(vec2(CoronaTotalTime) \* vec2(1234.0, 3543.0)) / vec2(64); P\_UV float block\_thresh = pow(fract(CoronaTotalTime \* 1236.0453), 2.0) \* 0.2; P\_UV float line\_thresh = pow(fract(CoronaTotalTime \* 2236.0453), 3.0) \* 0.7; P\_UV vec2 uv\_r = uv, uv\_g = uv, uv\_b = uv; // glitch some blocks and lines if (texture(CoronaSampler0, uv\_noise).r \< block\_thresh || texture(CoronaSampler0, vec2(uv\_noise.y, 0.0)).g \< line\_thresh) { P\_UV vec2 dist = (fract(uv\_noise) - 0.5) \* 0.3; uv\_r += dist \* 0.1; uv\_g += dist \* 0.2; uv\_b += dist \* 0.125; } P\_COLOR vec3 fragColor; fragColor.r = texture(texCoord, uv\_r).r; fragColor.g = texture(texCoord, uv\_g).g; fragColor.b = texture(texCoord, uv\_b).b; // loose luma for some blocks if (texture(CoronaSampler0, uv\_noise).g \< block\_thresh) fragColor.rgb = fragColor.ggg; // discolor block lines if (texture(CoronaSampler0, vec2(uv\_noise.y, 0.0)).b \* 3.5 \< line\_thresh) fragColor.rgb = vec3(0.0, dot(fragColor.rgb, vec3(1.0)), 0.0); // interleave lines in some blocks if (texture(CoronaSampler0, uv\_noise).g \* 1.5 \< block\_thresh || texture(CoronaSampler0, vec2(uv\_noise.y, 0.0)).g \* 2.5 \< line\_thresh) { P\_UV float line = fract(texCoord.y / 3.0); P\_COLOR vec3 mask = vec3(3.0, 0.0, 0.0); if (line \> 0.333) mask = vec3(0.0, 3.0, 0.0); if (line \> 0.666) mask = vec3(0.0, 0.0, 3.0); fragColor.xyz \*= mask; } return CoronaColorScale(vec4(fragColor, 1)); }&nbsp;

Cheers.

 

For the shader set it up as a composite

local kernel = {}

kernel.language = “glsl”

kernel.category = “composite”

kernel.name = “shader”

CoronaSampler0 is the pixel from the first image, CoronaSampler1 the second image

and in Corona set it up like this

image.fill =

{

type   = “composite”,

paint1 = { type=“image”, filename=“images/image1.png” },

paint2 = { type=“image”, filename=“images/image2.png” }

}

local shader = require “shaders.composite”

graphics.defineEffect( shader )

image.fill.effect = “composite.custom.shader”

Thanks a lot man!  That got it working, at least kind of. 

Link below is showing the effect I’m getting… not so much a glitch as flashing green… And it’s always green flashes for some reason:

https://gyazo.com/34902ce25ad5b60cc808346aa554d0d9

Below is how I’m implementing:

function GlitchImage(theImage, theImagePath) theImage.fill = { type = "composite", paint1 = { type="image", filename= theImagePath}, paint2 = { type="image", filename=introCS.imagesPath .. "/pixelNoise.jpg" } } theImage.fill.effect = "composite.custom.glitch" end

“theImage” and “pixelNoise.jpg” can be seen here:  https://imgur.com/a/KdN04

Shader on Corona Playground: https://goo.gl/khpVuf

I can consider the original question solved, but if anyone would be so nice as to help get this effect similar to ShaderToy original, it would be much appreciated!

For the shader set it up as a composite

local kernel = {}

kernel.language = “glsl”

kernel.category = “composite”

kernel.name = “shader”

CoronaSampler0 is the pixel from the first image, CoronaSampler1 the second image

and in Corona set it up like this

image.fill =

{

type   = “composite”,

paint1 = { type=“image”, filename=“images/image1.png” },

paint2 = { type=“image”, filename=“images/image2.png” }

}

local shader = require “shaders.composite”

graphics.defineEffect( shader )

image.fill.effect = “composite.custom.shader”

Thanks a lot man!  That got it working, at least kind of. 

Link below is showing the effect I’m getting… not so much a glitch as flashing green… And it’s always green flashes for some reason:

https://gyazo.com/34902ce25ad5b60cc808346aa554d0d9

Below is how I’m implementing:

function GlitchImage(theImage, theImagePath) theImage.fill = { type = "composite", paint1 = { type="image", filename= theImagePath}, paint2 = { type="image", filename=introCS.imagesPath .. "/pixelNoise.jpg" } } theImage.fill.effect = "composite.custom.glitch" end

“theImage” and “pixelNoise.jpg” can be seen here:  https://imgur.com/a/KdN04

Shader on Corona Playground: https://goo.gl/khpVuf

I can consider the original question solved, but if anyone would be so nice as to help get this effect similar to ShaderToy original, it would be much appreciated!