Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Porting Shader from ShaderToy - Texture() Method and Multiple Input Textures
Started by ddubya82 Mar 27 2018 06:02 AM

2 replies to this topic
shader shadertoy port

Best Answer Matthew Pringle , 27 March 2018 - 09:37 AM

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"

[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

ddubya82

[GLOBAL: userInfoPane.html]
ddubya82
  • Enthusiast

  • 51 posts
  • Corona SDK

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));
} 

Cheers.

 


[TOPIC: post.html]
#2

Matthew Pringle

[GLOBAL: userInfoPane.html]
Matthew Pringle
  • Contributor

  • 660 posts
  • Corona SDK

  Best Answer

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"


[TOPIC: post.html]
#3

ddubya82

[GLOBAL: userInfoPane.html]
ddubya82
  • Enthusiast

  • 51 posts
  • Corona SDK

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!




[topic_controls]
[/topic_controls]