Today I'm diving into shaders. So I was browsing the web to search for "simple" shader to port to ZGE so I can learn how it is working.
I started with Monjori by Mic: https://threejs.org/examples/#webgl_shader
I read about the differences between GLSL #version 100 and greater versions that works differently, I managed to get the component ShaderVariable to work, but all I can get is a uniform color varying from white to magenta over time...
Can you give me a hint about what's going on?
Code: Select all
<?xml version="1.0" encoding="iso-8859-1" ?>
<ZApplication Name="App" Caption="ZGameEditor application" FileVersion="2">
<OnRender>
<UseMaterial Material="MonjoriMaterial"/>
<RenderMesh Mesh="PlaneMesh"/>
</OnRender>
<Content>
<Shader Name="MonjoriShader">
<VertexShaderSource>
<![CDATA[// https://github.com/mrdoob/three.js/blob/master/examples/webgl_shader.html
// based on Monjori by Mic: http://www.pouet.net/prod.php?which=52761
attribute vec2 uv;
attribute vec3 position;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4( position, 1.0 );
}]]>
</VertexShaderSource>
<FragmentShaderSource>
<![CDATA[varying vec2 vUv;
uniform float time;
void main() {
vec2 p = -1.0 + 2.0 * vUv;
float a = time * 40.0;
float d, e, f, g = 1.0 / 40.0 ,h ,i ,r ,q;
e = 400.0 * (p.x * 0.5 + 0.5);
f = 400.0 * (p.y * 0.5 + 0.5);
i = 200.0 + sin(e * g + a / 150.0) * 20.0;
d = 200.0 + cos(f * g / 2.0) * 18.0 + cos(e * g) * 7.0;
r = sqrt(pow(abs(i - e), 2.0) + pow(abs( d - f), 2.0));
q = f / r;
e = (r * cos(q)) - a / 2.0;
f = (r * sin(q)) - a / 2.0;
d = sin(e * g) * 176.0 + sin(e * g) * 164.0 + r;
h = ((f + d) + a / 2.0) * g;
i = cos(h + r * p.x / 1.3) * (e + e + a) + cos(q * g * 6.0) * (r + h / 3.0);
h = sin(f * g) * 144.0 - sin(e * g) * 212.0 * p.x;
h = (h + (f - e) * q + sin(r - (a + h) / 7.0) * 10.0 + i / 4.0) * g;
i += cos(h * 2.3 * sin(a / 350.0 - q)) * 184.0 * sin(q - (r * 4.3 + a / 12.0) * g) + tan(r * g + h) * 184.0 * cos(r * g + h);
i = mod(i / 5.6, 256.0) / 64.0;
if (i < 0.0) i += 4.0;
if (i >= 2.0) i = 4.0 - i;
d = r / 350.0;
d += sin(d * d * 8.0) * 0.52;
f = (sin(a * g) + 1.0) / 2.0;
gl_FragColor = vec4(vec3(f * i / 1.6, i / 2.0 + d / 13.0, i) * d * p.x + vec3(i / 1.3 + d / 8.0, i / 2.0 + d / 18.0, i) * d * (1.0 - p.x), 1.0);
}]]>
</FragmentShaderSource>
<UniformVariables>
<ShaderVariable VariableName="time" ValuePropRef="App.Time / 2"/>
</UniformVariables>
</Shader>
<Material Name="MonjoriMaterial" Shader="MonjoriShader"/>
<Mesh Name="PlaneMesh">
<Producers>
<MeshBox Scale="1 1 0" XCount="1" YCount="1" Grid2DOnly="255"/>
</Producers>
</Mesh>
</Content>
</ZApplication>
Edit 2: the pink thing only appears in preview mode. Seems like I broke the ZGE window I was working with.
Edit 3: If I set the App.GLBase to ES2/GL3, the pink color is back, but only when pressing F9.