Difference between revisions of "Custom Shader Examples"

From GiderosMobile
(Created page with "__NOTOC__ '''Parent:''' Writing Custom Shaders<br/> === A Grey Shader === The code below defines a Grey shader consisting of: * mycshaders/vShaderGrey.glsl vertex shader...")
 
Line 74: Line 74:
 
stage:addChild(bitmap)
 
stage:addChild(bitmap)
 
stage:addChild(bitmap2)
 
stage:addChild(bitmap2)
 +
</syntaxhighlight>
 +
 +
=== A Wave Shader ===
 +
{{#widget:GApp|app=Playground_Shaders_Wave.GApp|width=480|height=320|auto=1}}
 +
 +
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''
 +
<syntaxhighlight lang="c">
 +
attribute vec4 POSITION0;
 +
attribute vec2 TEXCOORD0;
 +
uniform mat4 g_MVPMatrix;
 +
varying vec2 texCoord;
 +
 +
void main()
 +
{
 +
gl_Position = g_MVPMatrix * POSITION0;
 +
texCoord = TEXCOORD0;
 +
}
 +
</syntaxhighlight>
 +
 +
'''GLSL Fragment Shader:''' ''mycshaders/fShaderWave.glsl''
 +
<syntaxhighlight lang="c">
 +
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);
 +
}
 +
</syntaxhighlight>
 +
 +
'''Lua Code'''
 +
<syntaxhighlight lang="lua">
 +
-- 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)
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 
{{GIDEROS IMPORTANT LINKS}}
 
{{GIDEROS IMPORTANT LINKS}}

Revision as of 21:53, 5 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)