Difference between revisions of "Custom Shader Examples"
From GiderosMobile
Line 1: | Line 1: | ||
− | |||
'''Parent:''' [[Writing Custom Shaders]]<br/> | '''Parent:''' [[Writing Custom Shaders]]<br/> | ||
+ | |||
+ | |||
+ | __TOC__ | ||
=== A Grey Shader === | === A Grey Shader === | ||
Line 155: | Line 157: | ||
if bitmap:getX() > 400 then bitmap:setX(-80) end | if bitmap:getX() > 400 then bitmap:setX(-80) end | ||
end) | end) | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | === An Outline Shader from Code ''FLAG_FROM_CODE'' === | ||
+ | <syntaxhighlight lang="lua"> | ||
+ | spriteOutline = {} | ||
+ | |||
+ | spriteOutline.VS_GL = [[ | ||
+ | |||
+ | uniform highp mat4 vMatrix; | ||
+ | |||
+ | attribute highp vec3 vVertex; | ||
+ | attribute mediump vec2 vTexCoord; | ||
+ | |||
+ | varying mediump vec2 fTexCoord; | ||
+ | |||
+ | void main() { | ||
+ | vec4 vertex = vec4(vVertex, 1.0); | ||
+ | gl_Position = vMatrix*vertex; | ||
+ | fTexCoord = vTexCoord; | ||
+ | } | ||
+ | ]] | ||
+ | |||
+ | spriteOutline.FS_GL = [[ | ||
+ | |||
+ | #ifdef GL_ES | ||
+ | precision highp float; | ||
+ | #endif | ||
+ | |||
+ | const float offseta = 0.010; | ||
+ | |||
+ | uniform lowp vec4 fColor; | ||
+ | uniform mediump vec4 fTexSize; | ||
+ | uniform lowp sampler2D fTexture; | ||
+ | |||
+ | uniform lowp int fSwitch; | ||
+ | |||
+ | varying mediump vec2 fTexCoord; | ||
+ | |||
+ | vec4 getSample(float x, float y, float offset, float num) | ||
+ | { | ||
+ | vec4 result = vec4(0); | ||
+ | float size = 360.0 / num; | ||
+ | |||
+ | for (float a; a <= 360.0; a += size) | ||
+ | { | ||
+ | vec2 coord = vec2(cos(a) * offset + x, sin(a) * offset + y); | ||
+ | |||
+ | result += texture2D(fTexture, coord); | ||
+ | } | ||
+ | |||
+ | return result; | ||
+ | } | ||
+ | |||
+ | void main() | ||
+ | { | ||
+ | vec4 col = texture2D(fTexture, fTexCoord); | ||
+ | |||
+ | float nums = 32.0; | ||
+ | |||
+ | if (fSwitch == 44) // fSwitch can be changed in code, 44 is some random value for documentation purposes | ||
+ | { | ||
+ | vec4 nb = getSample(fTexCoord.x, fTexCoord.y, 0.020, nums); | ||
+ | |||
+ | if (col.a > 0. && nb.a < nums) | ||
+ | { | ||
+ | col.a = nb.a / nums; | ||
+ | col.r = nb.a / nums; | ||
+ | col.g = 0.0; | ||
+ | col.b = 0.0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | gl_FragColor = col; | ||
+ | } | ||
+ | ]] | ||
+ | |||
+ | spriteOutline.Shader=Shader.new(spriteOutline.VS_GL, spriteOutline.FS_GL, Shader.FLAG_FROM_CODE, | ||
+ | { | ||
+ | {name="vMatrix",type=Shader.CMATRIX,sys=Shader.SYS_WVP,vertex=true}, | ||
+ | {name="fColor",type=Shader.CFLOAT4,sys=Shader.SYS_COLOR,vertex=false}, | ||
+ | {name="fTexture",type=Shader.CTEXTURE,vertex=false}, | ||
+ | {name="fSwitch",type=Shader.CINT,vertex=false}, | ||
+ | }, | ||
+ | { | ||
+ | {name="vVertex",type=Shader.DFLOAT,mult=3,slot=0,offset=0}, | ||
+ | {name="vColor",type=Shader.DUBYTE,mult=4,slot=1,offset=0}, | ||
+ | {name="vTexCoord",type=Shader.DFLOAT,mult=2,slot=2,offset=0}, | ||
+ | } | ||
+ | ) | ||
+ | |||
+ | local sprite = Bitmap.new(Texture.new("gfx/test.png")) | ||
+ | --spriteOutline.Shader:setConstant("fSwitch", Shader.CINT, 1, 44) -- set fSwitch value to be 44 | ||
+ | sprite:setShader(spriteOutline.Shader) | ||
+ | sprite:setShaderConstant("fSwitch", Shader.CINT, 1, 44) -- set fSwitch value to be 44 | ||
+ | stage:addChild(sprite) | ||
</syntaxhighlight> | </syntaxhighlight> | ||
{{GIDEROS IMPORTANT LINKS}} | {{GIDEROS IMPORTANT LINKS}} |
Revision as of 03:55, 6 November 2023
Parent: Writing Custom Shaders
A Grey Shader
The code below defines a Grey shader consisting of:
- mycshaders/vShaderGrey.glsl vertex shader
- mycshaders/fShaderGrey.glsl fragment shader
Here the shader files are in the assets/mycshaders directory.
GLSL Vertex Shader: mycshaders/vShaderGrey.glsl
uniform highp mat4 vMatrix;
attribute highp vec3 vVertex;
attribute mediump vec2 vTexCoord;
varying mediump vec2 fTexCoord;
void main() {
vec4 vertex = vec4(vVertex, 0.8); // vertex coords, scale
gl_Position = vMatrix*vertex;
fTexCoord = vTexCoord;
}
GLSL Fragment Shader: mycshaders/fShaderGrey.glsl
//precision highp float;
#ifdef GLES2
precision highp float;
#endif
uniform lowp vec4 fColor;
uniform lowp sampler2D fTexture;
varying mediump vec2 fTexCoord;
void main() {
lowp vec4 frag = fColor*texture2D(fTexture, fTexCoord);
float color;
if (frag.a == 0.0) {
gl_FragColor = vec4(1.0, 0.5, 1.0, 1.0); // purple
} else {
color = dot(frag.rgb, vec3(0.299, 0.587, 0.114));
gl_FragColor = vec4(color, color, color, frag.a); // gray
}
}
Lua Code
-- open gl shader
local shadergrey = Shader.new("mycshaders/vShaderGrey", "mycshaders/fShaderGrey", 0,
{
{name="vMatrix", type=Shader.CMATRIX, sys=Shader.SYS_WVP, vertex=true},
{name="fColor", type=Shader.CFLOAT4, sys=Shader.SYS_COLOR, vertex=false},
{name="fTexture", type=Shader.CTEXTURE, vertex=false},
},
{
{name="vVertex", type=Shader.DFLOAT, mult=3, slot=0, offset=0},
{name="vColor", type=Shader.DUBYTE, mult=4, slot=1, offset=0},
{name="vTexCoord", type=Shader.DFLOAT, mult=2, slot=2, offset=0},
}
)
application:setBackgroundColor(0x333333)
local bitmap = Bitmap.new(Texture.new("gfx/test.png"))
local bitmap2 = Bitmap.new(Texture.new("gfx/arrow_0001.png"))
-- position
bitmap:setPosition(32*1, 32*4)
bitmap2:setPosition(32*6, 32*1)
-- shaders
bitmap:setShader(shadergrey)
bitmap2:setShader(shadergrey)
-- order
stage:addChild(bitmap)
stage:addChild(bitmap2)
A Wave Shader
The code below defines a Wave shader consisting of:
- mycshaders/vShaderWave.glsl vertex shader
- mycshaders/fShaderWave.glsl fragment shader
Here the shader files are in the assets/mycshaders directory.
GLSL Vertex Shader: mycshaders/vShaderWave.glsl
attribute vec4 POSITION0;
attribute vec2 TEXCOORD0;
uniform mat4 g_MVPMatrix;
varying vec2 texCoord;
void main()
{
gl_Position = g_MVPMatrix * POSITION0;
texCoord = TEXCOORD0;
}
GLSL Fragment Shader: mycshaders/fShaderWave.glsl
uniform lowp sampler2D g_Texture;
uniform lowp vec4 g_Color;
uniform highp float time;
varying highp vec2 texCoord;
void main()
{
highp vec2 tc = texCoord.xy;
// highp float dist = cos(tc.x * 24.0 - time * 4.0) * 0.02;
highp float dist = cos(tc.x * 2.0 - time * 8.0) * 0.02;
highp vec2 uv = tc + dist;
gl_FragColor = g_Color * texture2D(g_Texture, uv);
}
Lua Code
-- open gl shader
local shaderwave = Shader.new("mycshaders/vShaderWave", "mycshaders/fShaderWave", 0,
{
{name="g_MVPMatrix", type=Shader.CMATRIX, sys=Shader.SYS_WVP, vertex=true},
{name="g_Color", type=Shader.CFLOAT4, mult=1, sys=Shader.SYS_COLOR},
{name="g_Texture", type=Shader.CTEXTURE, mult=1, vertex=false},
{name="time", type=Shader.CFLOAT, mult=1, vertex=false}
},
{
{name="POSITION0", type=Shader.DFLOAT, mult=3, slot=0, offset=0},
{name="vColor", type=Shader.DUBYTE, mult=0, slot=1, offset=0},
{name="TEXCOORD0", type=Shader.DFLOAT, mult=2, slot=2, offset=0}
}
)
application:setBackgroundColor(0x333333)
local bitmap = Bitmap.new(Texture.new("gfx/test.png"))
local bitmap2 = bitmap:clone()
-- position
bitmap:setPosition(32*1, 32*4)
bitmap2:setPosition(32*6, 32*1)
-- shaders
bitmap:setShader(shaderwave)
bitmap2:setShader(shaderwave)
-- order
stage:addChild(bitmap)
stage:addChild(bitmap2)
-- loop
local timer = 0
stage:addEventListener(Event.ENTER_FRAME, function(e)
timer += 0.018
shaderwave:setConstant("time", Shader.CFLOAT, 1, timer)
bitmap:setX(bitmap:getX() + 1)
if bitmap:getX() > 400 then bitmap:setX(-80) end
end)
An Outline Shader from Code FLAG_FROM_CODE
spriteOutline = {}
spriteOutline.VS_GL = [[
uniform highp mat4 vMatrix;
attribute highp vec3 vVertex;
attribute mediump vec2 vTexCoord;
varying mediump vec2 fTexCoord;
void main() {
vec4 vertex = vec4(vVertex, 1.0);
gl_Position = vMatrix*vertex;
fTexCoord = vTexCoord;
}
]]
spriteOutline.FS_GL = [[
#ifdef GL_ES
precision highp float;
#endif
const float offseta = 0.010;
uniform lowp vec4 fColor;
uniform mediump vec4 fTexSize;
uniform lowp sampler2D fTexture;
uniform lowp int fSwitch;
varying mediump vec2 fTexCoord;
vec4 getSample(float x, float y, float offset, float num)
{
vec4 result = vec4(0);
float size = 360.0 / num;
for (float a; a <= 360.0; a += size)
{
vec2 coord = vec2(cos(a) * offset + x, sin(a) * offset + y);
result += texture2D(fTexture, coord);
}
return result;
}
void main()
{
vec4 col = texture2D(fTexture, fTexCoord);
float nums = 32.0;
if (fSwitch == 44) // fSwitch can be changed in code, 44 is some random value for documentation purposes
{
vec4 nb = getSample(fTexCoord.x, fTexCoord.y, 0.020, nums);
if (col.a > 0. && nb.a < nums)
{
col.a = nb.a / nums;
col.r = nb.a / nums;
col.g = 0.0;
col.b = 0.0;
}
}
gl_FragColor = col;
}
]]
spriteOutline.Shader=Shader.new(spriteOutline.VS_GL, spriteOutline.FS_GL, Shader.FLAG_FROM_CODE,
{
{name="vMatrix",type=Shader.CMATRIX,sys=Shader.SYS_WVP,vertex=true},
{name="fColor",type=Shader.CFLOAT4,sys=Shader.SYS_COLOR,vertex=false},
{name="fTexture",type=Shader.CTEXTURE,vertex=false},
{name="fSwitch",type=Shader.CINT,vertex=false},
},
{
{name="vVertex",type=Shader.DFLOAT,mult=3,slot=0,offset=0},
{name="vColor",type=Shader.DUBYTE,mult=4,slot=1,offset=0},
{name="vTexCoord",type=Shader.DFLOAT,mult=2,slot=2,offset=0},
}
)
local sprite = Bitmap.new(Texture.new("gfx/test.png"))
--spriteOutline.Shader:setConstant("fSwitch", Shader.CINT, 1, 44) -- set fSwitch value to be 44
sprite:setShader(spriteOutline.Shader)
sprite:setShaderConstant("fSwitch", Shader.CINT, 1, 44) -- set fSwitch value to be 44
stage:addChild(sprite)