Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Share your Shaders
Started by Icy Spark Apr 17 2015 07:43 AM

55 replies to this topic
shader effect share
[TOPIC CONTROLS]
Page 1 of 3 1 2 3
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

Icy Spark

[GLOBAL: userInfoPane.html]
Icy Spark
  • Contributor

  • 268 posts
  • Corona SDK

I thought this might be a good place for everyone to share their shader creations for the benefit of the Corona community.

 

Remember to enable WebGL if you are using OSX.

 

I will start with a shader I found on shader toy and then converted for use in Corona.  

 

Original Author: Cha

Name of Shader: Hypnotic Ripples

Link to original shader: shader toy

 

You can view it in action and find the code in the shader playground here: http://goo.gl/8LJOfA

 

Hopefully we can use this thread to create a large library of custom Corona shaders.



[TOPIC: post.html]
#2

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,069 posts
  • Corona SDK

[TOPIC: post.html]
#3

Icy Spark

[GLOBAL: userInfoPane.html]
Icy Spark
  • Contributor

  • 268 posts
  • Corona SDK

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



[TOPIC: post.html]
#4

StarCrunch

[GLOBAL: userInfoPane.html]
StarCrunch
  • Contributor

  • 815 posts
  • Corona SDK

Ah, that's cool.  :)

 

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 here and 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!



[TOPIC: post.html]
#5

Icy Spark

[GLOBAL: userInfoPane.html]
Icy Spark
  • Contributor

  • 268 posts
  • Corona SDK

Original Author: drmelon

Name of Shader: Paper Burn

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

 

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

 

Play around with CoronaSampler0 and CoronaSampler1 for some cool effects!



[TOPIC: post.html]
#6

vlads

[GLOBAL: userInfoPane.html]
vlads
  • Contributor

  • 852 posts
  • Corona Staff

Hey! That is really impressive. Also, I noticed that you can use any image on imgur.com as a texture. It is better if it is pow2 and square, but all you have to do, is to type in address bar url of an image after # and reload a page.

Like this: https://shader.coronalabs.com/#http://i.imgur.com/UpWmwpv.png

If you would like to pass second sampler set to custom picture - append & and another url.

Anyway, I was happy about new StarWars trailer and made this - http://goo.gl/YYhnyv

One can tweak background colour to see how image would look like with different backgrounds)



[TOPIC: post.html]
#7

Icy Spark

[GLOBAL: userInfoPane.html]
Icy Spark
  • Contributor

  • 268 posts
  • Corona SDK

Original Author: Predator106

Name of Shader: 2D Water Shader

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

 

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

 
Simple 2D water shader.  Change CoronaSampler0 for a different image.


[TOPIC: post.html]
#8

rakoonic

[GLOBAL: userInfoPane.html]
rakoonic
  • Contributor

  • 112 posts
  • Corona SDK

Here's a water one I'm playing with at the moment. For some reason the image is displayed upside down, so really what you are seeing is the view when underwater.

 

Corona Shader Playground Link: http://goo.gl/7SSgwm

 

Me thinks the playground could do with some normal images as part of their list, not just textures and normalmaps etc.



[TOPIC: post.html]
#9

vlads

[GLOBAL: userInfoPane.html]
vlads
  • Contributor

  • 852 posts
  • Corona Staff

Me thinks the playground could do with some normal images as part of their list, not just textures and normalmaps etc.

 

I wrote how to use any image in playground earlier in this thread. Here's example: http://goo.gl/aT3PqP, or example with your shader with custom texture - http://goo.gl/B5x2DN



[TOPIC: post.html]
#10

rakoonic

[GLOBAL: userInfoPane.html]
rakoonic
  • Contributor

  • 112 posts
  • Corona SDK

I know you did but that doesn't mean the playground shouldn't have these types of images available automatically. I only posted my shader just to see if it worked really, it isn't something I'll spend more than a second or two on - I'd rather be actually playing with shaders in-game :)



[TOPIC: post.html]
#11

StarCrunch

[GLOBAL: userInfoPane.html]
StarCrunch
  • Contributor

  • 815 posts
  • Corona SDK

Heh, well, this was a happy accident while I was trying to make something else, but it's late and I'll take it.  :D

 

Something moves beneath the surface!



[TOPIC: post.html]
#12

StarCrunch

[GLOBAL: userInfoPane.html]
StarCrunch
  • Contributor

  • 815 posts
  • Corona SDK

This was also not what I was going for, but I realized the positions stuff I did for the previous one made it feasible (this is one that wasn't fragment-only, in my original batch):

 

Ice (put a normal map in sampler 0, and an "environment" in sampler 1)

 

EDIT: Link botched

 

EDIT 2: New version, with some comments and Catmull-Rom interpolation.



[TOPIC: post.html]
#13

StarCrunch

[GLOBAL: userInfoPane.html]
StarCrunch
  • Contributor

  • 815 posts
  • Corona SDK

Got distracted by yet another one.  :)

 

This emulates an effect found in certain 16-bit games, e.g. during ActRaiser's level entrance. Quintet may have put it in a few games, actually.

 

Zoom-spin effect

 

With angle set to 0 you can get something that's just sort of "hopping around" on the "map", but the "t * t" sharpens the curve, so it lags a bit at the peak. Even with just "t" it still spends too much time there, but I didn't invest much into finding a more middle-heavy curve. (Maybe one of the Corona transitions would adapt well.)



[TOPIC: post.html]
#14

Antheor

[GLOBAL: userInfoPane.html]
Antheor
  • Contributor

  • 345 posts
  • Corona SDK

Really cool !

I found several examples on shader toy where effects react to a soundtrack. Is that possible in corona ?



[TOPIC: post.html]
#15

Icy Spark

[GLOBAL: userInfoPane.html]
Icy Spark
  • Contributor

  • 268 posts
  • Corona SDK

Original Author: xbe

Name of Shader: Fires

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

 

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

 

Various flame types.  Would be great addition to games.  You can change to blue or green flames by uncommenting.



[TOPIC: post.html]
#16

StarCrunch

[GLOBAL: userInfoPane.html]
StarCrunch
  • Contributor

  • 815 posts
  • Corona SDK

@Icy Spark

 

Those flames are beautiful.  :)

 

I'd been thinking about how to do some of the old classic fire demos, but it looks like these match those and more. I did get them sort of running in stock Corona a couple years back (with *cough* one rect per pixel), but they depended on previous frames and neighbors, so not terribly obvious how to transfer them to stateless shader-land. :)

 

fBm seems to work well for fire in general. It also underlies the sun-ish effect I posted (in the playground announce thread).

 

@Antheor

 

I'd be rather surprised if Corona built support into the tool. They probably just wanted to get it out the door. :) In theory, if you had audio as raw samples (say from a WAV, or decompressed from another source and captured) you could encode those to pixels and then read them out of a texture (perhaps "streaming" them through a snapshot), with time-based "texture" coordinates. I don't know how well this would work in the presence of filtering, though, unless one could specify "nearest" mode.

 

At some point, I want to make some shaders for 1D / 2D FFT and convolution, if I don't stumble on working versions in the meantime. I imagine the implementation will be a beast.  :D (I've written them in Lua...) I have a very specific computer vision-style problem in mind, but really any application of DSP would be game. (Doing something, for instance, along the lines of what I mention here.)



[TOPIC: post.html]
#17

rakoonic

[GLOBAL: userInfoPane.html]
rakoonic
  • Contributor

  • 112 posts
  • Corona SDK

I just had a quick go at converting one I liked from shadertoy to corona:

 

http://goo.gl/MZzbrO

 

Seems to be relatively easy, although I have no idea which type of variable to assign to each, so I'm essentially just chucking P_COLOR and P_UV randomly at stuff and it seems to work :D



[TOPIC: post.html]
#18

rakoonic

[GLOBAL: userInfoPane.html]
rakoonic
  • Contributor

  • 112 posts
  • Corona SDK

Here's another shadertoy conversion:

 

MOUNTAINS!

 

http://goo.gl/A2a5zy



[TOPIC: post.html]
#19

Lerg

[GLOBAL: userInfoPane.html]
Lerg
  • Contributor

  • 538 posts
  • Corona Staff

I just had a quick go at converting one I liked from shadertoy to corona:

 

http://goo.gl/MZzbrO

 

Seems to be relatively easy, although I have no idea which type of variable to assign to each, so I'm essentially just chucking P_COLOR and P_UV randomly at stuff and it seems to work :D

 

Seems like P_COLOR is for color values and P_UV is for x,y values. But I guess we can stick with any of these.



[TOPIC: post.html]
#20

Lerg

[GLOBAL: userInfoPane.html]
Lerg
  • Contributor

  • 538 posts
  • Corona Staff

Really cool !

I found several examples on shader toy where effects react to a soundtrack. Is that possible in corona ?

It is, I've done it when corona had Graphics 2.0 competition. But you have to convert the soundtrack to raw pcm and read it in Lua.



[TOPIC: post.html]
#21

StarCrunch

[GLOBAL: userInfoPane.html]
StarCrunch
  • Contributor

  • 815 posts
  • Corona SDK

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.  :P

 

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.



[TOPIC: post.html]
#22

Lerg

[GLOBAL: userInfoPane.html]
Lerg
  • Contributor

  • 538 posts
  • Corona Staff

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

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



[TOPIC: post.html]
#23

Lerg

[GLOBAL: userInfoPane.html]
Lerg
  • Contributor

  • 538 posts
  • Corona Staff

@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?



[TOPIC: post.html]
#24

StarCrunch

[GLOBAL: userInfoPane.html]
StarCrunch
  • Contributor

  • 815 posts
  • Corona SDK

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.



[TOPIC: post.html]
#25

vlads

[GLOBAL: userInfoPane.html]
vlads
  • Contributor

  • 852 posts
  • Corona Staff

@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



[topic_controls]
Page 1 of 3 1 2 3
 
[/topic_controls]