Playing with threejs.org examples

All topics about ZGameEditor goes here.

Moderator: Moderators

Post Reply
User avatar
Ats
Posts: 233
Joined: Fri Sep 28, 2012 10:05 am
Contact:

Playing with threejs.org examples

Post by Ats » Thu Mar 21, 2019 10:26 am

Hi,
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: this is getting weirder, when I copy/paste this example to another ZGE window, I only get a black screen. No more pink colors...
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.

User avatar
Kjell
Posts: 1706
Joined: Sat Feb 23, 2008 11:15 pm

Re: Playing with threejs.org examples

Post by Kjell » Thu Mar 21, 2019 12:21 pm

Hi Ats,
Ats wrote:
Thu Mar 21, 2019 10:26 am
Can you give me a hint about what's going on?
Your vertex shader is incorrect. When you use Compatible as GLBase you should use the built-in "gl_Vertex" and "gl_MultiTexCoord0" attributes instead of the "position" and "uv" attributes used in the Three.js example* However, since you don't have any texture assigned to your Material, no texture coordinates are passed ( which results in vUv being 0 for each pixel ), so you should just use pass the vertex coordinates to the fragment shader instead. Like this ..

Code: Select all

varying vec2 vUv;

void main() {
	vUv = gl_Vertex.xy;
	gl_Position = gl_Vertex;
}
*When you use ES2/GL3 as GLBase these attributes should be named "position" and "texCoord" ( you can find these names in the Help ).

K

User avatar
Ats
Posts: 233
Joined: Fri Sep 28, 2012 10:05 am
Contact:

Re: Playing with threejs.org examples

Post by Ats » Thu Mar 21, 2019 1:13 pm

And it's working ! Thanks Kjell, that opens a whole new world of perspectives for me :)

User avatar
Ats
Posts: 233
Joined: Fri Sep 28, 2012 10:05 am
Contact:

Re: Playing with threejs.org examples

Post by Ats » Fri Mar 22, 2019 9:21 am

So I was porting shaders from threejs.org one after another and everything was fine when I switched computer (linux+Wine) and started getting weird error messages regarding glsl. So I thought that was coming from Wine...

And now everything is broken. I tried to switch computer, reinstall ZGE from scracth, and tried several zgeprojects that were working perfectly before, such as FBO.zgproj or Convolution.zgeproj...

For exemple, FBO.zgerpoj gives this error message:
Error in Vertex shader compilation (CanvasShader)
WARNING: 0:4: '' : #version directive missing
ERROR: 0:10: 'assign' : cannot convert from 'attribute 4-component vector of highp float' to 'varying 2-component vector of highp float'
I tried setting #version 120
changing varying vec2 vUv; to vec4

This is (almost) working:

Code: Select all

void main()
{
  uv = gl_Vertex.xy;
  gl_Position = gl_Vertex;
/*
  gl_Position = gl_Vertex;
  uv = gl_MultiTexCoord0;
*/
}
I really don't understand what's going on as it was working perfectly yersteday, and I didn't change a thing since then...

Edit:
OK, got it to work again using:

Code: Select all

void main()
{
  uv = gl_MultiTexCoord0 * gl_Vertex.xy;
  gl_Position = gl_Vertex;
}
:wink:

User avatar
Ats
Posts: 233
Joined: Fri Sep 28, 2012 10:05 am
Contact:

Re: Playing with threejs.org examples

Post by Ats » Fri Mar 22, 2019 10:15 am

So now I'm porting more complicated stuff. And in three.js they use #include <common> in the fragment shader.
I managed to make that work by copy/pasting all the "common" into ZGE fragment shader: https://github.com/mrdoob/three.js/blob ... on.glsl.js
But that's not very efficient if I have to do that for each and every shaders that needs it. So is it possible to make an include in ZGE shader?

User avatar
Kjell
Posts: 1706
Joined: Sat Feb 23, 2008 11:15 pm

Re: Playing with threejs.org examples

Post by Kjell » Fri Mar 22, 2019 12:46 pm

Hi Ats,
Ats wrote:
Fri Mar 22, 2019 9:21 am
I tried to switch computer, reinstall ZGE from scracth, and tried several zgeprojects that were working perfectly before, such as FBO.zgproj or Convolution.zgeproj...
As i mentioned in my recent post in the Blur thread, those examples are outdated. Back in 2009 only GLSL version 110 and 120 existed, and not defining a #version basically meant to ignore the version altogether. This has changed since then ( omitting #version treats your shader as version 110 ) and therefore these old examples will not compile anymore on a lot of systems.
Ats wrote:
Fri Mar 22, 2019 10:15 am
So now I'm porting more complicated stuff. And in three.js they use #include <common> in the fragment shader. But that's not very efficient if I have to do that for each and every shaders that needs it. So is it possible to make an include in ZGE shader?
Anything is possible, but right now ZGE simply passes the shader sources directly to OpenGL without any parsing. And i doubt Ville is willing to add a parser since .zgeproj files are used as-is by the ZGameEditor visualizer which would mean parsing occurs at run-time in that environment ( adding additional processing / load-time ).

You can always add a shader that includes the common.glsl contents to Library.xml .. but i generally recommend against including any definitions / functions in your shaders that don't actually get used ( and i can't imagine you'd be using all of it in every shader ).
Ats wrote:
Fri Mar 22, 2019 9:21 am
OK, got it to work again using:

Code: Select all

void main()
{
  uv = gl_MultiTexCoord0 * gl_Vertex.xy;
  gl_Position = gl_Vertex;
}
Multiplying your texture coordinates with your vertex coordinates doesn't make any sense ...

K

Post Reply