Questions about ES2/GL3 shaders

All topics about ZGameEditor goes here.

Moderator: Moderators

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

Re: Questions about ES2/GL3 shaders

Post by Ats » Tue Jun 08, 2021 9:03 am

Sorry, I didn't see that you uploaded the changes to GitHub. I'm on it!

Edit: All right, everything's fine on Android. I manually tried libGLESv1_CM.so and then libGLESv2.so

Here's the new libzgeandroid.so
Maybe I could directly make a PR on gihtub with the new lib next time?
Attachments
libzgeandroid.zip
(263.36 KiB) Downloaded 61 times

User avatar
VilleK
Site Admin
Posts: 2196
Joined: Mon Jan 15, 2007 4:50 pm
Location: Stockholm, Sweden
Contact:

Re: Questions about ES2/GL3 shaders

Post by VilleK » Tue Jun 08, 2021 9:36 am

Thanks. I now also committed a fix for the ANDROID constant.

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

Re: Questions about ES2/GL3 shaders

Post by Ats » Tue Jun 08, 2021 3:18 pm

All right, it's perfect now. Just one very little detail, here's the repro:
  • Put nothing (or libGLESv1_CM.so) in ZExternalLibrary.ModuleName and ZExternalLibrary.BeforeInitExp needs to have the automatic detection code:
    ModuleName01.png
    ModuleName01.png (8 KiB) Viewed 2472 times
  • Run the app in preview mode
  • ZExternalLibrary.ModuleName is now opengl32, but in the project tree, the name isn't updated:
    ModuleName02.png
    ModuleName02.png (7.72 KiB) Viewed 2472 times
It's not a breaking problem, but it's a bit weird when ZExternalLibrary isn't selected, and I was wondering how it was able to work since it wasn't updates to opengl32 :wink:

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

Re: Questions about ES2/GL3 shaders

Post by Ats » Wed Jun 16, 2021 10:13 am

I'm back at discovering shaders. I managed to make the vertex color one:

Code: Select all

#ifdef GL_ES
  precision mediump float;
#endif

uniform mat4 modelViewProjectionMatrix;
attribute vec3 position; // vertex position
attribute vec3 color;    // vertex color

varying vec4 v_Color;

void main()
{
  v_Color = vec4(color, 1.0);
  gl_Position = modelViewProjectionMatrix * vec4(position, 1.0);
}

Code: Select all

#ifdef GL_ES
  precision mediump float;
#endif

varying vec4 v_Color;

void main()
{
    gl_FragColor = v_Color;
}
By the way, is " #ifdef GL_ES precision mediump float; #endif " mandatory in both, or at all?

Edit:
I just realized that position and color are vec4 in the ZGameEditor Help... :roll: :?: :?: :?:
So maybe that is better?? But it's not working on Android, while the previous vec3 one is... ???

Code: Select all

#ifdef GL_ES
  precision mediump float;
#endif

uniform mat4 modelViewProjectionMatrix;
attribute vec4 position; // vertex position
attribute vec4 color;    // vertex color

varying vec4 v_Color;

void main()
{
  v_Color = color;
  gl_Position = modelViewProjectionMatrix * position;
}
Looks like I'm not the only one who is perplexed: https://stackoverflow.com/questions/189 ... c4-or-vec3
"I suppose this is why most tutorials never touch on this topic."


--

I'm also struggling to convert Kjell phong light shader to ES2/GL3. I made something that seems to work, but it's not taking account material colors, and gives different results on preview, build and android :lol:

Here's the Vertex Shader from compatible:

Code: Select all

varying vec3 N;
varying vec3 v;

void main(void)
{
   v = vec3(gl_ModelViewMatrix * gl_Vertex);
   N = normalize(gl_NormalMatrix * gl_Normal);
   gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
   gl_FrontColor = gl_Color;
}
to ES2/GL3:

Code: Select all

#ifdef GL_ES
  precision mediump float;
#endif

uniform mat4 modelViewMatrix;
uniform mat4 modelViewProjectionMatrix;
uniform mat3 normalMatrix;

attribute vec3 position; // vertex position
attribute vec3 normal;   // vertex normal

varying vec3 N;
varying vec3 v;

void main(void)
{
  v = vec3(modelViewMatrix * vec4(position, 1.0));
  N = normalize(normalMatrix * normal);
  gl_Position = modelViewProjectionMatrix * vec4(position, 1.0);
  gl_FrontColor = gl_Color;
}
But I don't see what to change in the Fragment Shader:

Code: Select all

//

varying vec3 N;
varying vec3 v;

void main (void)
{
   vec3 L = normalize(gl_LightSource[0].position.xyz - v);
   vec3 E = normalize(-v); // we are in Eye Coordinates, so EyePos is (0,0,0)
   vec3 R = normalize(-reflect(L,N));

   //calculate Ambient Term:
   vec4 Iamb = gl_FrontLightProduct[0].ambient;

   //calculate Diffuse Term:
   vec4 Idiff = gl_Color * gl_FrontLightProduct[0].diffuse * max(dot(N,L), 0.0);
   Idiff = clamp(Idiff, 0.0, 1.0);

   // calculate Specular Term:
   vec4 Ispec = gl_FrontLightProduct[0].specular
                * pow(max(dot(R,E),0.0),0.3*gl_FrontMaterial.shininess);
   Ispec = clamp(Ispec, 0.0, 1.0);

   // write Total Color:
   gl_FragColor = gl_FrontLightModelProduct.sceneColor + Iamb + Idiff + Ispec;
}

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

Re: Questions about ES2/GL3 shaders

Post by Kjell » Wed Jun 16, 2021 1:24 pm

Hi Ats,
Ats wrote:
Wed Jun 16, 2021 10:13 am
By the way, is " #ifdef GL_ES precision mediump float; #endif " mandatory in both, or at all?
It's not required, but by default floats are set to precision highp and not every mobile GPU supports that. And i guess if your shader doesn't define any floating-point variables, it's not needed either ( but that's probably pretty rare ).
Ats wrote:
Wed Jun 16, 2021 10:13 am
I just realized that position and color are vec4 in the ZGameEditor Help... :roll: :?: :?: :?:
So maybe that is better?? But it's not working on Android, while the previous vec3 one is... ???
It should work. Did you only change "attribute vec3 color" into vec4? Because then the "vec4(color, 1.0);" line is incorrect.
Ats wrote:
Wed Jun 16, 2021 10:13 am
Looks like I'm not the only one who is perplexed: https://stackoverflow.com/questions/189 ... c4-or-vec3
It's entirely up to the engine creator to decide that. It doesn't really matter though.
Ats wrote:
Wed Jun 16, 2021 10:13 am
I'm also struggling to convert Kjell phong light shader to ES2/GL3. I made something that seems to work, but it's not taking account material colors, and gives different results on preview, build and android :lol:
You can't use gl_FrontColor in ES2/GL3. Keep in mind that on desktop GL3 has backwards-compatibility, so if you accidentally use deprecated features they still work.
Ats wrote:
Wed Jun 16, 2021 10:13 am
But I don't see what to change in the Fragment Shader:
You need to get rid of everything that uses a "gl_" prefix aside from gl_FragColor. Unfortunately ZGE doesn't pass any light values to your shader automatically, so you need to do that yourself using ShaderVariable components.

K

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

Re: Questions about ES2/GL3 shaders

Post by Ats » Wed Jun 16, 2021 2:16 pm

Thanks for the explanations :wink:
It should work. Did you only change "attribute vec3 color" into vec4? Because then the "vec4(color, 1.0);" line is incorrect.
I just verified again:

Code: Select all

uniform mat4 modelViewProjectionMatrix;
attribute vec3 position, color;
varying vec4 v_Color;

void main()
{
  v_Color = vec4(color, 1.0);
  gl_Position = modelViewProjectionMatrix * vec4(position, 1.0);
}
is working on PC and Android:
Screenshot_20210616-160451.png
Screenshot_20210616-160451.png (60.01 KiB) Viewed 2353 times

Code: Select all

//
uniform mat4 modelViewProjectionMatrix;
attribute vec4 position, color;
varying vec4 v_Color;

void main()
{
  v_Color = color;
  gl_Position = modelViewProjectionMatrix * position;
}
is working on PC but not on Android:
Screenshot_20210616-160348.png
Screenshot_20210616-160348.png (51.32 KiB) Viewed 2353 times


Edit:
Got it!!!
The problem was coming from meshes vertex color alpha not set to "C.A = 1;", again... :|
VilleK, since the results on Android are never the same as on computer because of this, why isn't it already set like this in the source code of ZGE instead of having to manually configure it every time in all projects?
Last edited by Ats on Wed Jun 16, 2021 8:23 pm, edited 2 times in total.

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

Re: Questions about ES2/GL3 shaders

Post by Ats » Wed Jun 16, 2021 3:44 pm

Also, the updated beta with inheritance in classes broke the BitmapCell:
Capture d’écran (251).png
Capture d’écran (251).png (46.74 KiB) Viewed 2346 times
Unless the new beta is a fork from before the merge between Classes and the other fixes?

User avatar
VilleK
Site Admin
Posts: 2196
Joined: Mon Jan 15, 2007 4:50 pm
Location: Stockholm, Sweden
Contact:

Re: Questions about ES2/GL3 shaders

Post by VilleK » Thu Jun 17, 2021 8:23 am

Ats wrote:
Wed Jun 16, 2021 3:44 pm
Unless the new beta is a fork from before the merge between Classes and the other fixes?
It is a fork but should still work. I found the problem with bitmapcells and will fix it.

About the missing alpha in vertex colors, I could initialize this to 1.0 but I also want to understand why this is not needed on desktop. @Kjell: Do you have any theory?

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

Re: Questions about ES2/GL3 shaders

Post by Kjell » Thu Jun 17, 2021 8:40 am

Hi Ville,
VilleK wrote:
Thu Jun 17, 2021 8:23 am
About the missing alpha in vertex colors, I could initialize this to 1.0 but I also want to understand why this is not needed on desktop.
I'm not entirely sure, but i suspect that a Android Activity has a white background by default and any pixel of your front-buffer that isn't fully opaque automatically gets "blended" with that background color ( just like WebGL ). On desktop this behavior doesn't happen by default. Could be something else though ..

K

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

Re: Questions about ES2/GL3 shaders

Post by Ats » Thu Jun 17, 2021 9:57 pm

So I'm discovering the shader UniformVariables to remove the gl_ things, and I have a little question, just to be sure:

gl_FrontLightModelProduct.sceneColor is the ambient colour of the scene, so App.AmbientLightColor

But what about those three?
gl_FrontLightProduct[0].ambient
gl_FrontLightProduct[0].diffuse
gl_FrontLightProduct[0].specular

Are they the material Color, SpecularColor and EmissionColor?

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

Re: Questions about ES2/GL3 shaders

Post by Kjell » Fri Jun 18, 2021 4:52 am

Hi Ats,

All of those built-in variables are actually pre-calculated using various parameters by the OpenGL driver.

gl_FrontLightModelProduct = Material.EmissionColor + Material.AmbientColor * App.AmbientLightColor
gl_FrontLightProduct[0].ambient = Material.AmbientColor * Light0.AmbientColor
gl_FrontLightProduct[0].diffuse = Material.Color * Light0.Color
gl_FrontLightProduct[0].specular = Material.SpecularColor * Light0.SpecularColor

However, the Material / Light components in ZGE don't have properties for all of these values ( i marked those red ) .. so unless you're using OpenGL calls to set them ( which you can't in ES2/GL3 because all of this has been removed ) these values are always their default.

K

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

Re: Questions about ES2/GL3 shaders

Post by Ats » Fri Jun 18, 2021 9:34 am

Ok... But how does compatible works then if those values doesn't exist in ZGE? If they have default values, then I shouldn't be worried not using them in the ES2/GL3 shader, right? (not sure)

Anyway, I'm already struggling to pass the App.AmbientLightColor to the shader in a simple test... It should be the color of the "sun" but everything is black instead. Am I doing something wrong?

Code: Select all

<Shader Name="LightAmbiantShader">
<VertexShaderSource>
<![CDATA[//
uniform mat4 modelViewProjectionMatrix;

attribute vec4 position, color; // vertex position

void main(void)
{
  gl_Position = modelViewProjectionMatrix * position;
}]]>
</VertexShaderSource>
<FragmentShaderSource>
<![CDATA[//
uniform vec4 lightAmbientColor;

void main (void)
{
   gl_FragColor = lightAmbientColor;
}]]>
</FragmentShaderSource>
<UniformVariables>
<ShaderVariable VariableName="lightAmbientColor" ValuePropRef="App.AmbientLightColor"/>
</UniformVariables>
</Shader>

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

Re: Questions about ES2/GL3 shaders

Post by Kjell » Fri Jun 18, 2021 10:55 am

Hi Ats,
Ats wrote:
Fri Jun 18, 2021 9:34 am
But how does compatible works then if those values doesn't exist in ZGE?
Just because ZGE doesn't use certain OpenGL features that doesn't mean they don't exist. OpenGL is basically a state machine.
Ats wrote:
Fri Jun 18, 2021 9:34 am
If they have default values, then I shouldn't be worried not using them in the ES2/GL3 shader, right?
Most of the built-in light & material features were removed in ES2/GL3 .. and non-existing variables can't have a default value obviously.
Ats wrote:
Fri Jun 18, 2021 9:34 am
Anyway, I'm already struggling to pass the App.AmbientLightColor to the shader in a simple test... It should be the color of the "sun" but everything is black instead. Am I doing something wrong?
The ShaderVariable component is pretty limited and a bit confusing. You can only use individual floats ( no vec2/3/4 or mat4 ) or arrays. For your specific situation / shader i'd just use a array of mat4 and transfer all the variables that way. For example:

Code: Select all

<?xml version="1.0" encoding="iso-8859-1" ?>
<ZApplication Name="App" Caption="ZGameEditor application" AmbientLightColor="1 0.5 0.25 1" FileVersion="2">
  <OnRender>
    <ZExpression>
      <Expression>
<![CDATA[//

DemoData[0][0,0] = App.AmbientLightColor.R;
DemoData[0][0,1] = App.AmbientLightColor.G;
DemoData[0][0,2] = App.AmbientLightColor.B;]]>
      </Expression>
    </ZExpression>
    <UseMaterial Material="DemoMaterial"/>
    <RenderNet/>
  </OnRender>
  <Content>
    <Array Name="DemoData" Type="5" SizeDim1="1"/>
    <Shader Name="DemoShader">
      <VertexShaderSource>
<![CDATA[//

void main()
{
  gl_Position = gl_Vertex;
}]]>
      </VertexShaderSource>
      <FragmentShaderSource>
<![CDATA[//

uniform mat4 data;

void main()
{
  gl_FragColor = vec4(data[0][0], data[0][1], data[0][2], 1.0);
}]]>
      </FragmentShaderSource>
      <UniformVariables>
        <ShaderVariable VariableName="data" ValueArrayRef="DemoData" ArrayKind="1"/>
      </UniformVariables>
    </Shader>
    <Material Name="DemoMaterial" Shading="1" Light="0" ZBuffer="0" Shader="DemoShader"/>
  </Content>
</ZApplication>
K

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

Re: Questions about ES2/GL3 shaders

Post by Ats » Fri Jun 18, 2021 3:01 pm

Hahaha each time you help me, everything is multiplied per 3 :lol:
So what if I render several materials at the same time. Would it be better to have an array per shader, or reuse the same array before rendering each material?

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

Re: Questions about ES2/GL3 shaders

Post by Kjell » Fri Jun 18, 2021 3:29 pm

Hi Ats,
Ats wrote:
Fri Jun 18, 2021 3:01 pm
So what if I render several materials at the same time. Would it be better to have an array per shader, or reuse the same array before rendering each material?
That's difficult to answer. It really depends on a bunch of factors .. but in general it's probably most convenient to just reuse the same array.

K

Post Reply