@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?
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.
@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
@ 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.
@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.
Thx StarCrunch and Lerg.
Didn’t know that. Anyway, it’s not related to shader only. So I quit this post 
and do some searchs elsewhere.
@ 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…
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. 
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.
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.
Very cool, pickerel! The fine details on the little images especially.
I don’t know if I already said this earlier, but for many / most of these shaders, especially with some of the craziness ported from Shadertoy, it would be awesome to see some commentary and / or blogs trying to unpack all of the techniques!
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…? 
) 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]
Oops, got caught out by the old ‘integer’ bug so the above code and APK didn’t work. Both fixed now!
@ 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.
Hi all,
I had no idea what i was doing but managed to hack and stumble my way through fudging a conversion from shadertoy to corona. Hope others post their own comments and help other shader noobs understand the process.
Original Author: Urraka
Name of Shader: Stars Background
Link to original shader: https://www.shadertoy.com/view/lsfGWH
Corona Shader Playground Link: https://goo.gl/Z2NQeN
What i think i had to so was replace the mainImage function
void mainImage( out vec4 fragColor, in vec2 fragCoord )
with
P\_COLOR vec4 FragmentKernel (P\_UV vec2 fragCoord)
and make sure this returns a line of the out vec that was in the mainImage call eg
return CoronaColorScale(fragColor);
then anywhere that there is a float, vec2 or vec4 as a variable or as part of a funtion that is declared just at P_DEFAULT infront of it.
and change any refs of iGlobalTime to CoronaTotalTime
and change any refs of iResolution to CoronaVertexUserData – i think this is wrong but it didnt break the code.
As i said i have no idea if i just fluked it, but perhaps that helps. See the links and compare.
I notice the larger stars don’t seem to show up
Heres another one that seems to convert well given the above technique from my earlier post.
Original Author: Iq
Name of Shader: Bubbles
Link to original shader: https://www.shadertoy.com/view/4dl3zn
I tried to get the following more complex shader conversion to work but it didn’t go as well. Fwidth function wasn’t available so i just replaced with abs (for no particular reason)
I tried using P_COLOR to get the colors right? and played around with different input samples, but couldnt get the exact look.
Original Author: Iq
Name of Shader: Circle Pattern
Link to original shader: https://www.shadertoy.com/view/lss3Df
If anyone has the knowledge, what is going wrong with the conversion. Is there any theory behind these shaders that makes it a bit more obvious what is happening. Thanks
@ online2
P_DEFAULT should generally work well, though on lower-quality devices you’ll need to change it to P_UV or P_POSITION and such (there’s a GL_FRAGMENT_PRECISION_HIGH define). Some constants will probably also need taming in that situation. Along those same lines, I wouldn’t use P_COLOR for what are basically intermediate values, where a lot of calculations will follow and precision is key. Fetching colors or normals out of a standard texture are fine, though.
The derivatives are an extension. I’ve found CoronaTexelSize.x to be a passable replacement for fwidth(), e.g. see here. I don’t know off-hand if there’s a WebGL variant supported by the playground.
I’m not 100% sure on “Circle Pattern”, but it looks like the main culprit is the underlying texture. “Gray diffuse” seems to be a bit too beige and homogeneous, versus the tinted static used in Shadertoy. I played with the moon texture and a little scaling in the noise shader and it’s a little closer. Every now and then you get waves of orange squircles, though it still doesn’t quite track the example.
Thanks StarCrunch, for the above comment and your help to the community so far on shaders (an other stuff). A few more concepts and higher order mathematics are starting to click
For those of you who want to play around with the moon texture i found modifying the time steps variable allows you to slow the changes in the shader down. Making it less jittery. Then varying the CoronaSampler0 options you start getting a feel for how that changes the shader output
P\_DEFAULT float time = 11.0 + (CoronaTotalTime + 0.8\*sin(CoronaTotalTime)) / 1.8;
becomes
P\_DEFAULT float time = 11.0 + (CoronaTotalTime + 0.8\*sin(CoronaTotalTime)) / 11.8;@ online2
No problem, and you’re very welcome.
I was curious since generator.random’s preview image looked pretty similar to the Shadertoy noise texture, so I gave it a go. This is the original for the most part, albeit with P_DEFAULT in most places and fwidth() when available:
do local kernel = { category = "filter", name = "circles" } kernel.isTimeDependent = true kernel.fragment = [[#define NUM 9.0 P\_DEFAULT float noise( in P\_DEFAULT vec2 x ) { P\_DEFAULT vec2 p = floor(x); P\_DEFAULT vec2 f = fract(x); P\_DEFAULT vec2 uv = p.xy + f.xy\*f.xy\*(3.0-2.0\*f.xy); return texture2D( CoronaSampler0, (uv+118.4)/256.0, -100.0).x; } P\_DEFAULT float map( in P\_DEFAULT vec2 x, P\_DEFAULT float t ) { return noise( 2.5\*x - 1.5\*t\*vec2(1.0,0.0) ); } P\_DEFAULT float shapes( in P\_DEFAULT vec2 uv, in P\_DEFAULT float r, in P\_DEFAULT float e ) { #ifdef GL\_OES\_standard\_derivatives #extension GL\_OES\_standard\_derivatives : enable #endif P\_DEFAULT float p = pow( 32.0, r - 0.5 ); P\_DEFAULT float l = pow( pow(abs(uv.x),p) + pow(abs(uv.y),p), 1.0/p ); P\_DEFAULT float d = l - pow(r,0.6) - e\*0.2 + 0.05; #ifdef GL\_OES\_standard\_derivatives P\_DEFAULT float fw = fwidth(d) \* .5; #else P\_DEFAULT float fw = CoronaTexelSize.x; #endif fw \*= 1.0 + 10.0\*e; return (r)\*smoothstep( fw, -fw, d ) \* (1.0-0.2\*e)\*(0.4 + 0.6\*smoothstep( -fw, fw, abs(l-r\*0.8+0.05)-0.1 )); } P\_COLOR vec4 FragmentKernel( P\_UV vec2 fragCoord ) { P\_DEFAULT vec2 qq = fragCoord.xy / CoronaContentScale.xy; P\_DEFAULT vec2 uv = fragCoord.xy / CoronaContentScale.xx; P\_DEFAULT float time = 11.0 + (CoronaTotalTime + 0.8\*sin(CoronaTotalTime)) / 1.8; uv += 0.01\*noise( 2.0\*uv + 0.2\*time ); P\_DEFAULT vec3 col = 0.0\*vec3(1.0) \* 0.15 \* abs(qq.y-0.5); P\_DEFAULT vec2 pq, st; P\_DEFAULT float f; P\_DEFAULT vec3 coo; // grey pq = floor( uv\*NUM ) / NUM; st = fract( uv\*NUM )\*2.0 - 1.0; coo = (vec3(0.5,0.7,0.7) + 0.3\*sin(10.0\*pq.x)\*sin(13.0\*pq.y))\*0.6; col += 1.0\*coo\*shapes( st, map(pq, time), 0.0 ); col += 0.6\*coo\*shapes( st, map(pq, time), 1.0 ); // orange pq = floor( uv\*NUM+0.5 ) / NUM; st = fract( uv\*NUM+0.5 )\*2.0 - 1.0; coo = (vec3(1.0,0.5,0.3) + 0.3\*sin(10.0\*pq.y)\*cos(11.0\*pq.x))\*1.0; col += 1.0\*coo\*shapes( st, 1.0-map(pq, time), 0.0 ); col += 0.4\*coo\*shapes( st, 1.0-map(pq, time), 1.0 ); col \*= pow( 16.0\*qq.x\*qq.y\*(1.0-qq.x)\*(1.0-qq.y), 0.05 ); P\_COLOR vec4 fragColor = vec4( col, 1.0 ); return CoronaColorScale(fragColor); }]] graphics.defineEffect(kernel) end local snapshot = display.newSnapshot(display.contentWidth, display.contentHeight) local r = display.newRect(snapshot.group, 0, 0, snapshot.width / 2, snapshot.height / 2) snapshot:translate(display.contentCenterX, display.contentCenterY) r.fill.effect = "generator.random" snapshot.fill.effect = "filter.custom.circles"
Not all the way there, but looks pretty close!