Share your Shaders

Solar2D Custom Shader Effects
#21

Those are just a veneer over GLSL’s built-in qualifiers: precision qualifiers. Presumably, after a bunch of tests, those usages seemed to show the best balance. (“uv” is just a synonym for “texture coordinates”.)

This has all the relevant info around the middle of the document: Reference Card  lowp doesn’t let you store very large values, but is fixed-point, so you can store multiples of 1 / 256 exactly, e.g. for colors.

The newest additions are quite nice!

@ Lerg I wonder if the starfield wouldn’t benefit from some (noise-based) perpendicular motion, to break up all the straight line motion right now.

Also, as I mentioned above, you COULD stuff those sound samples into a texture. The necessary DSP shader is the sticking point.  :stuck_out_tongue:

Only a WIP at the moment, but might as well add it: rotating cylinder I have some subtle error in the v-coordinate computations. This would be a bit easier if I wasn’t trying to keep the axes consistent between rotations.

#22

By the way here are standard shader functions. Useful to read.

http://www.shaderific.com/glsl-functions/

#23

@StarCrunch , the StarField shader runs veeeeeery slow on my old devices (moto g and ipad 2), so I guess I won’t use it for actual games.

But I have a problem with another star shader http://goo.gl/1PyqKC
For some reason on Android and iOS it doesn’t look right. There is blue gradient, but the stars are missing or take just a line on a screen. Do you know why it could happen so?

#24

I’m not certain, but maybe it’s along the lines of what I said in one of the other threads: precision issues

Some of those multiplies might be overflowing a mediump.

#25

@Icy Spark  those flames are amazing. Here, I adapted them to be little more Corona style. Black background wouldn’t really do in a game. So, I adjusted alpha appropriately, and added some useful parameters: http://goo.gl/TFJqQa

Btw, you can select different background colour with colorpicker on top of the page. In a game you would draw it on top of something, this is kinda simulation of that.

UPD: here’s flame with better parameters http://goo.gl/GvQVcS

CoronaVertexUserData.x - “number of particles”, or something, horizontal noise level.

CoronaVertexUserData.y - height of rendered flame

CoronaVertexUserData.z - after-burn level

#26

@ Lerg

To follow up on that last point, it looks like your noise could easily be read out of a texture (say just apply the noise to a rect and save the result, on a machine with high-res fragment shaders). Usually these are functions in these demo sorts of programs (since they don’t rely on a pre-existing texture AND so that you can control the values you’re getting in), but if you’ve got free samplers, you could just read out of them. Noise is usually expensive, so maybe it would rescue that other starfield?

Probably the same idea will hold with vertex kernels. In practice, you wouldn’t put EVERYTHING in the fragment kernel, especially for data that just makes more sense on the vertex side; the playground just helps you get the process going.

#27

@StarCrunch , you were right, once I increased precision up to P_DEFAULT, which is highp, my stars appeared on the device. Playground: http://goo.gl/r0oT6J

Which raises a question about WebGL and Corona Simulator, are all floats use high precision there regardless of the modifier?

I will check out noise textures later on.

#28

Thx StarCrunch and Lerg.

Didn’t know that. Anyway, it’s not related to shader only. So I quit this post :wink: and do some searchs elsewhere.

#29

@ Lerg

WebGL seems to make the same promises regarding highp as OpenGLES: reference card (the shading language half is practically identical to the OpenGLES one), i.e. “Optional in the fragment language”.

I suspect the browser / graphics card combination has the final call, though it is weird that the problems didn’t still show up, with explicitly lower precisions.

It does seem to be using GLES on desktop, or at least this (ported from the other thread, now time-based and using alpha in lieu of the the lame discards, plus added back in license comments) required me to specify ES extensions to run in the simulator. It would be good to know if this is indeed true, if it will also hold on desktop builds, and also “what about Windows Phone 8?”.

Also, on the subject of extensions: the registry Some of these require code on the native side, but others don’t. I’m very tempted to give a few of these a whirl…

#30

A much-improved cylinder, here.

I was considering using quaternions later, as improvements, but I decided to give them a go. They proved much more stable for rotating the local coordinate system. Additional “ray tracing shapes” ought to be easier, with that hurdle cleared. I mention further cylinder ideas in the “extensions” comments, for instance. Speaking of comments, I did try to explain what’s going on, since all the math might look a bit magical.  :slight_smile:

I mean to port some squad code at some point, once I track down some weird (occasional) errors, which in theory would give a much smoother blend among orientations.

#31

Another WIP here, for some kind of energy beam or something. Still trying to make various things, especially the distortion, a bit more subtle.

There are a couple #if guards that can be switched from 0 to 1 to vary the effect.

#32

Here’s an example of a composite shader used to generate custom fades.

You supply the front image and the fade image (a greyscale image that should contain all values from black to white), and can set the fade percentage.

This cycles through 7 or so different fade images, none of which are interesting because I knocked them up quickly in photoshop, but hopefully you get the idea.

https://www.dropbox.com/s/vm8noo52lj554uy/Shader_Fader.apk?dl=0

Needless to say this would be much much cooler being able to work with snapshots *hint hint*

Note that this changes the *alpha* of the top layer image, so whatever is behind (in this case the purpley mountains) can be animated or whatever, it isn’t tied into the actual composite filter at all, I just had to stick something behind to make it more interesting. Only the foresty image is part of the shader, so that (for now…? :smiley: ) must be static, same with the fade image itself.

Here’s the shader code, since it doesn’t make sense to show this in the playground:

[lua]local kernel = {}

kernel.language        = “glsl”

kernel.category        = “composite”

kernel.group           = “playlevel”

kernel.name            = “fade”

– Expose effect parameters using vertex data

kernel.vertexData =

{

    {

        name    = “fadePercent”,

        default = 50, 

        min     = 0,

        max     = 100,

        index   = 0,

    },

}

kernel.fragment =

[[

P_COLOR vec4 FragmentKernel( P_UV vec2 texCoord )

{

    P_RANDOM float fadeBoundary = CoronaVertexUserData.x;

    P_COLOR vec4 fadeTexCol     = texture2D( CoronaSampler1, texCoord );

    P_COLOR vec4 baseTexCol     = texture2D( CoronaSampler0, texCoord );

    if ( fadeBoundary == 100. )

    baseTexCol = vec4( 0., 0., 0., 0. );

    else if ( fadeTexCol.x * 100.0 < fadeBoundary )

    baseTexCol = vec4( 0., 0., 0., 0. );

    return CoronaColorScale( baseTexCol );

}

]]

return kernel[/lua]

#33

Oops, got caught out by the old ‘integer’ bug so the above code and APK didn’t work. Both fixed now!

#34

@ rakoonic

Ah, I guess these were the dynamic masks? It actually works pretty well in the playground if you just use image intensity (in this case, average of each color component) as the gray. With some of the pattern textures it looks really cool: Fader

Of course, some of the effect is lost without another texture waiting underneath.  :slight_smile:

#35

Hi there everyone!

 

I have encountered a problem with implementation of a custom shader that for some odd reason, causes my app to crash on an iPhone 5 and iPad mini  but not an iPhone 6 or iPhone 6 plus!   I am getting a segmentation fault 11 error that causes my app to crash immediately after it is opened.  Any help is appreciated!  

 

Below is the code for my custom shader and my implementation of it:

 

  1. –kernel file to make shader

  2. local kernel = {}

  3.  

  4. kernel.language = “glsl”

  5. kernel.category = “generator”

  6. kernel.name = “wheel”

  7. kernel.isTimeDependent = true

  8.  

  9.  

  10. kernel.fragment =

  11. [[

  12. P_COLOR vec4 FragmentKernel( P_UV vec2 texCoord )

  13. {

  14. P_UV vec2 pos = 2. * (texCoord - .5); // Get relative position and normalize it to [-1, 1]

  15.     P_UV float len = length(pos);

  16.  

  17.     if (len > .9) return vec4(0.); // “outside”, use clear color

  18. if (len < .8) return vec4(0., 0., 1., 0.); // inner body, blue

  19.  

  20. P_UV float PI_OVER_TWO = 2. * atan(1.); // arctangent of 1 = pi / 4

  21. P_UV float angle = atan(pos.y, pos.x); // returns value in [-pi / 2, pi / 2]

  22.  

  23. if (angle < -PI_OVER_TWO) return vec4(1., 0., 0., 1.); // red

  24. else if (angle < 0.) return vec4(1., 1., 0., 1.); // yellow

  25. else if (angle < PI_OVER_TWO) return vec4(.5, 0., .5, 1.); // purple;

  26. else return vec4(0., 1., 0., 1.); // green

  27. }

  28.  

  29.  

  30. ]]

  31. return kernel

  32. –place in menu file where shader is implemented 

  33. –create circle to be made into wheel

  34. local wheel = display.newCircle(150, 100, 100)

  35. wheel.x = display.contentCenterX; wheel.y = display.contentCenterY

  36. wheel:scale(1.7, 1.7)

  37. group:insert(wheel)

  38. print(“creating circle”)

  39.  

  40.  

  41. –initialize kernel to create wheel effect

  42. local kernel = require “kernel_generator_custom_wheel”

  43. graphics.defineEffect( kernel )

  44.  

  45. –create wheel using effect on circle

  46. wheel.fill.effect = “generator.custom.wheel”

  47. print(“create wheel effect”)

#36

 
Hey, Mgoldberg62401. I tried for some time to reproduce your crash but I couldn’t do it. May I ask you to see if it happens still on latest daily build. I also compiled minimal sample - https://dl.dropboxusercontent.com/u/2658771/ShaderCrash.zip (with code you posted, and commented out group:insert). It seems it draws 4 segment wheel with blue body. If it still crashes, may I ask to write here and report a bug. I tested it on several devices and it seems to work fine.

Also, what might help - is to gradually simplify your app to pinpoint the issue. Like step replace shader with just solid colour return, etc. If you’ll figure out what was the issue, please share as well.

#37

As a reminder, you can also distribute your shaders as lua plugins.

#38

Insane!

#39

Original Author: wayland

Name of Shader: Auralights

Link to original shader: https://www.shadertoy.com/view/lsXGzM

 

Corona Shader Playground Link: http://goo.gl/Rqtq9q

#40

Ah, that’s cool.  :slight_smile:

I posted several fragment-only shaders in the Shader Playground announce topic, but I’ve also got quite a few more (mostly ones that also have vertex kernels) in this project (a fairly up-to-date snapshot of a now-public repo, originally posted in the “Samples” topic). They’re sort of a mixed bag: some aim to look good, others are mostly experimental.

Some original work I made for that (during the beta) can be found hereand here. The latter is an attempt to build up a suite of reusable code fragments which can then be automatically* stitched together when dependencies on them are detected in your code (this is why several of the shaders in that project are so mysteriously short), whereas the other one has the loader code, plus other utilities.

* - “Automatic” involves a GLSL parser that probably isn’t too hard to break, if one tried. Any improvements are most welcome!